2

我在 javascript 文件 (helpers.js) 中有一些函数，这些函数被导入到反应文件 (caller.jsx) 中。

helpers.js：

async function one() {
  // ...
}

function two() {
  // ...
}

module.exports = { one, two }

来电者.jsx：

const { one, two } = require("../utils/helpers")

当我运行本地 React 服务器 ( npm run start) 时，一切正常。我可以使用该应用程序并且它可以工作。

当我运行生产构建 ( npm run build) 并从该构建中提供 javascript 时，它不起作用，并且控制台中出现错误消息：

main.d780c23e.chunk.js:1 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.<anonymous> (main.d780c23e.chunk.js:1)
    at Module.228 (main.d780c23e.chunk.js:1)
    at i ((index):3)
    at Module.375 (main.d780c23e.chunk.js:1)
    at i ((index):3)
    at t ((index):3)
    at Array.r [as push] ((index):3)
    at main.d780c23e.chunk.js:1

浏览器中的编译代码在等号 (=) 处显示了 helpers.js 导出处的问题：

            b.exports = {
                one: function() { ... },
                two: function() { ... }
                }
            }

我也尝试在 caller.jsx 中导入符号：

import { one, two } from "../utils/helpers"

在这种情况下，生产版本会抱怨符号未导出。

./src/hooks/caller.jsx
Attempted import error: 'two' is not exported from '../utils/helpers'.

如果我删除两个，那么它会抱怨一个。

似乎 CommonJS 样式的代码（带有 module.exports）在 ESModule 样式的代码（带有 import）中不起作用。

但是，我还有一些其他文件（称它们为 caller2.jsx 和 helper2.js），它可以供 helper2.js 使用module.export，而 caller2.jsx 可以使用 import 语句。

我对如何分辨发生了什么感到困惑。

它被出口了，该死的！为什么只有生产编译器说不是？

版本：节点 v16.10.0、npm 7.24.0、react 17.0.2、react-scripts 4.0.3。

编辑：一些构建信息：我们使用npm. 以下是 package.json 中的脚本：

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
}

例如，这里是完整的输出build：

$ npm run build

> myapp@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  421.79 KB        build/static/js/2.9462f3d3.chunk.js
  23.57 KB         build/static/css/2.0a9ec390.chunk.css
  20.85 KB (+1 B)  build/static/js/main.2d21dfa5.chunk.js
  2.49 KB          build/static/css/main.8d569477.chunk.css
  1.73 KB          build/static/js/3.2618e91d.chunk.js
  1.17 KB          build/static/js/runtime-main.2616b467.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

编辑 2：我们使用的是安全帽，所以我们不能使用 ESModule 导出。例如，请参阅此 github 问题或此 stackoverflow 问题。

4

0 回答 0