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

Posted 2023-02-22

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

【英文标题】：Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321

【发布时间】：2020-08-29 12:19:31

【问题描述】：

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

我的包裹是“样品测试”，可在 (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;

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

【参考方案1】：

一个原因可能是您从错误的位置导入 useEffect（可能是 IDE 做到了）

错误

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

好的

import React, useEffect from 'react';

【参考方案2】：

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

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

【参考方案3】：

我有同样的错误，但在使用汇总时。我通过将 react 和 react-dom 移动到 package.json 中的 peerDependencies 解决了这个问题

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