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

[Marcel Oramas]

Hello!
I found and issue with the tsconfig files in the latest vite version (5.4 at the time of this comment). While previous versions of create vite would generate a tsconfig.json and a tsconfig.node.json, the latest version creates an additional tsconfig.app.json making it no longer possible to make the steps in this tutorial work by extending any of these files in the tsconfig-build.json. What solved the issue for me was deleting all three files and copying tsconfig.json and tsconfig.node.json from an older vite project. Hope this helps!

[Gintaras Stankus]

I created a new tsconfig.build.json file and extended tsconfig.app.json, seems to work fine:

{
"extends": "./tsconfig.app.json",
"include": ["lib"]
}

Also, with the new vite version with tsconfig.app.json, for building type definitions I had to add tsconfigPath:

dts({ include: ['lib'], rollupTypes: true, tsconfigPath: 'tsconfig.app.json' }),

[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"]
}

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",

[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"),
    }),

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.

[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.