Docker构建React staging环境失败：Babel版本冲突致sitemap脚本报错求助

构建Staging环境Docker镜像时，需要先执行sitemap脚本再完成项目构建，但Docker构建失败。本地执行npm run build:staging正常，移除sitemap前置命令后Docker构建可成功，必须保留该前置步骤。

相关配置 #

package.json #

"scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "build:staging": "env-cmd -f ./.env.staging npm run sitemap && react-scripts build",
        "build:production": "env-cmd -f ./.env.production react-scripts build",
        "sitemap": "babel-node ./src/utils/SitemapBuilder.js"
    },

.babelrc #

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Dockerfile #

FROM node:14.18.2-alpine AS builder

WORKDIR /

ENV NODE_OPTIONS=--max_old_space_size=4096

ENV NODE_ENV=staging

ENV REACT_APP_ENV=staging

COPY . .

ADD deploy/stage/app.env .env

RUN yarn install --staging && yarn build:staging

FROM nginx:stable-alpine

ADD deploy/stage/nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=builder /build /usr/share/nginx/html 

构建报错信息 #

#10 332.5 > babel-node ./src/utils/SitemapBuilder.js
#10 332.5
#10 335.3 /node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
#10 335.3         throw e;
#10 335.3         ^
#10 335.3
#10 335.3 Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. (While processing preset: "/node_modules/@babel/preset-env/lib/index.js")
#10 335.3     at throwVersionError (/node_modules/@babel/helper-plugin-utils/src/index.ts:128:11)
#10 335.3     at Object.assertVersion (/node_modules/@babel/helper-plugin-utils/src/index.ts:24:5)
#10 335.3     at /node_modules/@babel/preset-env/src/index.ts:291:7
#10 335.3     at /node_modules/@babel/helper-plugin-utils/src/index.ts:64:12
#10 335.3     at /node_modules/babel-core/lib/transformation/file/options/option-manager.js:317:46
#10 335.3     at Array.map (<anonymous>)
#10 335.3     at OptionManager.resolvePresets (/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
#10 335.3     at OptionManager.mergePresets (/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
#10 335.3     at OptionManager.mergeOptions (/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
#10 335.3     at OptionManager.init (/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
#10 335.3     at compile (/node_modules/babel-register/lib/node.js:103:45)
#10 335.3     at loader (/node_modules/babel-register/lib/node.js:144:14)
#10 335.3     at Object.require.extensions.<computed> [as .js] (/node_modules/babel-register/lib/node.js:154:7)
#10 335.3     at Module.load (internal/modules/cjs/loader.js:950:32)
#10 335.3     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
#10 335.3     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
#10 335.3     at Object.<anonymous> (/node_modules/babel-cli/lib/_babel-node.js:154:22)
#10 335.3     at Module._compile (internal/modules/cjs/loader.js:1085:14)
#10 335.3     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
#10 335.3     at Module.load (internal/modules/cjs/loader.js:950:32)
#10 335.3     at Function.Module._load (internal/modules/cjs/loader.js:790:12)
#10 335.3     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
#10 335.3     at internal/main/run_main_module.js:17:47 {
#10 335.3   code: 'BABEL_VERSION_UNSUPPORTED',
#10 335.3   version: '6.26.3',
#10 335.3   range: '^7.0.0-0'
#10 335.3 }
#10 335.4 npm ERR! code ELIFECYCLE
#10 335.4 npm ERR! errno 1
#10 335.4 npm ERR! app@0.2.4 sitemap: `babel-node ./src/utils/SitemapBuilder.js`
#10 335.4 npm ERR! Exit status 1
#10 335.4 npm ERR!
#10 335.4 npm ERR! Failed at the app@0.2.4 sitemap script.
#10 335.4 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
#10 335.4
#10 335.4 npm ERR! A complete log of this run can be found in:
#10 335.4 npm ERR!     /root/.npm/_logs/2022-12-28T20_08_43_024Z-debug.log
#10 335.5 error Command failed with exit code 1.
#10 335.5 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

解决方案 #

方案1：统一Babel版本，使用@babel/node替代旧版babel-node #

• 卸载旧版Babel依赖：

  yarn remove babel-cli babel-core
  

• 安装Babel 7.x相关依赖：

  yarn add --dev @babel/core @babel/node @babel/cli @babel/preset-env @babel/preset-react
  

• 修改package.json中的sitemap脚本：

  "sitemap": "@babel/node ./src/utils/SitemapBuilder.js"
  

方案2：修正Dockerfile中的依赖安装命令 #

Dockerfile中yarn install --staging参数错误，Babel相关包属于开发依赖，需要安装完整依赖集，修改为：

RUN yarn install --production=false && yarn build:staging

如果使用Yarn 2+，则改为：

RUN yarn install --dev && yarn build:staging

方案3：预编译Sitemap脚本，避免容器内使用babel-node #

1. 在package.json中添加编译脚本：

   "build:sitemap": "babel src/utils/SitemapBuilder.js --out-file dist/SitemapBuilder.js"
   

2. 修改build:staging脚本，直接执行编译后的文件：

   "build:staging": "env-cmd -f ./.env.staging node dist/SitemapBuilder.js && react-scripts build"
   

3. 在Dockerfile中补充编译步骤：

   RUN yarn install --production=false && yarn build:sitemap && yarn build:staging
   

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