Jenkins构建React项目缺失@babel插件的问题求助

安全阿岳

2026-6-27

解决React项目Jenkins构建时找不到@babel/plugin-proposal-private-property-in-object的问题

本地执行npm run build无错误或警告，但推送至Jenkins服务器构建时出现错误：Cannot find module '@babel/plugin-proposal-private-property-in-object'，错误日志末尾带有(0:undefined)。已尝试删除node_modules、package-lock.json后重装依赖，且已在devDependencies中安装该插件及@babel/preset-env，但问题仍未解决。

错误日志

13:29:56  Syntax error: [BABEL] /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/src/index.js: Cannot find module '@babel/plugin-proposal-private-property-in-object' (0:undefined)
13:29:56  Require stack:
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/babel-preset-react-app/create.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/babel-preset-react-app/index.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/@babel/core/lib/config/files/module-types.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/@babel/core/lib/config/files/configuration.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/@babel/core/lib/config/files/index.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/@babel/core/lib/index.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/@rollup/plugin-babel/dist/index.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/workbox-build/build/lib/bundle.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/workbox-webpack-plugin/build/generate-sw.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/workbox-webpack-plugin/build/index.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/react-scripts/config/webpack.config.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/@craco/craco/dist/lib/cra.js
13:29:56  - /var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/@craco/craco/dist/scripts/build.js (While processing: "/var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app/node_modules/babel-preset-react-app/prod.js")

package.json 内容

{
  "name": "govt-finance-ui",
  "version": "0.2.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^7.1.0",
    "@reduxjs/toolkit": "^2.1.0",
    "autoprefixer": "^10.4.17",
    "axios": "^1.6.5",
    "bootstrap": "^5.3.2",
    "buffer": "^6.0.3",
    "credit-card-type": "^10.0.0",
    "crypto-browserify": "^3.12.0",
    "dotenv": "^16.3.1",
    "eslint": "^8.56.0",
    "jquery": "^3.7.1",
    "jsencrypt": "^3.3.2",
    "moment": "^2.30.1",
    "postcss": "^8.4.33",
    "react": "^18.2.0",
    "react-confirm-alert": "^3.0.6",
    "react-cookies": "^0.1.1",
    "react-csv": "^2.2.2",
    "react-csv-downloader": "^3.1.0",
    "react-datepicker": "^4.25.0",
    "react-dom": "^18.2.0",
    "react-dropdown-select": "^4.11.1",
    "react-form-validator-core": "^1.1.2",
    "react-payment-inputs": "^1.1.9",
    "react-redux": "^9.1.0",
    "react-responsive-modal": "^6.4.2",
    "react-router": "^6.21.2",
    "react-router-dom": "^6.21.2",
    "react-router-redux": "^4.0.8",
    "react-scripts": "^5.0.1",
    "react-select": "^5.8.0",
    "redux": "^5.0.1",
    "stream-browserify": "^3.0.0",
    "styled-components": "^6.1.8",
    "sweetalert2": "^11.10.3",
    "tailwindcss": "^3.4.1",
    "use-csv-downloader": "0.0.0"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.3"
  },
  "scripts": {
    "start": "PORT=8000 craco start",
    "build": "craco build",
    "test": "craco --openssl-legacy-provider test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "eqeqeq": "off",
      "no-mixed-operators": "off",
      "jsx-a11y/anchor-is-valid": "off"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-env": "^7.24.1"
  }
}

craco.config.js 内容

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss')('./tailwind.config.js'),
        require('postcss-nested'),
        require('autoprefixer'),
      ],
    }
  },

  webpack: {
    configure: {
      resolve: {
        fallback: {
          // path: require.resolve("path-browserify"),
          crypto: require.resolve("./src/crypto-browserify"),
          stream: require.resolve("stream-browserify"),
          buffer: require.resolve("buffer/"),
          vm: require.resolve("vm-browserify")
        },
      },
    },
  }
}

Jenkins 流水线构建阶段代码

stage('build') {
    steps {
        timestamps {
            timeout(time: 4000, unit: 'SECONDS') {
                dir('node-app') {
                    
                    withDockerRegistry(credentialsId: '******', url: 'https://**********'){ 

                        sh """#!/bin/bash
                        set -e
                        source $NVM_DIR/nvm.sh
                        
                        nvm list
                        nvm install 20.7.0
                        nvm use 20.7.0
                        node --version

                        npm install

                        npm run build
                        docker build --build-arg REACT_APP_API_HOST --build-arg REACT_APP_API_KEY --build-arg REACT_APP_ENC_KEY --build-arg REACT_APP_SANDDOLLAR_PYMT -t $APP_REGISTRY:${env.BUILD_TAG}  -t $APP_REGISTRY:latest .
                        docker push  $APP_REGISTRY:${env.BUILD_TAG}
                        docker push  $APP_REGISTRY:latest
                        """
                    }

                }
            }
        }
    }
}

解决方案

1. 匹配插件与babel-preset-react-app的依赖版本

错误日志显示babel-preset-react-app在调用该插件，可能本地与Jenkins环境中babel-preset-react-app的版本不同，导致依赖的插件版本不兼容。

查看node_modules/babel-preset-react-app/package.json中对@babel/plugin-proposal-private-property-in-object的依赖版本

将项目中该插件的版本修改为对应版本，例如：

npm install @babel/plugin-proposal-private-property-in-object@^7.21.0 --save-dev

提交更新后的package.json和package-lock.json到代码仓库

2. 改用`npm ci`替代`npm install`并清理缓存

npm ci会严格按照package-lock.json安装依赖，避免版本不一致问题，同时在安装前清理旧依赖：
修改Jenkins构建脚本中的安装步骤：

rm -rf node_modules package-lock.json
npm ci

3. 统一本地与Jenkins的Node版本

确保本地开发环境使用的Node版本与Jenkins构建时的20.7.0一致，避免因Node版本差异导致依赖安装异常。

4. 显式声明Babel插件

在项目根目录创建babel.config.js，显式添加该插件：

module.exports = {
  presets: ['react-app'],
  plugins: ['@babel/plugin-proposal-private-property-in-object']
};

5. 检查Jenkins工作空间权限

确认Jenkins用户对工作目录/var/jenkins_home/workspace/govt-finance/qa/build-and-deploy-web/node-app有读写权限，避免依赖安装时因权限不足导致部分模块缺失。

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

Jenkins构建React项目缺失@babel插件的问题求助

错误日志 #

package.json 内容 #

craco.config.js 内容 #

Jenkins 流水线构建阶段代码 #

解决方案 #

1. 匹配插件与babel-preset-react-app的依赖版本 #

2. 改用npm ci替代npm install并清理缓存 #

3. 统一本地与Jenkins的Node版本 #

4. 显式声明Babel插件 #

5. 检查Jenkins工作空间权限 #