Rails 5 Docker环境预编译报错：无法找到@babel/preset-react

我在Docker中运行Ruby on Rails 5.2.8.1应用，执行预编译命令：

bundle exec rake assets:precompile --trace RAILS_ENV=production

出现以下错误：

Compiling...
Compilation failed:
node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/preset-react' imported from /home/app/webapp/my-app/babel-virtual-resolve-base.js
    at new NodeError (/home/app/webapp/my-app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2240:5)
    at packageResolve (/home/app/webapp/my-app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2776:9)
    at moduleResolve (/home/app/webapp/my-app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2804:18)
    at defaultResolve (/home/app/webapp/my-app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2835:13)
    at /home/app/webapp/my-app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2855:14
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/app/webapp/my-app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:45:103)
    at _next (/home/app/webapp/my-app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:46:194)
    at /home/app/webapp/my-app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:46:364
    at new Promise (<anonymous>)
    at /home/app/webapp/my-app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:46:97
    at resolve (/home/app/webapp/my-app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:2847:19)
    at /home/app/webapp/my-app/node_modules/@babel/core/lib/config/files/import-meta-resolve.js:27:38
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/app/webapp/my-app/node_modules/@babel/core/lib/config/files/import-meta-resolve.js:15:103)
    at _next (/home/app/webapp/my-app/node_modules/@babel/core/lib/config/files/import-meta-resolve.js:16:194) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v18.13.0

我已尝试以下命令，但预编译仍报错：

npm install --save-dev @babel/preset-react

yarn add @babel/preset-react --dev

环境信息 #

• Ubuntu版本：Ubuntu 20.04.5 LTS
• Ruby on Rails版本：Rails 5.2.8.1
• Webpacker gem：webpacker (5.4.3)
• yarn版本：1.22.19
• node版本：v18.13.0
• npm版本：9.4.0

解决方案 #

1. 确保Docker镜像内完成依赖安装 #

如果之前的yarn add是在本地执行而非Docker构建过程中，镜像内的node_modules不会包含新增依赖。需要在Dockerfile中添加依赖安装步骤，确保在项目根目录下执行：

# 安装Ruby依赖后，切换到项目目录安装Node依赖
WORKDIR /home/app/webapp/my-app
RUN yarn install --check-files

2. 清理缓存后重新安装依赖 #

容器内旧的依赖缓存可能导致问题，执行以下命令清理后重装：

rm -rf node_modules yarn.lock package-lock.json
yarn install --dev

3. 检查Babel配置文件 #

确认项目根目录下的.babelrc或babel.config.js中，@babel/preset-react的引用格式正确：

// .babelrc 示例配置
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

4. 适配Node.js 18的ES模块兼容问题 #

Node.js 18对ES模块的处理逻辑有变化，可在Babel配置中添加sourceType参数解决识别问题：

// babel.config.js 示例
module.exports = {
  sourceType: "unambiguous",
  presets: ["@babel/preset-env", "@babel/preset-react"]
};

或者尝试将Node.js版本降级到16.x，与Webpacker 5.4.3的兼容性更稳定。

5. 验证Webpacker配置 #

检查config/webpacker.yml中的babel相关配置项，确保Webpacker能正确定位Babel预设文件。

内容的提问来源于stack exchange，提问作者tungsten_carbide