React app导入webpack打包的react app失败

Question

我有一个 React 应用程序，我向其中导入了另一个名为 react-lex-plus 的 React 项目。我管理这两个项目。

当我构建 react-lex-plus 时，webpack 能够捆绑我的应用程序。但是，当我将它导入我的主应用程序时，它会抛出一个错误，提示“require is undefined”。

有谁知道为什么会这样？为什么 require 没有定义？

我做了以下事情：

确保 react-lex-plus' webpack.config.js 具有“外部”属性其值为“commonjs react”
从 react-lex-plus 中删除 react 并 link 将其添加到我的主项目中的 react 库中。
Unlink 从主项目反应并在 react-lex-plus 中安装反应。

以下是浏览器的错误信息。

ReferenceError: require is not defined
eval
./external_%22react%22?:1:18
react
/Users/xxxxxxxx/dev/react-lex-plus/build/index.js:3360
  3357 | /*! no static exports found */
  3358 | /***/ (function(module, exports) {
  3359 | 
> 3360 | eval("module.exports = require(\"react\");\n\n//# sourceURL=webpack:///external_%22react%22?");
  3361 | 
  3362 | /***/ })
  3363 | 
View compiled
__webpack_require__
/Users/xxxxxxxx/dev/react-lex-plus/build/index.js:21
  18 | /******/         };
  19 | /******/
  20 | /******/         // Execute the module function
> 21 | /******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22 | /******/
  23 | /******/         // Flag the module as loaded
  24 | /******/         module.l = true;

Answer 1

我遇到这个问题的原因是因为在 webpack.config.js 中，我将环境设置为“开发”。

当与外部语句（见下文）结合使用父项目而不是尝试指向 react-lex-plus 中的 React 实例时，它试图在浏览器中导入 React 使用需要功能。

浏览器没有require功能。它是在 NodeJS 中实现的，这就是我收到该错误的原因。

解决方案是将 webpack 配置中的“环境”属性改回“生产”，代码将使用 NodeJS 编译。

作为补充说明，我仍然需要在 react-lex-plus 目录中的运行 npm run build 之前使用 npm link ../my-project/node_modules/react 以便构建成功，因为 react-lex-plus 使用 React 库。

外部声明

externals: {
    react: "commonjs react"
}

React app导入webpack打包的react app失败

React app fails to import react app packaged with webpack

javascript

external

reactjs

webpack