错误：无法读取未定义的属性“PureComponent”

问题描述

我正在创建一个外部 npm 包。我的包包已成功创建，但是当我将 bundle.js 放在控制台上时，它给出了这个错误

错误：无法读取未定义的属性“PureComponent”

这是我的 webpack 配置

const config = {
    // Todo: Add common Configuration
    mode: "production",module: {
        rules: [
            {
                test: /\.js$/,exclude: /node_modules/,loader: "babel-loader"
            }
        ]
    },};

const fooConfig = Object.assign({},config,{
    name: "header_react_next",entry: "./src/index.js",output: {
        path: path.resolve("build"),libraryTarget: "umd",library: "header",filename: `index.js`,},externals: {
        'react': 'react','react-dom': 'react-dom',plugins: [

    ]
});

module.exports = [
    fooConfig
];

它创建了包，但是当我将该包文件放在控制台上时，它给了我上述错误

here is my code with bundle.

这些是我的开发依赖

 "devDependencies": {
    "@babel/core": "^7.13.1","@babel/preset-env": "^7.13.5","@babel/preset-react": "^7.12.13","babel-loader": "^8.2.2","react": "^17.0.1","webpack": "^5.24.1","webpack-cli": "^4.5.0"
  },"dependencies": {
    "axios": "^0.21.1","react-input": "^3.2.3"
  }

解决方法

callerFQCN 从 logger.debug(message) 包导入。

但在您的 Webpack 配置中，您已将其声明为外部。

PureComponent

此声明 means Webpack 不需要将 'react' 和 'react-dom' 包（来自您的 node_modules）捆绑到 bundle.js 中，并希望这些库预先加载到您的 HTML 中。

请更新 Webpack 配置以包含 react 和 externals: { 'react': 'react','react-dom': 'react-dom',},（这些变量名称在 react 和 react-dom 中默认使用）

React

并在 HTML 中包含 react 和 react-dom（在 bundle.js 之前）

ReactDOM