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

Question

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

我的包是“sample-testing”，可在（https://www.npmjs.com/package/sample-testing）获得。

使用“webpack”和“babel loader”来翻译jsx文件。

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

缩小 React 错误#321；请访问 https://reactjs.org/docs/error-decoder.html?invariant=321 了解完整消息，或使用非缩小开发环境了解完整错误和其他有用的警告。

仅当我在包内使用材质 ui 组件而不是常规 html 组件时才会出现此错误。

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

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

Answer 1

一个原因可能是您从错误的位置导入

useEffect

（可能是 IDE 执行的）

错了

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

好的

import React, {useEffect} from 'react';

Answer 2

当运行时应用不兼容的反应版本时，出现相同的错误。必须更改主 package.json 文件中的 React 和 React-dom 版本。

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

Answer 3

我有同样的错误，但是在使用汇总时。我通过将 package.json 中的

react

和

react-dom

移动到

peerDependencies

解决了这个问题

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

Answer 4

出现此错误的原因是 import { useState } from "react/cjs/react.Production.min"; 请从“react”导入

Answer 5

dsa

“peerDependency”：{ “反应”：“^17.0.2”， “反应-dom”：“^17.0.2” },