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

Question

I am trying to create few react components with few custom changes as package and publish into npm so that other projects can use them by importing package.

My package is "sample-testing" available at (https://www.npmjs.com/package/sample-testing).

Using "webpack" and "babel loader" to traslate the jsx files.

Getting below error when I tried to use that component from this package.

Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

This error is coming only when I used material ui components inside package but not with regular html components.

.babelrc

  {
 "presets": ["react", "env", "stage-0"]
  }

wepack.config.js

var path = require("path");

module.exports = {
  mode: "production",
  entry: {
    TButton: "./src/TButton.jsx"
  },
  output: {
    path: path.resolve("lib"),
    filename: "[name].js",
    libraryTarget: "commonjs2"
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: "babel-loader"
      }
    ]
  }
};

TButton.jsx

import React from "react";

import TextField from "@material-ui/core/TextField";

class TButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <TextField id="standard-basic" label="Standard" />;
  }
}

export default TButton;

Here is the codesandbox link (https://codesandbox.io/s/xenodochial-mcclintock-xtkh6?file=/src/index.js) to replicate the error which I am getting in my project when I used in my project. Please help me to resolve it.

Unbrace

Answer 1

One reason could be you are importing useEffect from the wrong place (probably the IDE did it)

Wrong

import {useEffect} from "react/cjs/react.production.min";

OK

import React, {useEffect} from 'react';

Lexicostatistics

Answer 2

Got the same error when there is an incompatible react version applied in the runtime. Had to change react and react-dom versions in the main package.json file.

"dependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  ...
 }

Rickirickie

Answer 3

I had the same error, but when using rollup. I solved it by moving react and react-dom to peerDependencies in package.json

  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },

Curvy

Answer 4

the reason for this error is this import { useState } from "react/cjs/react.production.min"; Please import from 'react'

Vereen

Answer 5

dsa

"peerDependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" },

Ancohuma

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Gordan