Discussion on: How to Create and Publish a React Component Library

[Nashe Omirro]

It's been almost a year and a half now after this post was written so there are a couple of errors that the article doesn't mention, I listed some of the ones I've encountered and the solutions:

• rollup -c Failed to load Config... this is because rollup's config cannot support both import statements (esm) and require (cjs) simultaneously. You either have to use one or the other for every import inside your config file. If you want to use esm, first you need to rename your config file to rollup.config.mjs to tell rollup that it's a module then theres something extra you need to do for importing jsons:

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

• the @rollup/plugin-typescript package now needs tslib as a peer dependency, just download tslib as dev dependency and you should be good to go.
• for optimization with terser, rollup-plugin-terser seems to be unmaintained and won't work in some of the latest versions of rollup, since this was a pretty heavily used package rollup came up with an official plugin, use @rollup/plugin-terser instead.
• jest no longer has jsdom by default, to use the test environment, download jest-environment-jsdom as a dev dependency separately.
• storybook with react and react-dom peer dependencies we're already mentioned but I wanted to mention my fix for it, so first is to download both react and react-dom as a dev dependency, then duplicate react to be a peer-dependency (this is surprisingly what other libraries do):

{
  "devDependencies": {
    "react": <version>,
    "react-dom": <version>
    // ...
  },
  "peerDependencies": {
    "react": <version>
    // ...
  }
}

• don't place react-dom as a peer dependency because we solely need that just for storybook and our library doesn't use it anywhere. and just in case we accidentally include it in our bundle we need to mark the library as external on our rollup config file, react is already excluded because of the peerDepsExternal plugin.

export default [
  {
    input: "src/index.ts",
    external: ['react-dom'],
    // ...
  }
]

That's all of the problems I had to deal with but I did skip some steps (adding SCSS and CSS) so there's probably some stuff I missed.

[John Grant]

For me, I had to add this:
external: [...Object.keys(packageJson.peerDependencies || {})],

Because I had more dependencies than only react & react-dom. I had several:

  "peerDependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/material": "^5.11.12",
    "@types/react": "^18.0.28",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

[Aman 🚀]

When running rollup -c if anyone is getting SyntaxError: Unexpected Identifier error than just upgarde your nodejs version to v18 LTS, I was on 16.3 so the importing json using the assert keyword was causing this. Thanks to @nasheomirro for providing a link to a blog where it states that nodejs 17.5+ required.

[Rodrigo García]

version 16.19.0 works just fine... just in case anyone needs to work with 16 version

[Camilo Rincon]

I updated to v18 LTS however, if you are using nvm and you are still receiving an error such as SyntaxError: Unexpected token '.' then you will want to update your nvm to the latest, delete the v18 and reinstall. Hope this helps someone

[mperudirectio]

following these steps partially solved my issues. Unfortunately, however, after changing the rollup configuration file, when I launch the script this error occurs:

[!] RollupError: Could not resolve "./components" from "dist/esm/types/index.d.ts".

but if i look in the dist bundled folder actually everything seems ok with imports

SOLVED
what I had to do was make sure that the rollup.config.mjs file was entirely written IN ES and then add the brackets to the default dts object which previously with the "dirty" file gave me an error if I added them, but instead now adding them (plugins: [dts()]) with the well written file the build completes correctly.

[Zahid R. Showrav]

@mperudirectio, I don't understand you solution partially, I am getting same RolleupError as you got. my rollup.config.mjs file is written entirely in ES, but I am not getting the later part of your solution. Can you please make it clear, where to add the brackets?

[Adams Adebayo]

Oh good!

[Alex Eagleson]

Much appreciated for this, and the time and effort that went into it. I've updated the article and placed links to this comment where appropriate for the things that have changed in the past year.

Thanks again, and cheers!

[Alek2499]

I'm not sure if you would look at this comment but i really like this tutorial but the only problem is that the project i'm doing right now doesn't require typescript and i'm not sure how to do this replacing ts with js, this is the only tutorial which looks workable please guide me and help me solve it. Thank you!

[Liam Hoang Nguyen]

Many thanks for your effort to update this article

[Zahid R. Showrav]

@nasheomirro In my case, following your steps I am still getting this error:
RollupError: Could not resolve entry module "dist/esm/types/index.d.ts".

SOLVED
The error was solved by simply adding a property "rootDir": "src" into the tsconfig.json file within the compilerOptions object.
Hope this helps someone who is having this problem.

[Rafael Jahn]

thank you!

[Danyal Aslam]

The solution stated above is awesome and resolved all the issues, although if someone if trying to implement it after November 2023, they may encounter the following error

template-react-component-library@0... rollup
rollup -c

[!] Error: Cannot find package 'rollup-plugin-postcss' imported from /Users/danyalaslam/Desktop/ReactProjects/template-react-component-library/rollup.config.mjs

Solution : need to install updated rollup-plugin-postcss library

and import it as a default in rollup.config.mjs
import terser from "@rollup/plugin-terser";

Then hit the command
npm run rollup