DEV Community

Create a React component library with Vite and Typescript

Nicolas Erny on April 11, 2022

Most of the time, we use our favorite tool to create a React application: create react app, next, gatsby... But, it's a different story when it com...

Read full post

njavilas2015 • Jul 24 '22 • Edited

good evening your article fell from the sky, I would like to share an improvement

import react from '@vitejs/plugin-react';
import { readFile } from 'node:fs/promises';
import path from 'node:path';
import { defineConfig, UserConfigExport } from 'vite';
import dts from 'vite-plugin-dts';

const App = async (): Promise<UserConfigExport> => {

    var name: string = 'replaceme';

    const data: string = await readFile(path.join(__dirname, 'src', 'lib', 'index.tsx'), { encoding: 'utf-8' })

    const s = data.split('\n')

    for (let x of s.reverse()) if (x.includes('export default')) name = x.replace('export default ', '').replace(" ", "")

    return defineConfig({
        plugins: [
            react(),
            dts({
                insertTypesEntry: true,
            }),
        ],
        build: {
            lib: {
                entry: path.resolve(__dirname, 'src/lib/index.tsx'),
                name,
                formats: ['es', 'umd'],
                fileName: (format) => `lib.${format}.js`,
            },
            rollupOptions: {
                external: ['react', 'react-dom', 'styled-components'],
                output: {
                    globals: {
                        react: 'React',
                        'react-dom': 'ReactDOM',
                        'styled-components': 'styled',
                    },
                },
            },
        },
    });
}

export default App

This improvement takes the name of the component that we are exporting, so that it is dynamic to obtain the name to import it into our projects

and it works great!

I took the liberty of exporting our code as lib by default, so I didn't have to keep renaming the files.

Nicolas Erny • Jul 25 '22

Nice improvements! Thanks :)

Stephanie • Aug 19 '23

maybe a repo link? i tried your solution but Im not sure how to, or what it suppose to do?

Russ • May 3 '22

Thanks for this! Was finally able to create a shared component library in my project. Been meaning to do that for a while. As of the time of this comment, to get storybook working I had to add:

<script>
  window.global = window
</script>

to a file called .storybook/preview-head.html

Nicolas Erny • May 4 '22

Good to know! Thanks :)

Jishnu Viswanath • Jul 6 '22

After considerable amount of time spent on migrating component library build from rollup to vite I realised that vite build is slower than rollup

All timing values are taken from vite-plugin-time-reporter plugin for both vite and rollup

First vite report
dev-to-uploads.s3.amazonaws.com/up...

On update with watch
dev-to-uploads.s3.amazonaws.com/up...

With rollup
dev-to-uploads.s3.amazonaws.com/up...

It looks like vite is good for only single page webapp build not for component library on mono repo

Nicolas Erny • Jul 6 '22

Thank you for your feedback. I don't have much experience with rollup. But it's good to know that rollup can be a more performant choice. On my projets, I'm happy with performance, but I don't have any comparison with rollup...
I wonder if there is a bug in vite. I will check out the issues on Github.

jurito • Mar 17 '23 • Edited

GREAT article!
Just a question. With this approach, how would I implement a library with folders?

My target would be being able to do smth like:

import { component } from 'mylibrary/folder';
import { othercomponent } from 'mylibrary/otherfolder';

Nicolas Erny • Mar 18 '23

Thanks 🙏
I think I found the solution in the vitejs documentation: vitejs.dev/guide/build.html#librar...
You can define multiple entry points in the Vite config and expose them with folders (package.json).

Adam Palmer • Mar 10 '23

Great article! Thanks. But your prepack script deletes all my deps on npm publish. Is there a way to make it add them back in?

Nicolas Erny • Mar 13 '23 • Edited

For my use case, it wasn't an issue because I only run pack/publish in our CI environment.
If you want to get the deps back, here's a quick idea:

create a temporary backup of the package.json file in the prepack script
add a postpack script to restore the package.json file

Perhaps, we could find a tool to manage the packaging/versioning. For more advanced use cases, I would start digging here: turbo.build/repo/docs/handbook/pub....

Hopefully, my answer will be useful.

Adam Palmer • Mar 13 '23

Thanks Nicolas. I've actually just implemented this, which solves it nicely. Removes and adds back in the deps, along with anything else the package doesn't need, like scripts. npmjs.com/package/clean-package

Stephanie • Aug 19 '23

any way to share repo? :) @palmerama

Yazan Alkhatib • Jun 7 '23

I'm trying to deploy the app which I'm using to import and test my package, it's building alright in development but when trying to deploy to Vercel or Netlify I'm getting the following error:

src/App.tsx(2,22): error TS2307: Cannot find module 'yaa-grid' or its corresponding type declarations. error Command failed with exit code 2.

I'm expecting that it's something that has to do with the types file

Hey! I'm Arthur • Jun 16 '23

