DEV Community

Build and publish a Component Library - React, TypeScript, Storybook

abhijitdotsharma on February 26, 2023

Introduction At the end of this article, you will create your own custom React Component Library, and publish it to npm which will let o...

Read full post

Gabriel Linassi • Feb 26 '23

In my company we do have a set of components we share amongst multiple projects and we use TurboRepo monorepo for that. We thought about creating another repo but mono ended up being a much better option.

Hidayt Rahman • Feb 26 '23

Nice article, I am getting issue with the command npm run rollup-build-lib throws below error

[!] SyntaxError: Unexpected identifier
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:139:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:236:14)
    at async link (node:internal/modules/esm/module_job:67:21)

Do you have any idea

abhijitdotsharma • Feb 27 '23

github.com/rollup/rollup/issues/3594

One answer might be to try and check if your node is updated or not.

Hidayt Rahman • Feb 27 '23 • Edited

I have removed this line

import packageJson from "./package.json" assert { type: "json" };

and providedcjs and esm path directly in the file field, just to make it work.

Just curious to know is this good pratice?

Hidayt Rahman • Feb 27 '23

Its different issue, may i know your node version ?

abhijitdotsharma • Mar 4 '23

Hi Hidayat while I did not fully understand how you got that error, I am grateful you brought it up as I tried to test my article today by creating a new Component Library and I noticed that I had made 2-3 typo's which when I removed, resulted in correct compilation of the library.

rollup-lib -c should have been rollup -c, corrected now

My current node version is 18.14.2 LTS and I think if you try it once again it will work. Thank you for your comment once again and hit me back if that doesn't work.

Hidayt Rahman • Mar 4 '23

No worry, issue has been resolved same day

Victoria Kapitonenko • Nov 7 '23

Thank you very much for this tutorial! I tried to create cra-template with your configurations, maybe it will be convenient for someone github.com/rebase-agency/cra-templ...