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

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Why are some components in my React TS component library throwing Minified React error #321 without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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 🙂

We are here to answer your question about Why are some components in my React TS component library throwing Minified React error #321 - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji