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

Question

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

Most likely you have multiple copies of react lib in the other project. See this guide: reactjs.org/warnings/invalid-hook-call-warning.html — hackape
– hackape, Commented Mar 15, 2021 at 17:23

tmhao2005 · Accepted Answer · 2021-03-16 08:47:29Z

2

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 :)

answered Mar 16, 2021 at 8:47

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related