I have same issue but in development(

Nicolas Erny • Jun 19 '23

I will investigate more when I have some time.
Perhaps, we need to upgrade some dependencies...

Rafael Nogueira • Dec 1 '22

Thanks for this article, it was very helpfull.
I have a problem when use the component in my project. It show: TypeError: s.button is not a function
It seems to happen in one of the modules

Call Stack
<unknown>
dist/vfb-components.es.js

It looks like a problem with the style file or with the imported styled from styled-components.
This only happens when a install the library at NextJS project. It works fine with CRA.

Any ideia how to fix this?

Rafael Nogueira • Dec 5 '22

So i found a topic about this problem. It only happens with projects using SSR.
There's no official fix for this at the moment, but this fix works github.com/styled-components/style...

Nicolas Erny • Dec 6 '22

Thanks for sharing.

Nicolas Erny • Dec 2 '22

Hard to investigate. I use this strategy with Nextjs on some projects without any trouble: component library with Vite + webapp in Nextjs. Do you have a public github repository with this issue?

Mohamed Abusrea • Oct 14 '22 • Edited

Thank you for the great article. I'm facing an issue when adding an extenral library like antd or like szhsin/react-menu. I get this error:

TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (http://localhost:6006/@fs/Users/mohamedabusrea/Desktop/Workspace/component-library/dist/component-library.es.js?t=1665733637289:1628:29)
    at useTransition2 (http://localhost:6006/@fs/Users/mohamedabusrea/Desktop/Workspace/component-library/dist/component-library.es.js?t=1665733637289:36830:33)
    at useMenuState2 (http://localhost:6006/@fs/Users/mohamedabusrea/Desktop/Workspace/component-library/dist/component-library.es.js?t=1665733637289:36898:24)
    at useMenuStateAndFocus2 (http://localhost:6006/@fs/Users/mohamedabusrea/Desktop/Workspace/component-library/dist/component-library.es.js?t=1665733637289:36911:23)
    at Menu2 (http://localhost:6006/@fs/Users/mohamedabusrea/Desktop/Workspace/component-library/dist/component-library.es.js?t=1665733637289:36937:31)
    at renderWithHooks (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-5LLNUTNH.js?v=f9c3babb:11763:26)
    at updateForwardRef (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-5LLNUTNH.js?v=f9c3babb:13907:28)
    at beginWork (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-5LLNUTNH.js?v=f9c3babb:15479:22)
    at beginWork$1 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-5LLNUTNH.js?v=f9c3babb:19248:22)
    at performUnitOfWork (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-5LLNUTNH.js?v=f9c3babb:18693:20)

any clue?

Nicolas Erny • Oct 15 '22

Hello, I've just tried to use react-menu without any trouble. I wonder if you have conflicts between multiple React versions locally. You can check with "yarn why react".

mohamedalkhawam • Apr 22 '23

Hi Thanks for your article, but I do have the same issue

Uncaught TypeError: Cannot read properties of null (reading 'useState') at Object.useState

I here is my "yarn why react".

info Has been hoisted to "react" info This module exists because it's specified in "devDependencies". info Disk size without dependencies: "388KB" info Disk size with unique dependencies: "420KB" info Disk size with transitive dependencies: "448KB" info Number of shared dependencies: 2

Gilad Lev-Ari • Jan 1 '23

Hi, thanks for the explanation.
I have a small question.
I created a library based on this post, and when trying to use it inside my app, I get no IntelliSense on the component's props.

How do I need to set my d.ts?

FelixSelter • Aug 6 '23 • Edited

Change your libraries package.json from:

"types": "./dist/index.d.ts",
"exports": {
    ".": {
      "import": "./dist/lib.es.js",
      "require": "./dist/lib.umd.js",   
    }
  }

to:

"exports": {
    ".": {
      "import": "./dist/lib.es.js",
      "require": "./dist/lib.umd.js",   
      "types": "./dist/index.d.ts",
    }
  }

It seems like the type field is ignored when theres an export field:
stackoverflow.com/a/76212193/11355399

Nicolas Erny • Jan 2 '23

Hi :) It should generate the types. 🤔
In the vite.config.ts, I use this lib to generate types:
import dts from 'vite-plugin-dts';

plugins: [
react(),
dts({
insertTypesEntry: true,
}),
],

Chris Burrows • Jul 21 '22

Hi, I keep running into the issue of "require undefined"

This is from a straight pull down from you repository as well as when I do it by hand. Have you encountered this problem before? I have scoured the internet, but can't seem to find a solution :|

Any help would be great!

Nicolas Erny • Jul 21 '22

It looks like there is something messy in the node_modules (especially with the alpha version). I've just pushed an update to use fixed dependencies. Now, it should work smoothly with node 16.
For sure, there is work to do if we want to update the dependencies (at the time of the article, only the alpha version was available). I will give it a try when I have more time. Hope it helps.

Nicolas Erny • Jul 21 '22

Another idea: if you want to use the latest version of storybook (instead of the alpha versions), you have to use react 18. I remember that I had issues (in another project) with react dom client and React 17. Hope it helps.

Chris Burrows • Jul 21 '22

Awesome, I will give it a go! Thanks for the swift reply! I've been trying to just get a component library ready and your approach seemed great! (Once i got it working XD)

Horsty • May 16 '22

@nicolaserny Salut ;) sympa ton article

As-tu remarqué que tu as une dépendance lorsque tu fais l'install dans my-site

my-lib 2.0.1

Je ne pense pas que le my-lib que tu importes soit le bon.
D'ailleurs dans ton app.tsx ou tu utilises MyButton il y à une erreur Typescript
Module '"my-lib"' has no exported member 'MyButton'.ts(2305)

J'ai essayé en changeant le nom de la library mais dés que j'essaye de lancer un install j'ai une 404 yarn/npm/pnpm tente de chercher la library sur npmjs =/

Nicolas Erny • May 19 '22

Salut :) Je viens de retester le code localement mais je ne vois pas de problèmes. Du coup je suis curieux. J'utilise node 17 (mais j'ai testé aussi avec node 16) + yarn 1.22.19 (il faut que la version de yarn supporte les workspaces)
Comme on utilise des workspaces, yarn va gérer la dépendance avec la lib (my-lib) via un lien symbolique.
Normalement je fais un yarn install (tu peux le faire à la racine ou dans my-site, ça fait la même chose). Après il faut build la library avec yarn build (vu que le site de test va pointer directement sur le build). et normalement dans my-site tu n'as pas de problème (yarn dev pour tester). Je ne trouve pas de version 2.0.1 (tu vois ça à quel endroit ?) Je n'ai pas d'erreur typescript (tu as bien compilé la librairy?)
Voilà en tout cas les pistes pour te débloquer.
J'utilise ce fonctionnement en monorepo sur plusieurs projets au travail.
Si tu as d'autres questions n'hésite pas.

Horsty • May 19 '22

Hum ok je vais tester de nouveau
J’ai eut l’erreur en utilisant pnpm pour le coup y’a sûrement un écart entre yarn et pnpm
Après j’ai utilisé la fonctionnalité Workspace de pnpm qui marche bien :)
C’était une approche de monorepo que je n’avais pas encore testé
Petite question d’ailleurs comment tu gères les déploiements et versioning de chaque package ? (En gros est ce que tu peux faire un truc similaire à ce que propose lerna ?)

