Question

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

Posted August 12, 2021 87 views
JavaScriptReact

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?

Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!