因babel/replEval问题无法将Webpack/Django/React应用部署至Heroku

将 Webpack/Django/React 应用部署至 Heroku，按照 Heroku 文档使用 heroku.yml 构建 Docker 镜像，执行 git push 到 Heroku 时在第 5/7 步报错，疑似兼容性问题，未找到同类解决方案。

执行命令 #

git add heroku.yml

git commit -m "Add Heroku.yml"

heroku stack:set container

git push heroku [branch-name]:main

报错信息 #

remote:  ---> Running in 0b74133d0113
remote: 
remote: > rsm_app@0.1.0 babel /
remote: > babel-node --presets=@babel/preset-env,@babel/preset-react
remote:
remote: /node_modules/@babel/node/lib/_babel-node.js:222
remote:     eval: replEval,
remote:           ^
remote:
remote: ReferenceError: Cannot access 'replEval' before initialization
remote:     at replStart (/node_modules/@babel/node/lib/_babel-node.js:222:11)
remote:     at Object.<anonymous> (/node_modules/@babel/node/lib/_babel-node.js:179:5)
remote:     at Module._compile (internal/modules/cjs/loader.js:1085:14)
remote:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
remote:     at Module.load (internal/modules/cjs/loader.js:950:32)
remote:     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
remote:     at Function.executeUserEntryPoint [as runMain] (internal/modules/cjs/run_main.js:75:12)
remote:     at internal/main/run_main_module.js:17:47
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! rsm_app@0.1.0 babel: `babel-node --presets=@babel/preset-env,@babel/preset-react`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the rsm_app@0.1.0 babel script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /root/.npm/_logs/2022-11-08T06_05_13_384Z-debug.log
remote: The command '/bin/sh -c npm run babel' returned a non-zero code: 1

解决方案 #

这个报错是因为 babel-node 在未指定入口文件时默认进入 REPL 模式，但当前版本的 @babel/node 与 Node.js 版本存在变量提升兼容性问题——replEval 变量在初始化前被引用。

• 修改 npm 脚本：确保 babel 脚本指定编译入口文件，比如在 package.json 中调整：

  "scripts": {
    "babel": "babel-node --presets=@babel/preset-env,@babel/preset-react src/index.js"
  }
  

  替换 src/index.js 为你的实际 React 入口文件路径。

• 调整 Node.js 或 Babel 版本：如果需要使用 REPL 模式，可降级 Node.js 到 14.x 版本，或者升级 @babel/node 到最新稳定版，解决版本兼容问题。

• 改用 Babel CLI 编译：如果只是编译代码而非运行 REPL，替换 babel-node 为 babel 命令，直接编译文件：

  babel src --out-dir dist --presets=@babel/preset-env,@babel/preset-react
  

  避免进入 REPL 模式触发报错。

内容的提问来源于stack exchange，提问作者Jabba the Hutt