Reputation: 423
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.
Upvotes: 14
Views: 31101
Reputation: 1
dsa
"peerDependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" },
Upvotes: 0
Reputation: 89
the reason for this error is this import { useState } from "react/cjs/react.production.min"; Please import from 'react'
Upvotes: 0
Reputation: 31
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"
},
Upvotes: 0
Reputation: 549
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",
...
}
Upvotes: 0
Reputation: 20199
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';
Upvotes: 21