Why are some components in my React TS component library throwing Minified React error #321 Code Answer

I am building a React component library with TypeScript and webpack and I test it with webpack serve on a blank html page. Now the weird thing is that when I use the components like that every single component works perfectly fine. However if I want to use them in another project (install the library with npm) e. g. with a create-react-app a few throw a Minified React error #321. I have no idea why this is happening. Also I cant see a pattern in the Not-working components.

If you want to give it a try yourself: https://www.npmjs.com/package/athenic-ui

Answer

I’ve just looked at your repo and I think the problem Minified React error #321 is likely from including react/react-dom into the build your library. Then having more than one React instances after consuming project getting built.

So in order to fix you would have to exclude react/react-dom as external deps where should be included at parent project level which consumes your library.

// webpack.config.js
exports.module = [
  // your dev one
  // { ... },
  // your prod one
  {
    // ...
    externals: {
      react: "react",
      'react-dom': "react-dom"
    },
  }
]

PS: After having done above step, you might recognize your main bundle file would significantly be reduced in size as well 🙂