时间戳

首页 > 解决方案 > 缩小反应错误 #321；访问 https://reactjs.org/docs/error-decoder.html?invariant=321

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

问题描述

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

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

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

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

缩小反应错误 #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），用于复制我在项目中使用时遇到的错误。请帮我解决它。

标签： reactjsreact-nativenpmnpm-installnpm-publish

解决方案

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

错误的

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

好的

import React, {useEffect} from 'react';

推荐阅读