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.

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';