DEV Community

Discussion on: Create a Component Library Fast🚀(using Vite's library mode)

View post

Replies for: I created a new tsconfig.build.json file and extended tsconfig.app.json, seems to work fine: { "extends": "./tsconfig.app.json", "include": ["...

Collapse
 
receter profile image
Andreas Riedmüller •

I would suggest this:

Do not include the lib folder in tsconfig.app.json, instead create a tsconfig.lib.json like so:

{
  "extends": "./tsconfig.app.json",
  "include": ["lib"]
}
Enter fullscreen mode Exit fullscreen mode

Then add tsconfig.lib.json to the references array in your tsconfig.json.

And set the build script to:

    "build": "tsc -b ./tsconfig.lib.json && vite build",
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
receter profile image
Andreas Riedmüller •

I made a branch with the latest vite version (5.4.4 at the time of writing): github.com/receter/my-component-li...

Here is a summary of what I had to change for the building the types:

  1. update to vite-plugin-dts@4

  2. add tsconfig path to dts config

    dts({
      tsconfigPath: resolve(__dirname, "tsconfig.lib.json"),
    }),
Enter fullscreen mode Exit fullscreen mode

This outputs types to a lib subfolder in dist. So you need to update your package.json to point to the correct type entry: "./dist/lib/main.d.ts" (or you could use rollupTypes: true)

Also I manually had to install ajv because of an issue: stackoverflow.com/questions/787352...

In this branch I also use the new package.json exports feature and "self reference" the library in App.tsx.

I will try to find time to update my article accordingly, but for now this branch might help you.

Thread Thread
 
receter profile image
Andreas Riedmüller •

I just found out that the issue with ajv was because I (unintentionally) had legacy-peer-deps=true in my global npm config on my other computer. I have updated the FAQs of this article with more details.