Error: Cannot find module 'react-dev-utils/crossSpawn'

[LorhanSohaky]

Require stack:
- /home/.../node_modules/react-app-rewired/bin/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
    at Function.Module._load (internal/modules/cjs/loader.js:864:27)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/home/.../node_modules/react-app-rewired/bin/index.js:2:13)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/.../node_modules/react-app-rewired/bin/index.js'
  ]
}

[dawnmist]

Do you have react-scripts installed? React-dev-utils is a dependency of react-scripts, so it should be present if you have react-scripts installed. (It's part of the create-react-app set of packages that are automatically installed when creating a react project).

[LorhanSohaky]

Yes. Here some dependencies:

{
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "REACT_APP_ENV=development react-app-rewired start",
    "build": "echo Building to ${REACT_APP_ENV} environment && react-app-rewired build",
    "build-dev": "REACT_APP_ENV=development CI=false npm run build",
    "build-prod": "REACT_APP_ENV=production CI=true npm run build",
    "build-android": "cd android && ./gradlew bundleRelease",
    "test": "jest --passWithNoTests",
    "cy:open": "NODE_ENV=test cypress open",
    "serve": "serve -s build -p 3000",
    "serve-test-cypress": "start-test serve 3000 cy:run:all",
    "lint": "prettier-standard --check \"+(src|cypress)/**/*.+(js|jsx|json|css|md)\"",
    "lint:fix": "prettier-standard \"+(src|cypress)/**/*.+(js|jsx|json|css|md)\""
  },
  "dependencies": {
    ...
    "@sentry/browser": "^5.15.4",
    "@sentry/react-native": "^1.3.6",
    "apisauce": "^1.1.1",
    "history": "^4.10.1",
    "jpeg-autorotate": "^5.0.3",
    "jsencrypt": "^3.0.0-rc.1",
    "modal-react-native-web": "^0.2.0",
    "moment": "^2.24.0",
    "pica": "^5.1.0",
    "pure-react-carousel": "^1.26.1",
    "react": "16.9.0",
    "react-burger-menu": "^2.6.13",
    "react-dom": "^16.13.1",
    "react-facebook-login": "^4.1.1",
    "react-helmet": "^5.2.1",
    "react-hotjar": "^2.0.2",
    "react-lazy-load-image-component": "^1.4.1",
    "react-loadable": "^5.5.0",
    "react-native": "~0.61.5",
    "react-native-countdown-component": "^2.7.1",
    "react-native-easy-toast": "^1.2.0",
    "react-native-gallery-swiper": "^1.25.3",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-rsa-native": "^1.1.4",
    "react-native-vector-icons": "^4.6.0",
    "react-native-web": "^0.11.7",
    "react-navigation": "^4.3.5",
    "react-redux": "^7.2.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-router-native": "^5.1.2",
    "react-scripts": "^3.4.1",
    "recyclerlistview": "^3.0.0",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "reduxsauce": "^1.1.2",
    "react-native-web-linear-gradient": "^1.1.1",
    "reselect": "^4.0.0",
    "seamless-immutable": "^7.1.4",
    "world-countries": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/runtime": "^7.9.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "@sentry/webpack-plugin": "^1.10.0",
    "babel-jest": "^24.9.0",
    "babel-plugin-react-native-web": "^0.12.2",
    "customize-cra": "^0.9.1",
    "cypress": "^4.3.0",
    "husky": "^4.2.3",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "prettier": "^1.19.1",
    "prettier-standard": "^16.2.1",
    "react-app-rewired": "^2.1.5",
    "react-test-renderer": "16.9.0",
    "redux-logger": "^3.0.6",
    "serve": "^11.2.0",
    "start-server-and-test": "^1.10.6"
  },
  "jest": {
    "preset": "react-native",
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node",
      "mjs"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[dawnmist]

What is the output from running yarn why react-dev-utils? (I'm sorry, I'm not sure what the npm equivalent is here - maybe npm ls react-dev-utils but its documentation seems to have a different view that is missing info I was trying to check)

Do you have a node_modules/react-dev-utils directory? If so, what is the content of that directory, and what is the version number in the package.json file in that directory?

Basically - the file your error message is complaining about is one that should always be present, so I'm trying to dig into why it might be missing. I'm assuming of course that you haven't simply forgotten to run yarn install, so I'm looking for any info into what version is installed instead and why that particular version is installed.

[LorhanSohaky]

[dawnmist]

Ok, yes - the npm version is missing all the information I was looking for, which means that the 2 lines you screenshotted tell me nothing of use. :'(

Do you have a node_modules/react-dev-utils directory? If so, what is the content of that directory, and what is the version number in the package.json file in that directory?

Alternatively, can you make an example repository that duplicates the issue that you can share with me so I have something I can debug?

[LorhanSohaky]

I don't have a node_modules /react-dev-utils directory, but I do have node_modules/react-scripts/node_modules/react-dev-utils/ in version 10.2.1

About creating a sample repository I don't know if I can, because I am migrating a project that had a webpack ejected to use react-app-rewired

[dawnmist]

Ok - something to try:

1. Delete the node_modules directory.
2. Redo the npm install or yarn install.

Check for that directory again.

What should be happening, is the react-dev-utils package is supposed to be being hoisted into your main node_modules directory, since you don't have any other versions that would be conflicting.

What I suspect may have happened is that you used to have something else that had a dependency on a different version of react-dev-utils. That other version was the one being hoisted, and as a part of migrating across that other dependency was removed. The second version of react-dev-utils under react-scripts was then not "moved up" out of the react-scripts node_modules directory automatically. If this is the case, deleting the node_modules directory and reinstalling should trigger installing the react-dev-utils version that react-scripts (and us!) rely on into the node_modules directory properly.

One other question: you say you are migrating over to react-app-rewired. Is this so that you can move back to create-react-app rather than as an ejected project? If so, great :). If not, react-app-rewired is designed specifically for use with a non-ejected app - once an app is ejected you already have full access to make the modifications by default that react-app-rewired enables for create-react-app, so it's pretty pointless to migrate in that case.

[LorhanSohaky]

That was in fact, there was something that was using react-dev-utils directly from the node_modules/react-dev-utils folder.

About the project, it had an ejected webpack and with that the webpack settings (default) were mixing with our own settings. So I recreated a base project with create-react-app and usedreact-app-rewired to override some things

[dawnmist]

So did redoing the install of the node_modules directory sort the issue out?

[LorhanSohaky]

No, i had to install manually

[timarney]

Closing this as it doesn't seem like a bug.

[mnemanja]

Please reopen this issue. I have node v13.8.0, npm 6.14.5 on Mac. Everything was running smoothly until today. If I run the project with react-scripts it works, but not with react-app-rewired/

I have tried removing node_modules and reinstalling, but to no avail.

Running npm ls react-dev-utils shows the following:

> npm ls react-dev-utils
ecockpit@0.1.0 /Volumes/Workspace/www/ecockpit/client
├─┬ customize-cra-react-refresh@1.0.1
│ └─┬ @pmmmwh/react-refresh-webpack-plugin@0.1.3
│   └── react-dev-utils@9.1.0 
└─┬ react-scripts@3.4.0
  └── react-dev-utils@10.2.1 

My dependencies

"engines": {
    "node": ">=13.8.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@apollo/client": "^3.0.0-beta.46",
    "@material-ui/core": "^4.9.10",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.49",
    "date-fns": "^2.11.0",
    "graphql": "^14.6.0",
    "i18next": "^19.3.2",
    "i18next-browser-languagedetector": "^4.0.2",
    "i18next-xhr-backend": "^3.2.2",
    "notistack": "^0.9.11",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-form": "^4.0.1",
    "react-i18next": "^11.3.3",
    "react-router-dom": "^5.1.2",
    "styled-components": "^5.0.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.3.0",
    "@testing-library/react": "^10.0.1",
    "@testing-library/react-hooks": "^3.2.1",
    "@testing-library/user-event": "^10.2.0",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-router-dom": "^5.1.3",
    "@types/styled-components": "^4.4.3",
    "apollo": "^2.23.0",
    "babel-plugin-i18next-extract": "^0.6.1",
    "babel-plugin-styled-components": "^1.10.7",
    "babel-plugin-transform-imports": "^2.0.0",
    "customize-cra": "^0.9.1",
    "customize-cra-react-refresh": "^1.0.1",
    "eslint-plugin-import": "^2.20.2",
    "express-http-proxy": "^1.6.0",
    "husky": "^4.2.3",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "lint-staged": "^10.0.8",
    "prettier": "^1.19.1",
    "react-app-rewired": "^2.1.6",
    "react-scripts": "3.4.0",
    "react-test-renderer": "^16.13.1",
    "typescript": "~3.7.2"
  },

And here is my npm log:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/***/.nvm/versions/node/v13.9.0/bin/node',
1 verbose cli   '/Users/***/.nvm/versions/node/v13.9.0/lib/node_modules/npm/bin/npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'start',
1 verbose cli   '--scripts-prepend-node-path=auto'
1 verbose cli ]
2 info using npm@6.13.7
3 info using node@v13.9.0
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle proj@0.1.0~prestart: proj@0.1.0
6 info lifecycle proj@0.1.0~start: proj@0.1.0
7 verbose lifecycle proj@0.1.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle proj@0.1.0~start: PATH: /Users/***/.nvm/versions/node/v13.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Volumes/Workspace/www/proj/client/node_modules/.bin:/Users/***/.nvm/versions/node/v13.9.0/bin:/Users/***/.volta/bin:/Users/***/.nvm/versions/node/v13.8.0/bin:/Users/***/bin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/***/Library/Android/sdk/emulator:/Users/***/Library/Android/sdk/tools:/Users/***/Library/Android/sdk/tools/bin:/Users/***/Library/Android/sdk/platform-tools
9 verbose lifecycle proj@0.1.0~start: CWD: /Volumes/Workspace/www/proj/client
10 silly lifecycle proj@0.1.0~start: Args: [ '-c', 'react-app-rewired start' ]
11 silly lifecycle proj@0.1.0~start: Returned: code: 1  signal: null
12 info lifecycle proj@0.1.0~start: Failed to exec start script
13 verbose stack Error: proj@0.1.0 start: `react-app-rewired start`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/***/.nvm/versions/node/v13.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:321:20)
13 verbose stack     at ChildProcess.<anonymous> (/Users/***/.nvm/versions/node/v13.9.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:321:20)
13 verbose stack     at maybeClose (internal/child_process.js:1026:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid proj@0.1.0
15 verbose cwd /path
16 verbose Darwin 19.4.0
17 verbose argv "/Users/***/.nvm/versions/node/v13.9.0/bin/node" "/Users/***/.nvm/versions/node/v13.9.0/lib/node_modules/npm/bin/npm-cli.js" "run" "start" "--scripts-prepend-node-path=auto"
18 verbose node v13.9.0
19 verbose npm  v6.13.7
20 error code ELIFECYCLE
21 error errno 1
22 error proj@0.1.0 start: `react-app-rewired start`
22 error Exit status 1
23 error Failed at the proj@0.1.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

[dawnmist]

@mnemanja I do not believe that you're facing the same issue as the original poster. Your error log is completely different. It is certainly not failing at the point where the react-dev-utils/crossSpawn file was being accessed in react-app-rewired, but instead somewhere in the node.js lifecycle functions.

In your case, if the project compiles when the changes you're making in config-overrides.js are not applied and fails to compile when the changes you're making in config-overrides.js are applied, it usually means one of three things:

• there is an error in your config-overrides.js file, OR
• there is a compatibility issue between the changes/new plugins you're adding in config-overrides.js and the original create-react-app webpack configuration, OR
• there is a bug in your code that is only used/triggered when you add the webpack plugin overrides in config-overrides.js (e.g. web worker files, etc).

Please move this to its own issue, and in that issue include an example repository that triggers the same error. Without that, we will be unable to help debug what changes are actually causing your build to fail.

As an alternative, you can try to identify the particular plugin/rewire/package causing the problem by commenting out all except one override in your config-overrides.js file, then test the build with npm start, and then if the build had been successful uncomment a second override and test again, and continue doing so until you identify which particular override causes the build to start breaking. That then identifies who you'd need to contact to find out how to fix your issue with the build.

[LorhanSohaky]

@dawnmist Thank you so much!!!

[timarney]

Will close this again soon if there's no activity.

[imagine10255]

Hi, I used the --productoin method to install, if there is a project that is not installed in devDependencies, it will cause this error

rm -rf node_modules
yarn install --production
yarn build

"dependencies": {
    "@types/seamless-immutable": "^7.1.13",
    "@types/styled-components": "^5.1.0",
    "@types/webpack-env": "^1.15.2",
    "apisauce": "^1.1.1",
    "body-scroll-lock": "^3.0.2",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.8.0",
    ....
  },
  "devDependencies": {
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-backgrounds": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/preset-create-react-app": "^3.0.0",
    "@storybook/react": "^5.3.19",
    "http-proxy-middleware": "^1.0.4",
    "storybook-addon-i18n": "^5.1.13"
  }

But if you delete the devDependencies project directly, it will be normal

"dependencies": {
    "@types/seamless-immutable": "^7.1.13",
    "@types/styled-components": "^5.1.0",
    "@types/webpack-env": "^1.15.2",
    "apisauce": "^1.1.1",
    "body-scroll-lock": "^3.0.2",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.8.0",
    ....
  },
  "devDependencies": {
  }

Or I directly use yarn install to install all

[sabine19]

What is the solution of this issue?

I installed react-app-rewired and get following error:

npx react-app-rewired start
npx: Installierte 2 in 2.239s
Cannot find module 'react-dev-utils/crossSpawn'
Require stack:
- C:\npm-cache\_npx\6612\node_modules\react-app-rewired\bin\index.js

my config override just returns the config as is for testing purposes now. So i have no error in config-override.js.

But what seems to be strange is the require stack. why is it pointing to the npm cache node_modules folder instead of the projects node_modules folder?

If anyone has a solution please let me know! Thanks!

[garrettmaring]

In my project, I'd simply forgotten to install react-scripts. Running $ yarn install -D react-scripts was enough.

[marneborn]

For me we have a devDependency of @storybook/react@^5.3.19 which has a dependency of react-dev-utils@9.1.0. For some reason with this devDependency NODE_ENV=production yarn install put react-dev-utils in node_modules/react-scripts/node_modules/react-dev-utils instead of in node_modules/react-dev-utils.

If I uninstall @storybook/react (again, a devDependency...) NODE_ENV=production yarn install ; yarn build works fine.

Simplest workaround is explicitly install react-dev-utils:

yarn add "react-dev-utils@$(jq -r '.dependencies."react-dev-utils"' node_modules/react-scripts/package.json)"

[SohelSamim]

That was in fact, there was something that was using react-dev-utils directly from the node_modules/react-dev-utils folder.

About the project, it had an ejected webpack and with that the webpack settings (default) were mixing with our own settings. So I recreated a base project with create-react-app and usedreact-app-rewired to override some things

hey dud , can you tell how to do it manually ?

[EdmundMai]

npm install --save-dev react-dev-utils

[HamishClulee]

If you're using npm v8.x.x then you may need to use the --legacy-peer-deps flag and npm i --save-dev react-dev-utils --legacy-peer-deps worked for me!

[pdavid31]

Unfortunately still seeing this issue using react-app-rewired v2.2.1, react-scripts v5.0.0 and react-dev-utils v12.0.0.

Manually installing / adding react-dev-utils to the dev dependencies did not resolve the problem.