Minified React error #321: error importing React component from published package

Question

I built a package that exports React components. It is published in GemFury and successfully deploys. I am using Parcel to bundle everything together in the package. This is happening with a published package, not a local one.

I’m running into a problem trying to import the component in another project and use it like this:

import {Component} from "@me/library"
import React from 'react'
import ReactDOM from 'react-dom'

....

  const container = document.querySelector(
    '#container'
  )
  const component_props = {name: 'john doe', ...}
  ReactDOM.render(
    React.createElement(Component, component_props),
    container
  )

The error it throws is

Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321

This says that you are either using a hook outside of function component (definitely not doing that) or you have multiple versions of React. I have done all of the checks that show that the versions of react being used are all the same (16.13.1).

Does anyone know what might be going wrong here and why would it throw this error when all versions of React are the same?

Bobby · Answer

Hello,

This error typically occurs when there’s an issue with React Hooks being called outside of the React component lifecycle, but as you’ve identified, it can also be triggered by having multiple copies of React loaded at the same time.

Here’s a checklist to troubleshoot and resolve the issue:

1. Ensure a Single React Version

Even if you think you have only one version of React, it’s good to double-check. Sometimes, a dependency might end up installing its own version.

You can use npm ls react or yarn list react to see which versions of React are installed in your project. If there are multiple, you may need to align the versions or deduplicate your node modules.

2. Proper Peer Dependencies

Ensure that your package has React set as a peerDependency and not a dependency. This tells consumers of your package to use their installed version of React rather than installing a new one.

In your package.json, it should look something like this:

"peerDependencies": {
  "react": "^16.13.1"
}

3. Bundling

Since you are using Parcel to bundle your package, make sure that you exclude React from the bundle. You can configure Parcel (or any bundler you’re using) not to include React and ReactDOM in the final bundle, as they should be provided by the consumer’s application.

4. Importing React

Ensure that the consumer of your package does not import the component with an incorrect method that might lead to bundling another instance of React.

5. Transpiling

Check how you transpile your package. If you’re using Babel, ensure that your .babelrc or babel.config.js is set up correctly to not include its own version of helpers that might conflict.

6. Symlinking

If you are testing your package locally using npm link or yarn link, be aware that this can sometimes cause React to be duplicated since links can cause your package to reference a different instance of React.

To resolve this, you can use npm link’s ability to link the React of your consuming project back to your package:

cd path/to/your/consumer/project/node_modules/react
npm link
cd path/to/your/package
npm link react

7. Cleaning Up

Sometimes, node modules can get into a strange state. Don’t hesitate to delete your node_modules folder and your package-lock.json or yarn.lock file and run npm install or yarn install again to get a fresh start.

Best,

Bobby