Grosso modo le cas d’utilisation :
Si tu développe dans le packageA et que tu le déploi le packageB ne devrait pas être déployé

Merci pour ta réponse ;)

Nicolas Erny • May 19 '22 • Edited

En effet, je ne suis pas sûr que les notions de workspace soient les mêmes entre yarn et pnpm (j'utilise surtout yarn).
Je n'ai jamais utilisé lerna (donc je ne pourrai pas comparer). yarn workspace a la capacité de remplacer les wildcards par les vrais versions (lors d'un publish). donc c'est assez flexible je pense. Mais je n'ai pas encore eu besoin de creuser la question.
Actuellement j'ai tendance à mettre la même version sur tous mes packages du mono repo (lors d'une release en CI). ça me simplifie la vie. Si certains packages sont des libs utilisées par d'autres projets alors je publie dans npm. si c'est une webapp alors je package avec docker (mais c'est un autre sujet)...
Le monorepo a des avantages et des inconvénients: comme tout est dans le même repo, la CI va forcément builder tout le repository donc en terme de déploiement si tu veux déployer uniquement A et pas B c'est plus compliqué (je ne pense pas qu'on puisse faire ça automatiquement). Dans ce cas, je ferais des chaines de builds spécifiques. Par contre le monorepo est agréable pour la partie dev. Tout est question de tradeoffs.

Jonathan Wyse • Jun 6 '22

Thanks for this tutorial. It has been very helpful for me.

I'm really new to Vite and I'm really trying to give it the benefit of the doubt. I'm having an issue with a dependency (xml-parse) that uses __dirname. According to the Vite docs, this reference should be replaced, but it is ending up in my built code and causing errors in the browser (namely __dirname is not defined). I've tried multiple paths to figure this out but I seem to just be heading down one wrong path after another. Any advice for how to resolve this?

Nicolas Erny • Jun 8 '22

Hello :)
I never experienced this error.
Which OS, and node version do you use?

Robert Crocker • Jul 22 '23

I found a solution in this article bobbyhadz.com/blog/typescript-cann...

LoannPowell • Apr 25 '22

With this project structure i have to run build every time that i have a change in my library no? how can i solve that

Nicolas Erny • Apr 26 '22

True, you have to rebuild the library to see the changes in the example. Most of the time, it's not an issue because you use the storybook (with a devserver) while you do intensive developments in the library.
However, if you want to rebuild automatically the library, I suggest to check out this tool: nodemon.io/