Jenkins Error noted on the console.log terminal
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 File
{
"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")
},
},
},
}
}
Fails when running "npm run build" command after it's pushed to Jenkins server but works locally (Gives no errors or warnings locally when built)
Jenkins pipeline (Build section)
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
"""
}
}
}
}
}
}
Tried removing the node_modules folder, package-lock.json file, reinstalling all packages after removal...
As seen in the package.json file I dev save installed the "@babel/plugin-proposal-private-property-in-object", and "@babel/preset-env" packages.
I had an issue like this with a previous project but adding those solved the problem.
The only difference I notice with the error is that on the end of the line there is " (0:undefined)" on the first line of the error mentioned in the Jenkins console.log
Got it the build successfully by removing "@babel/plugin-proposal-private-property-in-object": "^7.21.11", and "@babel/preset-env": "^7.24.1" from the devDependencies and placing them into main Dependencies list
Added below code into craco.config.js
babel: {
presets: ["@babel/preset-env"],
plugins: [
["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
["@babel/plugin-transform-class-properties", { "loose": true }],
["@babel/plugin-transform-private-methods", { "loose": true }],
]
},
And then added the following into Jenkins Pipeline
rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm cache verify
npm install
npm run build
Now I am getting a process is undefined error from _stream_writable.js:57
But at least the program runs/builds successfully now
Update: fixed process error by following this guide: