react-scripts build crashes with no other message than the memory ran out. react-scripts start runs just fine

Question

I'm currently building an app with create-react-app. I was able build my app with no issues before this happened and I have not made any npm or node version updates since my last successful build.

Here is what I see on the terminal when running the build command.

npm run build

> [email protected] build /home/user/NewProjects/siva/front-end-v2
> react-scripts build

Creating an optimized production build...
The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2023-10-18T11_31_45_530Z-debug.log

And below here is the error log. I've read it and its not pointing on any other package except react-scripts.

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/home/user/.nvm/versions/node/v12.22.12/bin/node',
1 verbose cli   '/home/user/.nvm/versions/node/v12.22.12/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: /home/user/.nvm/versions/node/v12.22.12/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/user/NewProjects/siva/front-end- v2/node_modules/.bin:/home/user/.local/bin:/home/user/.vscode-server/bin/f1b07bd25dfad64b0167beb15359ae573aecd2cc/bin/remote-cli:/home/linuxbrew/.linuxbrew/bin:/home/linuxbrew/.linuxbrew/sbin:/home/user/.local/bin:/home/user/.nvm/versions/node/v12.22.12/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/usr/lib/wsl/lib:/usr/lib/jvm/jdk-11.0.4/bin:/usr/lib/jvm/jdk-11.0.4/db/bin:/mnt/c/DevTools/Microsoft VS Code/bin:/mnt/c/Windows/system32:/home/user/.yarn/bin:/usr/share/repo:/mnt/d/DevTools/emsdk:/mnt/d/DevTools/emsdk/upstream/emscripten:/mnt/d/DevTools/emsdk/node/12.9.1_64bit/bin:/usr/lib/jvm/jdk-11.0.4/bin:/usr/lib/jvm/jdk-11.0.4/db/bin:/mnt/c/DevTools/Microsoft VS Code/bin:/mnt/c/Windows/system32:/home/user/.yarn/bin:/usr/share/repo:/mnt/d/DevTools/emsdk:/mnt/d/DevTools/emsdk/upstream/emscripten:/mnt/d/DevTools/emsdk/node/12.9.1_64bit/bin
9 verbose lifecycle [email protected]~build: CWD: /home/user/NewProjects/siva/front-end-v2
10 silly lifecycle [email protected]~build: Args: [ '-c', 'react-scripts build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: `react-scripts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/user/.nvm/versions/node/v12.22.12/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (/home/user/.nvm/versions/node/v12.22.12/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314:20)
13 verbose stack     at maybeClose (internal/child_process.js:1022:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/user/NewProjects/siva/front-end-v2
16 verbose Linux 5.15.90.1-microsoft-standard-WSL2
17 verbose argv "/home/user/.nvm/versions/node/v12.22.12/bin/node" "/home/user/.nvm/versions/node/v12.22.12/bin/npm" "run" "build"
18 verbose node v12.22.12
19 verbose npm  v6.14.16
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `react-scripts build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Here is my package.json

{
  "name": "siva-app-v2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@tinymce/tinymce-react": "^4.2.0",
    "@tiptap/extension-color": "^2.0.3",
    "@tiptap/extension-text-align": "^2.0.3",
    "@tiptap/extension-text-style": "^2.0.3",
    "@tiptap/extension-underline": "^2.0.3",
    "@tiptap/pm": "^2.0.3",
    "@tiptap/react": "^2.0.3",
    "@tiptap/starter-kit": "^2.0.3",
    "axios": "^0.21.4",
    "bootstrap": "3.4.1",
    "classnames": "^2.3.1",
    "d3-ease": "^3.0.1",
    "dompurify": "^2.2.0",
    "git": "^0.1.5",
    "imask": "^6.0.7",
    "js-cookie": "^2.2.1",
    "jstoxml": "^3.2.3",
    "jszip": "^3.10.1",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "mobx": "^6.0.1",
    "mobx-react-lite": "^3.0.1",
    "moment": "^2.29.4",
    "nanoid": "^3.3.6",
    "node-sass": "^4.14.1",
    "prop-types": "^15.8.1",
    "react": "^17.0.1",
    "react-auth-kit": "^1.4.8",
    "react-calendar": "^3.1.0",
    "react-circular-progressbar": "^2.0.4",
    "react-datetime-picker": "^4.0.1",
    "react-dom": "^17.0.1",
    "react-dropzone": "^14.2.2",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^7.1.0",
    "react-html-parser": "^2.0.2",
    "react-image-crop": "^10.0.6",
    "react-ionicons": "^4.2.0",
    "react-move": "^6.5.0",
    "react-onclickoutside": "^6.12.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-select": "^5.1.0",
    "react-signature-canvas": "^1.0.6",
    "react-tabs": "^3.2.2",
    "react-time-picker": "^4.5.0",
    "react-xml-viewer": "^1.3.0",
    "remixicon-react-redux": "^1.0.3",
    "styled-components": "^5.2.3",
    "validator": "^13.6.0",
    "web-vitals": "^0.2.4",
    "xml2js": "^0.5.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:prod": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier --write src/**/*.ts{,x}",
    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  "preinstall": "npx npm-force-resolutions",
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/classnames": "^2.2.10",
    "@types/d3-ease": "^3.0.0",
    "@types/dompurify": "^2.0.4",
    "@types/jest": "^26.0.15",
    "@types/js-cookie": "^2.2.6",
    "@types/jstoxml": "^2.0.2",
    "@types/lodash": "^4.14.162",
    "@types/node": "^12.0.0",
    "@types/react": "^16.14.23",
    "@types/react-calendar": "^3.1.2",
    "@types/react-circular-progressbar": "^1.1.0",
    "@types/react-datepicker": "^3.1.8",
    "@types/react-datetime-picker": "^3.4.1",
    "@types/react-dom": "^16.9.8",
    "@types/react-html-parser": "^2.0.1",
    "@types/react-router-dom": "^5.1.6",
    "@types/react-select": "^4.0.15",
    "@types/react-signature-canvas": "^1.0.2",
    "@types/react-tabs": "^2.3.3",
    "@types/react-time-picker": "^4.0.2",
    "@types/tinymce": "^4.6.5",
    "@types/validator": "^13.1.3",
    "@types/xml": "^1.0.8",
    "@types/xml2js": "^0.4.9",
    "@typescript-eslint/parser": "^5.10.2",
    "eslint": "^7.12.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-prettier": "^6.14.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^4.3.0",
    "prettier": "^2.1.2",
    "react-error-overlay": "^6.0.9",
    "typescript": "^4.5.5"
  }
}

My dev environment for this app runs on a WSL instance in a computer with this specs.

• Ubuntu 18.04
• Node.js 12
• AMD Ryzen 7 2700X
• 16GB RAM
• NVIDIA GeForce 1070ti

I already tried reinstalling the packages and it doesn't help either. I looked for other solutions on similar problems with memory running out even the max-old-space-size command did not help. So I'm kind of running out of ideas.

I'm wondering if my app became too big for create-react-app to be able build.

Any help would be appreciated. Thanks!

Answer 1

This was indeed a memory issue. The allocated WSL2 memory was 4GB and I increased it to 6GB and it's now working.

This is what my .wslconfig looked like.

[wsl2]
memory=6GB

I will have to remove "soon-to-be" deprecated stuff on my app to reduce memory usage during build.