I'm getting the following error when trying to build a Create React App v5.0.1 using node 16.15.0 on docker.
It was working fine using node 14.17.0, but due to a failure when I was starting the project in this version I needed to update to node 16.15.0 and now it's failing and I have no clue why, because if I run npm run build outside docker it works well :(
react-app-rewired --max-old-space-size=8192 build sh: 1: react-app-rewired: not found
Dockerfile
FROM node:16.15.0
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install --legacy-peer-deps
RUN ls -lrt
RUN npm i serve -g
EXPOSE 80
ENV NODE_ENV=production
RUN npm run build
ENTRYPOINT [ "sh","bootstrap.sh"]
My package.json
{
"name": "harvest-front",
"version": "1.7.4",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#fortawesome/fontawesome-svg-core": "^1.2.22",
"#fortawesome/free-solid-svg-icons": "^5.10.2",
"#fortawesome/react-fontawesome": "^0.1.4",
"#types/jest": "^27.4.1",
"#types/node": "^17.0.23",
"#types/react": "^17.0.43",
"#types/react-dom": "^17.0.14",
"antd": "^4.20.7",
"apexcharts": "^3.19.2",
"apisauce": "^1.1.0",
"connected-react-router": "^6.5.2",
"dotenv": "^10.0.0",
"formik": "^2.2.9",
"har-validator": "^5.1.5",
"history": "4.10.1",
"js-file-download": "^0.4.9",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"moment": "^2.22.2",
"moment-timezone": "^0.5.33",
"papaparse": "^5.2.0",
"password-validator": "^5.0.2",
"prop-types": "^15.6.2",
"query-string": "^6.8.3",
"react": "^17.0.2",
"react-apexcharts": "^1.3.7",
"react-clear-cache": "^1.4.12",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "npm:#hot-loader/react-dom#^17.0.2",
"react-error-boundary": "^3.1.4",
"react-intl": "^2.4.0",
"react-leaflet": "2.8.0",
"react-number-format": "^4.3.1",
"react-redux": "^7.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"redis": "^3.1.2",
"redux": "^4.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.0.2",
"source-map-explorer": "^2.5.2",
"typescript": "^4.6.3",
"url-search-params": "^1.1.0",
"xlsx": "^0.18.5",
"yup": "^0.32.11"
},
"resolutions": {
"moment": "2.24.0",
"antd": "4.2.4",
"immer": "9.0.6",
"property-expr": "2.0.3",
"ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"glob-parent": "6.0.1",
"styled-components": "^5"
},
"scripts": {
"prebuild": "npm install react-dom#17.0.2 --save --legacy-peer-deps",
"sonar": "node sonar-project.js",
"start": "react-app-rewired start",
"start::dev": "env-cmd -e dev react-app-rewired start",
"start::qa": "env-cmd -e qa react-app-rewired start",
"start::np": "env-cmd -e np react-app-rewired start",
"build": "react-app-rewired --max-old-space-size=8192 build",
"test": "react-app-rewired test",
"test::ci": "react-app-rewired test --coverage=false --ci --watchAll=false --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/assets/**/*.js",
"qa": "PORT=8081 react-scripts start",
"cy::op": "cypress open",
"cy::ru": "cypress run",
"lint": "eslint --max-warnings 0 --ignore-path .gitignore --fix --ext .js,.jsx,.ts,.tsx src",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\"",
"format": "yarn run prettier -- --write",
"check-format": "yarn run prettier -- --list-different",
"validate": "yarn run lint && yarn run test --watchAll --bail",
"createJob": "node ci/createJob.js",
"deleteJob": "node ci/deleteJob.js",
"checkEnvironment": "node ci/checkEnvironment.js",
"cm": "cz",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"generate:gc": "plop --plopfile ./generators/globalComponent.js"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.16.0",
"#babel/plugin-proposal-private-methods": "^7.14.5",
"#babel/plugin-proposal-private-property-in-object": "^7.15.4",
"#babel/preset-typescript": "^7.16.7",
"#commitlint/cli": "^16.0.2",
"#commitlint/config-conventional": "^16.0.0",
"#testing-library/cypress": "^8.0.1",
"#testing-library/dom": "^8.5.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.0",
"#testing-library/react-hooks": "^7.0.2",
"#testing-library/user-event": "^13.3.0",
"#types/lodash": "^4.14.182",
"#types/react-router-dom": "^5.3.3",
"#types/styled-components": "^5.1.24",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "^5.18.0",
"#typescript-eslint/parser": "^5.18.0",
"babel-eslint": "^10.1.0",
"babel-plugin-styled-components": "^2.0.6",
"commitizen": "^4.2.4",
"customize-cra": "^1.0.0",
"customize-cra-less-loader": "^2.0.0",
"cypress": "9.5.2",
"cypress-file-upload": "^5.0.8",
"cypress-mochawesome-reporter": "^2.3.0",
"cz-conventional-changelog": "^3.3.0",
"env-cmd": "^10.1.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-jest-dom": "^3.9.2",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.29.3",
"eslint-plugin-sonarjs": "^0.6.0",
"eslint-plugin-testing-library": "^4.12.2",
"husky": "^4.2.3",
"jest-axe": "^5.0.1",
"jest-styled-components": "^7.0.8",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"less-vars-to-js": "^1.3.0",
"lint-staged": "^11.1.2",
"plop": "^3.0.5",
"postcss-normalize": "^10.0.1",
"prettier": "^2.3.0",
"react-app-rewired": "^2.2.1",
"react-extras": "^3.0.0",
"react-ga": "^3.3.0",
"react-hot-loader": "^4.13.0",
"reactotron-apisauce": "^3.0.0",
"reactotron-react-js": "^3.3.2",
"reactotron-redux": "^3.1.1",
"reactotron-redux-saga": "^4.2.2",
"resolve-url-loader": "^3.1.2",
"sonarqube-scanner": "^2.8.0",
"styled-components": "^5.3.5"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"#components/(.*)": "<rootDir>/./src/components/$1",
"#util/(.*)": "<rootDir>/./src/util/$1",
"#hooks/(.*)": "<rootDir>/./src/hooks/$1",
"#constants/(.*)": "<rootDir>/./src/constants/$1",
"#containers/(.*)": "<rootDir>/./src/containers/$1",
"#routes/(.*)": "<rootDir>/./src/routes/$1",
"#appRedux/(.*)": "<rootDir>/./src/appRedux/$1"
}
}
}
I did the same update on my Dockerfile and It was solved!
I put all my variables on ENV, and instead of use RUN I used CMD to build my app.
FROM node:16.15.0
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install
RUN npm i serve -g
EXPOSE 80
ENV NODE_ENV=production REACT_APP_API_URL=https://url REACT_APP_AUDITORIA_API_URL=https://url GENERATE_SOURCEMAP=false DISABLE_ESLINT_PLUGIN=true
CMD ["npm", "run", "build"]
ENTRYPOINT ["sh","bootstrap.sh"]
Related
I am trying to run yarn build but the command fails. Can anyone help me to solve this issue? The Node version using is v14.1.0 and Yarn version is 1.22.19. The yarn start command works but not the build command.
package.json file
{
"name": "queenofraw",
"version": "0.1.0",
"private": true,
"homepage": "https://ja.materiamx.com",
"main": "",
"dependencies": {
"#babel/preset-react": "^7.18.6",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#fortawesome/fontawesome-svg-core": "^1.2.4",
"#fortawesome/free-regular-svg-icons": "^5.3.1",
"#fortawesome/free-solid-svg-icons": "^5.3.1",
"#fortawesome/react-fontawesome": "^0.1.3",
"#material-ui/core": "^3.0.1",
"#material-ui/icons": "^3.0.1",
"#mdi/svg": "^3.0.39",
"#mui/icons-material": "^5.10.3",
"#mui/material": "^5.10.3",
"#react-jvectormap/core": "^1.0.3",
"#rematch/core": "^0.6.0",
"#stripe/stripe-js": "^1.8.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"antd": "^3.10.4",
"axios": "^0.18.0",
"bootstrap": "^5.2.3",
"chart.js": "^4.1.1",
"classnames": "^2.2.6",
"country-list": "^2.1.0",
"echarts": "^4.2.0-rc.2",
"echarts-for-react": "^2.0.15-beta.0",
"err": "^2.1.12",
"events": "^2.0.0",
"formsy-react": "^1.1.4",
"image-to-base64": "^2.0.1",
"jquery": "^3.6.1",
"js-cookie": "^2.2.0",
"loadash": "^1.0.0",
"material-ui-table-edit": "^3.0.3",
"moment": "^2.22.0",
"namor": "^1.1.1",
"qs": "^6.9.4",
"query-parse": "^2.0.0",
"rc-queue-anim": "^1.6.7",
"react": "^16.4.2",
"react-bootstrap": "^2.7.0",
"react-chartjs-2": "^5.1.0",
"react-confirm": "^0.1.17",
"react-cookie": "^3.0.4",
"react-country-flag": "^1.0.1",
"react-dom": "^16.4.2",
"react-dropzone": "^7.0.1",
"react-fontawesome": "^1.6.1",
"react-google-recaptcha": "^2.1.0",
"react-icons": "^3.2.2",
"react-images-upload": "^1.2.3",
"react-inline-editing": "^1.0.10",
"react-jvectormap": "0.0.4",
"react-moment": "^0.8.3",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-scripts": "^5.0.1",
"react-scroll": "^1.7.11",
"react-table": "^6.8.6",
"recharts": "^1.2.0",
"slick-carousel": "^1.8.1",
"socket.io-client": "1.7.0",
"superagent": "^4.0.0-beta.5",
"web-vitals": "^3.0.1",
"yarn": "1.22.19"
},
"scripts": {
"start": "cross-env REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts start",
"starts": "PORT=6500 REACT_APP_SERVER=http://localhost:5080 react-scripts start",
"sass:watch": "node-sass -w src/assets/scss/style.scss -o src/assets/css",
"sass:build": "node-sass src/assets/scss/style.scss -o src/assets/css --source-map true",
"dev": "npm-run-all --parallel start sass:watch",
"start:stag": "react-scripts start",
"build": "cross-env REACT_APP_SERVER=http://192.168.2.18:5080 react-scripts build",
"deploy": "aws s3 sync build/ s3://qor-mmx-static --acl public-read",
"stag:build": "REACT_APP_SERVER=https://api-dev.materiamx.com react-scripts build",
"prod:build": "REACT_APP_SERVER=https://api-dev.materiamx.com/ react-scripts build",
"stag": "yarn run stag:build && sls client deploy --stage staging --aws-profile qor --region us-east-1",
"prod": "yarn run prod:build && sls client deploy --stage production --aws-profile qor --region us-east-1",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^7.0.3",
"flow-bin": "^0.68.0",
"node-sass": "^8.0.0",
"npm-run-all": "^4.1.5",
"react-edit-inline": "^1.0.8",
"react-test-renderer": "^16.2.0",
"serverless-finch": "^2.2.0",
"serverless-single-page-app-plugin": "^1.0.2"
},
"jest": {},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
when i tried npx serve -s build command it worked . May someone find this as a help in the future
Can you please try npm run build.
Regards
I'm getting the following error when trying to start a CRA project running with node 14.17.0 -> Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm'
Compiled with problems:X
ERROR in ./src/app.css (./node_modules/css-loader/dist/cjs.js??ruleSet1.rules[0].oneOf[5].use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules[0].oneOf[5].use[2]!./src/app.css)
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'node:vm'
Require stack:
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/#csstools/postcss-trigonometric-functions/dist/index.cjs
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-preset-env/dist/index.cjs
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/utils.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/index.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/postcss-loader/dist/cjs.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/loadLoader.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/loader-runner/lib/LoaderRunner.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack/lib/NormalModule.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/webpack-manifest-plugin/dist/index.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-scripts/config/webpack.config.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/overrides/webpack.js
/Users/niltonxd/Workspace/harv-Harvest-frontend/node_modules/react-app-rewired/scripts/start.js
(#/Users/niltonxd/Workspace/harv-Harvest-frontend/src/app.css)
{
"name": "harvest-front",
"version": "1.7.4",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#fortawesome/fontawesome-svg-core": "^1.2.22",
"#fortawesome/free-solid-svg-icons": "^5.10.2",
"#fortawesome/react-fontawesome": "^0.1.4",
"#types/jest": "^27.4.1",
"#types/node": "^17.0.23",
"#types/react": "^17.0.43",
"#types/react-dom": "^17.0.14",
"antd": "^4.18.7",
"apexcharts": "^3.19.2",
"apisauce": "^1.1.0",
"connected-react-router": "^6.5.2",
"dotenv": "^10.0.0",
"formik": "^2.2.9",
"har-validator": "^5.1.5",
"history": "4.10.1",
"js-file-download": "^0.4.9",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"moment": "^2.22.2",
"moment-timezone": "^0.5.33",
"papaparse": "^5.2.0",
"password-validator": "^5.0.2",
"prop-types": "^15.6.2",
"query-string": "^6.8.3",
"react": "^17.0.2",
"react-apexcharts": "^1.3.7",
"react-clear-cache": "^1.2.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "npm:#hot-loader/react-dom#^17.0.2",
"react-error-boundary": "^3.1.4",
"react-intl": "^2.4.0",
"react-leaflet": "2.8.0",
"react-number-format": "^4.3.1",
"react-redux": "^7.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"recharts": "^1.0.1",
"redis": "^3.1.2",
"redux": "^4.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.0.2",
"source-map-explorer": "^2.5.2",
"typescript": "^4.6.3",
"url-search-params": "^1.1.0",
"xlsx": "^0.16.4",
"yup": "^0.27.0"
},
"resolutions": {
"moment": "2.24.0",
"antd": "4.2.4",
"immer": "9.0.6",
"property-expr": "2.0.3",
"ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"glob-parent": "6.0.1",
"styled-components": "^5"
},
"scripts": {
"prebuild": "npm install react-dom#17.0.2 --save",
"sonar": "node sonar-project.js",
"start": "react-app-rewired start",
"start::dev": "env-cmd -e dev react-app-rewired start",
"start::qa": "env-cmd -e qa react-app-rewired start",
"start::np": "env-cmd -e np react-app-rewired start",
"build": "react-app-rewired --max-old-space-size=8192 build",
"test": "react-app-rewired test",
"test::ci": "react-app-rewired test --coverage=false --ci --watchAll=false --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/assets/**/*.js",
"qa": "PORT=8081 react-scripts start",
"cy::op": "cypress open",
"cy::ru": "cypress run",
"lint": "eslint --max-warnings 0 --ignore-path .gitignore --fix --ext .js,.jsx,.ts,.tsx src",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\"",
"format": "yarn run prettier -- --write",
"check-format": "yarn run prettier -- --list-different",
"validate": "yarn run lint && yarn run test --watchAll --bail",
"createJob": "node ci/createJob.js",
"deleteJob": "node ci/deleteJob.js",
"checkEnvironment": "node ci/checkEnvironment.js",
"cm": "cz",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"generate:gc": "plop --plopfile ./generators/globalComponent.js"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.16.0",
"#babel/plugin-proposal-private-methods": "^7.14.5",
"#babel/plugin-proposal-private-property-in-object": "^7.15.4",
"#babel/preset-typescript": "^7.16.7",
"#commitlint/cli": "^16.0.2",
"#commitlint/config-conventional": "^16.0.0",
"#testing-library/cypress": "^8.0.1",
"#testing-library/dom": "^8.5.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.0",
"#testing-library/react-hooks": "^7.0.2",
"#testing-library/user-event": "^13.3.0",
"#types/lodash": "^4.14.182",
"#types/react-router-dom": "^5.3.3",
"#types/styled-components": "^5.1.24",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "^5.18.0",
"#typescript-eslint/parser": "^5.18.0",
"babel-eslint": "^10.1.0",
"babel-plugin-styled-components": "^2.0.6",
"commitizen": "^4.2.4",
"customize-cra": "^1.0.0",
"customize-cra-less-loader": "^2.0.0",
"cypress": "9.5.2",
"cypress-file-upload": "^5.0.8",
"cypress-mochawesome-reporter": "^2.3.0",
"cz-conventional-changelog": "^3.3.0",
"env-cmd": "^10.1.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-jest-dom": "^3.9.2",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.29.3",
"eslint-plugin-sonarjs": "^0.6.0",
"eslint-plugin-testing-library": "^4.12.2",
"husky": "^4.2.3",
"jest-axe": "^5.0.1",
"jest-styled-components": "^7.0.8",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"less-vars-to-js": "^1.3.0",
"lint-staged": "^11.1.2",
"plop": "^3.0.5",
"postcss-normalize": "^10.0.1",
"prettier": "^2.3.0",
"react-app-rewired": "^2.1.8",
"react-extras": "^3.0.0",
"react-ga": "^3.3.0",
"react-hot-loader": "^4.13.0",
"reactotron-apisauce": "^3.0.0",
"reactotron-react-js": "^3.3.2",
"reactotron-redux": "^3.1.1",
"reactotron-redux-saga": "^4.2.2",
"resolve-url-loader": "^3.1.2",
"sonarqube-scanner": "^2.8.0",
"styled-components": "^5.3.5"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"#components/(.*)": "<rootDir>/./src/components/$1",
"#util/(.*)": "<rootDir>/./src/util/$1",
"#hooks/(.*)": "<rootDir>/./src/hooks/$1",
"#constants/(.*)": "<rootDir>/./src/constants/$1",
"#containers/(.*)": "<rootDir>/./src/containers/$1",
"#routes/(.*)": "<rootDir>/./src/routes/$1",
"#appRedux/(.*)": "<rootDir>/./src/appRedux/$1"
}
}
}
As it appears this error will temporarily get fixed by installing the latest version of Node.js.
So to fix this follow these steps:
Download and install the latest Node.js version (recommended for most users, which is 16.15.0 at this moment).
Delete your node_modules directory from your project. Then you can optionally clear npm cache with npm cache clean and verify it with npm cache verify.
Delete package-lock.json/yarn.lock file.
Reinstall all of the dependencies and create a new dependency tree using one of the following commands: npm i/npm install/yarn/yarn install.
Note1: If in any case, you use node-sass in React projects yet, it is recommended to use sass instead.
Note2: In some cases skipping step 1 will also work as expected, but I recommend upgrading the Node.js version if you do not have other dependencies to prevent that.
Note3: As #IvaniltonBezerra mentions in the comments, some app builds may throw errors, since upgrading Node.js to its latest version will upgrade the npm as well it may not compatible with your current dependency tree in production, so to prevent such a problem you have to use --legacy-peer-deps to restore the old behaviour of the old dependencies.
Update
This is now seem to be permanently solved in PostCSS Preset Env and following the above steps with skipping step 1 will also solve the problem.
You're most likely trying to use create-react-app inside of an image, and the image's current Node version/configurations are crossing wires with create-react-app; that's what I just did by mistake using Docker, and I got the same exact compiling error with node:vm as a missing module
If you're using create-react-app, don't use it while you're in any Docker/Dev Environment images, just run the npx command in your terminal as is (probably helps having node downloaded on your local machine as well)
npx create-react-app my-app --template typescript
Hopefully that helps, I know that solved my problem
I had the same issue. I am using macOS, so some of the commands below are not applicable if we are using Windows or Linux.
I did the following steps to fix the issue:
Remove node_modules and clear the npm cache
rm -f -r node_modules && npm cache verify
Install the current latest node version (16.15.0)
// if you are using nvm to manage the node versioning
nvm install 16.15.0
nvm use 16.15.0
We can access here if we are using N, homebrew or MacPorts
Reinstall the project packages
npm i
I have built react app based on fuse react theme it is running fine in the dev environment by npm start
but I'm getting error while making production build, running npm run build to make a production build but getting ELIFECYCLE error, I have tried all the options like.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fuse-react-app#6.1.4 build: `cross-env
GENERATE_SOURCEMAP=false craco build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fuse-react-app#6.1.4 build script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
Remove package-lock.json
Delete node_modules
Ran npm install
Ran npm start and app is working fine I can access the app on the browser
Ran npm run build getting ELIFECYCLE error
Here is my package.json file
{
"name": "fuse-react-app",
"version": "6.1.4",
"private": true,
"dependencies": {
"#date-io/core": "1.3.13",
"#date-io/date-fns": "1.3.13",
"#date-io/moment": "1.3.13",
"#fullcalendar/core": "5.7.0",
"#fullcalendar/daygrid": "5.7.0",
"#fullcalendar/interaction": "5.7.0",
"#fullcalendar/react": "5.7.0",
"#fullcalendar/timegrid": "5.7.0",
"#hookform/resolvers": "2.5.1",
"#material-ui/core": "4.11.4",
"#material-ui/data-grid": "latest",
"#material-ui/icons": "4.11.2",
"#material-ui/lab": "4.0.0-alpha.58",
"#material-ui/pickers": "3.3.10",
"#mui/material": "^5.2.4",
"#mui/x-data-grid-pro": "^4.0.0",
"#reduxjs/toolkit": "1.5.1",
"apexcharts": "3.26.3",
"auth0-lock": "11.30.0",
"autosuggest-highlight": "3.1.1",
"axios": "0.21.1",
"axios-mock-adapter": "1.19.0",
"chart.js": "2.9.4",
"clsx": "1.1.1",
"cross-fetch": "3.1.4",
"date-fns": "2.21.3",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"firebase": "8.6.2",
"formsy-react": "2.2.5",
"framer-motion": "4.1.17",
"google-map-react": "2.1.9",
"history": "4.10.1",
"i18next": "20.3.0",
"jsonwebtoken": "8.5.1",
"jss": "10.6.0",
"jss-plugin-extend": "10.6.0",
"jss-rtl": "0.3.0",
"jwt-decode": "2.2.0",
"keycode": "2.2.0",
"lodash": "4.17.21",
"marked": "0.8.2",
"material-table": "^1.69.3",
"material-ui-dropzone": "^3.5.0",
"material-ui-popup-state": "1.8.3",
"millify": "^4.0.0",
"mobile-detect": "1.4.5",
"moment": "^2.29.1",
"notistack": "1.0.9",
"path-to-regexp": "3.2.0",
"perfect-scrollbar": "1.5.1",
"prismjs": "1.23.0",
"prop-types": "15.7.2",
"qs": "6.10.1",
"raw-loader": "4.0.2",
"react": "17.0.2",
"react-apexcharts": "1.3.9",
"react-autosuggest": "10.1.0",
"react-beautiful-dnd": "13.1.0",
"react-chartjs-2": "2.11.2",
"react-compound-timer": "^1.2.0",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "1.14.7",
"react-draggable": "4.4.3",
"react-frame-component": "4.1.3",
"react-hook-form": "7.7.1",
"react-i18next": "11.9.0",
"react-iframe": "^1.8.0",
"react-json-editor-ajrm": "^2.5.13",
"react-json-view": "^1.21.3",
"react-masonry-css": "1.0.16",
"react-number-format": "4.5.5",
"react-popper": "1.3.11",
"react-redux": "7.2.4",
"react-router": "5.2.0",
"react-router-config": "5.1.1",
"react-router-dom": "5.2.0",
"react-scripts": "^4.0.3",
"react-select": "3.2.0",
"react-show-more-text": "^1.5.0",
"react-sparklines": "^1.7.0",
"react-spring": "9.1.2",
"react-swipeable": "6.1.2",
"react-swipeable-views": "0.13.9",
"react-swipeable-views-utils": "0.13.9",
"react-table": "7.7.0",
"react-terminal-component": "^1.5.0",
"react-text-mask": "5.4.3",
"react-virtualized": "9.22.3",
"react-window": "1.8.6",
"redux": "4.1.0",
"redux-logger": "4.0.0",
"styled-components": "5.3.0",
"typeface-poppins": "1.1.13",
"velocity-animate": "1.5.2",
"velocity-react": "1.4.3",
"web-vitals": "^0.2.4",
"yup": "0.32.9"
},
"peerDependencies": {
"autoprefixer": "9.8.6",
"postcss": "7.0.35",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"resolutions": {
"react": "17.0.2",
"react-dom": "17.0.2",
"babel-loader": "8.1.0"
},
"devDependencies": {
"#babel/core": "7.12.17",
"#babel/node": "7.12.17",
"#babel/plugin-transform-react-jsx": "7.12.17",
"#babel/preset-env": "7.12.17",
"#craco/craco": "^6.1.2",
"#tailwindcss/postcss7-compat": "2.1.2",
"#typescript-eslint/eslint-plugin": "^4.25.0",
"#typescript-eslint/parser": "^4.25.0",
"#yarnpkg/pnpify": "2.4.0",
"autoprefixer": "9.8.6",
"babel-eslint": "10.1.0",
"cross-env": "7.0.3",
"eslint": "7.27.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-import-resolver-node": "^0.3.4",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"js-beautify": "1.13.13",
"postcss": "7.0.35",
"prettier": "^2.3.0",
"promise": "8.1.0",
"source-map-explorer": "2.5.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#2.1.2",
"tailwindcss-dir": "4.0.0"
},
"scripts": {
"start": "craco start",
"build": "cross-env GENERATE_SOURCEMAP=false craco build",
"test": "craco test --env=node",
"eject": "craco eject",
"build-docs": "find ./src/app/main/documentation/material-ui-components \\( -name '*.ts' -o -name '*.tsx' \\) -type f -delete && babel-node --presets #babel/preset-env src/app/main/documentation/material-ui-components/build.js",
"analyze": "craco build && source-map-explorer 'build/static/js/*.js' --html analyze-result.html",
"pnpify-sdk": "yarn pnpify --sdk",
"lint": "eslint"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 3 safari version"
]
}}
Node version = 14.2.0
npm version = 6.14.4
Any solution how can I resolve the above error and make a production build.
I think the main reason is the using cross-env package. Otherwise other scripts would cause same error, too.
FOr testing purpose, remove cross-env GENERATE_SOURCEMAP=false and pass false manually instead of process.env.GENERATE_SOURCEMAP. so your build script should be
"build": "craco build",
if it does not work, clean the cache
npm cache clean –force
delete .npm
rm -rf ~/.npm
then delete lock.json and node_modules, and reinstall
npm install
I downloaded expo project source code from github and tried to install node_module.
But I got following issue.
[error] No files matching the pattern were found: "'**/*.js'".
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 2.
My node version is 14.15.1
expo version: 4.0.8
react-native-cli: 2.0.1
and I will share my package.json file
{
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"postinstall": "yarn prettier && yarn lint",
"prettier": "npx prettier --write '**/*.js'",
"lint": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" .",
"lint:fix": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" --fix ."
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.(js|jsx)": [
"yarn prettier",
"yarn lint:fix",
"git add"
]
},
"dependencies": {
"#babel/cli": "7.0.0",
"#babel/core": "^7.0.0",
"#babel/runtime": "7.0.0",
"#expo/vector-icons": "10.0.1",
"axios": "^0.18.0",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-inline-dotenv": "^1.2.2",
"concurrently": "^4.1.0",
"expo": "^37.0.0",
"expo-asset": "~6.0.0",
"expo-constants": "~6.0.0",
"expo-font": "~6.0.1",
"expo-google-app-auth": "^6.0.0",
"expo-image-picker": "~6.0.0",
"expo-location": "~6.0.0",
"expo-permissions": "~6.0.0",
"mobx": "^4.3.1",
"mobx-react": "^5.1.0",
"mobx-state-tree": "^3.7.0",
"moment": "^2.24.0",
"native-base": "^2.12.1",
"prop-types": "^15.6.2",
"react": "16.6.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-design-utility": "^0.0.30",
"react-native-gesture-handler": "~1.3.0",
"react-native-reanimated": "~1.1.0",
"react-native-tab-view": "^2.10.0",
"react-native-webview": "~5.12.0",
"react-navigation": "2.18.2",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"socket.io-client": "^2.2.0"
},
"devDependencies": {
"#babel/plugin-transform-runtime": "^7.4.0",
"babel-eslint": "^10.0.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"eslint": "^5.1.0",
"eslint-config-prettier": "^3.1.0",
"eslint-plugin-react": "^7.11.1",
"husky": "^1.1.2",
"lint-staged": "^7.3.0",
"schedule": "0.4.0"
}
}
How can I fix this issue?
I'm not sure it works. You can try to overwrite your prettier configuration like this
"prettier": "prettier --write \"src/**/*.{js,jsx,tsx,ts}\""
Previous solution really worked. Сan also is used without quotes:
"prettier": "prettier --write src/**/*.{js,jsx,tsx,ts}"
I am getting the above error while running jest v23 in a monorepo. The package i am running jest on is built on CRA and craco.
Package.json of my CRA
{
"name": "#sprinklr/chat-web-client",
"version": "0.1.0",
"dependencies": {
"#emotion/core": "^10.0.5",
"#emotion/styled": "^10.0.5",
"#sentry/browser": "^5.8.0",
"#sentry/integrations": "^5.8.0",
"#sprinklr/chat-constants": "2.0.0",
"#sprinklr/chat-entities": "2.0.0",
"#sprinklr/chat-utils": "2.0.0",
"#sprinklr/rest-client": "2.0.0",
"azure-storage": "^2.10.3",
"bluebird": "^3.4.0",
"classnames": "^2.2.6",
"core-js": "^3.0.1",
"emotion": "^10.0.2",
"emotion-theming": "^10.0.5",
"formik": "^1.3.2",
"immutability-helper": "^2.8.1",
"jstz": "^2.1.1",
"lodash": "^4.17.4",
"polished": "^2.3.0",
"prop-types": "^15.5.7",
"react": "^16.8.6",
"react-autosize-textarea": "^6.0.0",
"react-dom": "^16.8.6",
"react-frame-component": "^4.0.2",
"react-redux": "7.2.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.7",
"react-transition-group": "^2.5.3",
"react-use": "^14.1.1",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.1",
"reselect": "^4.0.0",
"scriptjs": "^2.5.8",
"shortid": "^2.2.14",
"styled-system": "^3.0.2",
"typesafe-actions": "^2.0.4",
"validate.js": "^0.13.1"
},
"scripts": {
"precommit": "pretty-quick --staged",
"start": "sh internals/build/build-packages.sh && craco start --workspace",
"prebuild": "NODE_ENV=production babel-node internals/build/tools/run prebuild",
"build": "sh internals/build/build.sh",
"analyze": "source-map-explorer build/static/js/main.*",
"eject": "react-scripts eject",
"docz:dev": "docz dev",
"docz:build": "docz build",
"static": "NODE_ENV=production babel-node internals/build/tools/run static/index",
"widget": "NODE_ENV=production babel-node internals/build/tools/run widget/index",
"i18n": "sh internals/i18n/index.sh",
"lint": "eslint src",
"format": "npm run prettier -- --write",
"prettier": "prettier \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\"",
"validate": "npm run lint && npm run prettier -- --list-different",
"test": "craco test --workspace --env=jsdom",
"test-watch": "npm run test -- --watch",
"test-coverage": "npm run test -- --coverage",
"test-update": "npm run test -- --updateSnapshot"
},
"devDependencies": {
"#babel/cli": "7.2.3",
"#babel/core": "7.2.2",
"#babel/node": "7.2.2",
"#babel/preset-env": "^7.3.1",
"#craco/craco": "^3.5.0",
"#emotion/babel-preset-css-prop": "^10.0.7",
"#sprinklr/chat-types": "2.0.0",
"#testing-library/jest-dom": "4.2.4",
"#testing-library/react": "^9.4.0",
"#types/bluebird": "^3.5.26",
"#types/classnames": "^2.2.7",
"#types/jest": "26.0.0",
"#types/lodash": "^4.14.118",
"#types/node": "^11.13.7",
"#types/react": "^16.8.14",
"#types/react-dom": "^16.8.4",
"#types/react-intl": "^2.3.15",
"#types/react-redux": "^7.1.0",
"#types/react-router": "^4.4.2",
"#types/react-textarea-autosize": "^4.3.3",
"#types/react-transition-group": "^2.0.15",
"#types/redux-logger": "^3.0.6",
"#types/scriptjs": "^0.0.2",
"#types/shortid": "^0.0.29",
"#types/styled-system": "^3.0.8",
"aws-sdk": "^2.392.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-plugin-react-intl": "^3.0.1",
"babel-plugin-react-intl-auto": "^1.6.0",
"babel-preset-react-app": "^7.0.0",
"cheerio": "^1.0.0-rc.2",
"docz": "^0.12.15",
"eslint-plugin-prettier": "^2.6.2",
"glob": "^7.1.2",
"husky": "^0.14.3",
"node-sass-chokidar": "^1.3.0",
"prettier": "1.13.7",
"pretty-quick": "^1.6.0",
"react-intl": "^2.8.0",
"source-map-explorer": "^1.5.0",
"terser": "3.16.1",
"ts-jest": "26.1.1",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.16.0",
"tslint-react-hooks": "^1.1.0",
"typescript": "3.4.5",
"typescript-styled-plugin": "^0.13.0",
"webpack-merge": "^4.1.4"
},
"optionalDependencies": {
"fsevents": "1.2.4"
},
"browserslist": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 11"
]
}
I checked my node_modules and it has fsevents installed. Still getting the error. Most common solution which I found was reinstalling node_modules after deleting yarn.lock but this solution isn't working for me. Neither installing watchman worked.
I am using jestConfig of CRA itself
Solved this issue by installing brew and then doing
brew install watchman
on my mac.