缩小反应错误#321；访问https://reactjs.org/docs/error-decoder.html?invariant=321

Question

我正在尝试创建一些带有少量自定义更改的反应组件作为包并发布到npm中，以便其他项目可以通过导入包来使用它们。

我的软件包是“样本测试”，可在(https://www.npmjs.com/package/sample-testing).

使用“webpack”和“babel loader”来处理jsx文件。

当我试图使用此包中的组件时，出现以下错误。

缩小的反应错误#321;访问 https://reactjs.org/docs/error-decoder.html?invariant=321 以获取完整消息，或使用未缩小的开发环境获取完整错误和其他有用的警告。

这个错误是来只有当我使用材料用户界面组件内包，而不是常规的html组件。

.巴别尔克

  {
 "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;

这是代码框链接（https://codesandbox.io/s/xenodochial-mcclintock-xtkh6?file=/src/index.js），用于复制我在项目中使用时在项目中遇到的错误。请帮我解决它。

Answer 1

我也有同样的错误，但是在使用rollup的时候。我通过将package.json中的< code>react和< code>react-dom移到< code>peerDependencies中解决了这个问题

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

Answer 2

当运行时应用了不兼容的react版本时，出现相同错误。必须更改主包中的react和react dom版本。json文件。

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

Answer 3

一个原因可能是您从错误的位置导入了＜code＞useffect

错

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

好的

import React, {useEffect} from 'react';