Create-react-app: After updating to 0.6.0, Error: Cannot find module 'react-dev-utils/webpackHotDevClient'
It seems create-react-app is updating very frequently right now, but there's no guidance in how to keep an app you created with create-react-app up to date. It seems one way may be to update react-scripts via something like:
npm install --save-dev react-scripts@latest
But without any official documentation, it's not clear if this is entirely sufficient. I just tried doing that from 0.5.1 to 0.6.0 and I got an error:
pbeshai: ~/Workspace/my-project $ npm start
> [email protected] start /Users/pbeshai/Workspace/my-project
> react-scripts start
module.js:442
throw err;
^
Error: Cannot find module 'react-dev-utils/webpackHotDevClient'
at Function.Module._resolveFilename (module.js:440:15)
at Function.resolve (internal/module.js:27:19)
at Object.<anonymous> (/Users/pbeshai/Workspace/my-project/node_modules/react-scripts/config/webpack.config.dev.js:56:13)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/pbeshai/Workspace/my-project/node_modules/react-scripts/scripts/start.js:31:14)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
This error is resolved by running:
npm install --save-dev react-dev-utils
pbeshai
All 37 comments
but there's no guidance in how to keep an app you created with create-react-app up to date.
Isn’t it the very first section in the User Guide? It’s linked from main README, too.
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases
gaearon
on 25 Sep 2016
Wow somehow I missed that last night.
pbeshai
on 25 Sep 2016
As described in user guide, you’d need to look at the changelog and apply changes one by one.
This error is resolved by running:
npm install --save-dev react-dev-utils
This looks like a bug, thanks for noting. Let me look at it.
gaearon
on 25 Sep 2016
I think the problem was that I just Cmd+F'd "update" on the README and found nothing. It's actually very well documented there in the user guide.
pbeshai
on 25 Sep 2016
Added in cc97ed5636e468d94a9769be88513f2c31d1f8bd.
gaearon
on 25 Sep 2016
What is your npm version?
gaearon
on 25 Sep 2016
npm: 3.9.3
node: 6.2.1
Mac OS X 10.11.5
pbeshai
on 25 Sep 2016
[email protected] includes react-dev-utils@^0.2.0 as a devDependency:
https://unpkg.com/[email protected]/package.json
[email protected] includes that file:
https://unpkg.com/[email protected]/webpackHotDevClient.js
So my only guess is it’s some kind of an npm issue out of our control. You might want to update npm to latest (npm i -g npm@next) and maybe try deleting node_modules and running npm install again.
You shouldn’t have to need to npm install --save-dev react-dev-utils manually as that’s a dependency of react-scripts itself.
gaearon
on 25 Sep 2016
Let’s leave this open. I can’t reproduce this with [email protected], but if more people report it, I can take another look.
gaearon
on 25 Sep 2016
Thanks, yea if I check the package.json in node_modules/react-scripts it clearly lists react-dev-utils under bundleDependencies. I'll try to reproduce with updated npm.
pbeshai
on 25 Sep 2016
With [email protected], when I run npm i --save-dev react-scripts@latest, my output looks like this:
If this is not what you see, could you please paste your output?
gaearon
on 25 Sep 2016
Here's what I did:
- npm install [email protected]
- npm install [email protected]
And I get the react-dev-utils error still.
Error: Cannot find module 'react-dev-utils/webpackHotDevClient'
When it installs it in a fresh app instead of updating it works. (e.g.create-react-app my-app installs it correctly)
pbeshai
on 25 Sep 2016
Hmm, I was testing updating from 0.4.0. Let me test updating from 0.5.1.
gaearon
on 25 Sep 2016
@pbeshai On your screenshot, it says it installed [email protected]. Is react-dev-utils/webpackHotDevClient.js missing inside it?
gaearon
on 25 Sep 2016
inside node modules:
pbeshai: ~/Workspace/create-react-app-test/my-app/node_modules $ ls | grep react
react/
react-dom/
react-scripts/
pbeshai: ~/Workspace/create-react-app-test/my-app/node_modules/react-scripts/node_modules/react-dev-utils $ ls
InterpolateHtmlPlugin.js checkRequiredFiles.js node_modules/ package.json
README.md clearConsole.js openBrowser.js prompt.js
WatchMissingNodeModulesPlugin.js formatWebpackMessages.js openChrome.applescript
What’s in package.json there?
gaearon
on 25 Sep 2016
pbeshai: ~/Workspace/create-react-app-test/my-app/node_modules/react-scripts/node_modules/react-dev-utils $ cat package.json
{
"_id": "[email protected]",
"_location": "/react-scripts/react-dev-utils",
"_phantomChildren": {},
"_requiredBy": [
"/react-scripts"
],
"_shrinkwrap": null,
"bugs": {
"url": "https://github.com/facebookincubator/create-react-app/issues"
},
"dependencies": {
"chalk": "1.1.3",
"escape-string-regexp": "1.0.5",
"opn": "4.0.2"
},
"description": "Webpack utilities used by Create React App",
"devDependencies": {},
"engines": {
"node": ">=4"
},
"files": [
"clearConsole.js",
"checkRequiredFiles.js",
"formatWebpackMessages.js",
"InterpolateHtmlPlugin.js",
"openChrome.applescript",
"openBrowser.js",
"prompt.js",
"WatchMissingNodeModulesPlugin.js"
],
"homepage": "https://github.com/facebookincubator/create-react-app#readme",
"license": "BSD-3-Clause",
"name": "react-dev-utils",
"optionalDependencies": {},
"peerDependencies": {
"webpack": "^1.13.2"
},
"readme": "# react-dev-utils\n\nThis package includes some utilities used by [Create React App](https://github.com/facebookincubator/create-react-app). \nPlease refer to its documentation:\n\n* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.\n* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.\n\n## Usage in Create React App Projects\n\nThese utilities come by default with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.**\n\n## Usage Outside of Create React App\n\nIf you don’t use Create React App, or if you [ejected](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject), you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future.\n\n### Entry Points\n\nThere is no single entry point. You can only import individual top-level modules.\n\n#### `new InterpolateHtmlPlugin(replacements: {[key:string]: string})`\n\nThis Webpack plugin lets us interpolate custom variables into `index.html`. \nIt works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-dev-plugin) 2.x via its [events](https://github.com/ampedandwired/html-dev-plugin#events).\n\n```js\nvar path = require('path');\nvar HtmlWebpackPlugin = require('html-dev-plugin');\nvar InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');\n\n// Webpack config\nvar publicUrl = '/my-custom-url';\n\nmodule.exports = {\n output: {\n // ...\n publicPath: publicUrl + '/' \n },\n // ...\n plugins: [\n // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:\n // <link rel=\"shortcut icon\" href=\"%PUBLIC_URL%/favicon.ico\">\n new InterpolateHtmlPlugin({\n PUBLIC_URL: publicUrl\n // You can pass any key-value pairs, this was just an example.\n // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.\n }),\n // Generates an `index.html` file with the <script> injected.\n new HtmlWebpackPlugin({\n inject: true,\n template: path.resolve('public/index.html'),\n }),\n // ...\n ],\n // ...\n}\n```\n\n#### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)`\n\nThis Webpack plugin ensures `npm install <library>` forces a project rebuild. \nWe’re not sure why this isn't Webpack's default behavior. \nSee [#186](https://github.com/facebookincubator/create-react-app/issues/186) for details.\n\n```js\nvar path = require('path');\nvar WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');\n\n// Webpack config\nmodule.exports = {\n // ...\n plugins: [\n // ...\n // If you require a missing module and then `npm install` it, you still have\n // to restart the development server for Webpack to discover it. This plugin\n // makes the discovery automatic so you don't have to restart.\n // See https://github.com/facebookincubator/create-react-app/issues/186\n new WatchMissingNodeModulesPlugin(path.resolve('node_modules'))\n ],\n // ...\n}\n```\n\n#### `checkRequiredFiles(files: Array<string>): boolean`\n\nMakes sure that all passed files exist. \nFilenames are expected to be absolute. \nIf a file is not found, prints a warning message and returns `false`.\n\n```js\nvar path = require('path');\nvar checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');\n\nif (!checkRequiredFiles([\n path.resolve('public/index.html'),\n path.resolve('src/index.js')\n])) {\n process.exit(1);\n}\n```\n\n#### `clearConsole(): void`\n\nClears the console, hopefully in a cross-platform way.\n\n```js\nvar clearConsole = require('react-dev-utils/clearConsole');\n\nclearConsole();\nconsole.log('Just cleared the screen!');\n```\n\n#### `formatWebpackMessages(stats: WebpackStats): {errors: Array<string>, warnings: Array<string>}`\n\nExtracts and prettifies warning and error messages from webpack [stats](https://github.com/webpack/docs/wiki/node.js-api#stats) object.\n\n```js\nvar webpack = require('webpack');\nvar config = require('../config/webpack.config.dev');\n\nvar compiler = webpack(config);\n\ncompiler.plugin('invalid', function() {\n console.log('Compiling...');\n});\n\ncompiler.plugin('done', function(stats) {\n var messages = formatWebpackMessages(stats);\n if (!messages.errors.length && !messages.warnings.length) {\n console.log('Compiled successfully!');\n }\n if (messages.errors.length) {\n console.log('Failed to compile.');\n messages.errors.forEach(console.log);\n return;\n }\n if (messages.warnings.length) {\n console.log('Compiled with warnings.');\n messages.warnings.forEach(console.log);\n }\n});\n```\n\n#### `openBrowser(url: string): boolean`\n\nAttempts to open the browser with a given URL. \nOn Mac OS X, attempts to reuse an existing Chrome tab via AppleScript. \nOtherwise, falls back to [opn](https://github.com/sindresorhus/opn) behavior.\n\n\n```js\nvar path = require('path');\nvar openBrowser = require('react-dev-utils/openBrowser');\n\nif (openBrowser('http://localhost:3000')) {\n console.log('The browser tab has been opened!');\n}\n```\n\n#### `prompt(message: string, isYesDefault: boolean): Promise<boolean>`\n\nThis function displays a console prompt to the user.\n\nBy convention, \"no\" should be the conservative choice. \nIf you mistype the answer, we'll always take it as a \"no\". \nYou can control the behavior on `<Enter>` with `isYesDefault`.\n\n```js\nvar prompt = require('react-dev-utils/prompt');\nprompt(\n 'Are you sure you want to eat all the candy?',\n /* isYesDefault */ false\n).then(shouldEat => {\n if (shouldEat) {\n console.log('You have successfully consumed all the candy.');\n } else {\n console.log('Phew, candy is still available!');\n }\n});\n```\n",
"readmeFilename": "README.md",
"repository": {
"type": "git",
"url": "git+https://github.com/facebookincubator/create-react-app.git"
},
"version": "0.1.1"
}
pbeshai
on 25 Sep 2016
So basically npm lied that it installed [email protected] but really kept 0.1.1 😕
gaearon
on 25 Sep 2016
I think you mean [email protected] and it kept [email protected] but yes that does appear to be the case. :tada:
pbeshai
on 25 Sep 2016
Oh yea, that’s what I meant.
That’s really weird.
I can reproduce it, too.
brb, filing an npm issue
gaearon
on 25 Sep 2016
Sounds good. And it is clearly listed as 0.2.0 in react-scripts package.json. Excerpt below:
~/Workspace/create-react-app-test/my-app/node_modules/react-scripts $ cat package.json
{
...
"bundleDependencies": [
...
"react-dev-utils",
...
],
"dependencies": {
...
"react-dev-utils": "^0.2.0",
...
},
...
"devDependencies": {
"bundle-deps": "1.0.0",
"react": "^15.3.0",
"react-dom": "^15.3.0"
},
"directories": {},
"dist": {
"shasum": "384648cfdea0f905c54dd578d821f1babba00ae0",
"tarball": "https://registry.npmjs.org/react-scripts/-/react-scripts-0.6.0.tgz"
},
"engines": {
"node": ">=4"
},
"files": [
".babelrc",
".eslintrc",
"bin",
"config",
"scripts",
"template",
"utils"
],
...
"optionalDependencies": {
"fsevents": "1.0.14"
},
...
}
Should CRA recommend that people npm uninstall react-scripts first when upgrading, or that they completely blow away node_modules, as npm3's Non-determinism docs advise any time you make a change to package.json?
insin
on 26 Sep 2016
So far it worked okay so not sure. But yes, perhaps we should do this. Let's wait for a second issue about this and then do it.
gaearon
on 26 Sep 2016
Facing similar issue.
On a fresh build or after uninstalling a given package or rm -rf node_modules, every thing works as expected.
After doing changes in one of the dependency module, and upgrading version of that module, I again run npm install. Installation says it is successful.
npm verb exit [ 0, true ]
npm info ok
When I visit package.json file of that module, I find older version.
But, actual module has been updated to new version.
Platform: Linux
node --version: 4.2.2
npm --version: 3.10.7
For Now, I have added npm update after nmp install in the build script. nmp update solves that problem.
Somesh-zz
on 27 Sep 2016
Going to close as the fix is documented in release notes (delete node_modules and run npm install again).
gaearon
on 30 Sep 2016
I'm also seeing this error now on an ejected create-react-app project
npm run start
> node scripts/start.js
module.js:472
throw err;
^
Error: Cannot find module 'react-dev-utils/prompt'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/seqr/ui/scripts/start.js:20:14)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
this is my package.json
{
...
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.0.0",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-inline-environment-variables": "^6.8.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-env": "^1.5.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"connect-history-api-fallback": "^1.3.0",
"css-loader": "^0.28.4",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-import-resolver-babel-module": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"http-proxy-middleware": "^0.17.4",
"jest": "^20.0.4",
"postcss-font-magician": "^2.0.0",
"postcss-loader": "^2.0.5",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"react-addons-perf": "^15.4.2",
"react-addons-test-utils": "^15.5.1",
"react-dev-utils": "^3.0.0",
"react-dom": "^15.5.4",
"react-scripts": "1.0.7",
"react-test-renderer": "^15.5.4",
"strip-ansi": "^3.0.1",
"style-loader": "^0.18.2",
"why-did-you-update": "0.0.8"
},
"dependencies": {
"babel-polyfill": "^6.23.0",
"case-sensitive-paths-webpack-plugin": "^2.1.1",
"chalk": "^1.1.3",
"datatables.net": "^2.1.1",
"detect-port": "^1.2.0",
"dotenv": "^4.0.0",
"enzyme": "^2.8.2",
"extract-text-webpack-plugin": "^2.1.2",
"filesize": "^3.5.10",
"fs-extra": "^3.0.1",
"gzip-size": "^3.0.0",
"html-webpack-plugin": "^2.28.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"onchange": "^3.2.1",
"path-exists": "^3.0.0",
"postcss-cssnext": "^2.11.0",
"postcss-font-magician": "^2.0.0",
"prop-types": "^15.5.10",
"purifycss-webpack-plugin": "^2.0.3",
"random-material-color": "^1.0.3",
"react": "^15.5.4",
"react-addons-perf": "^15.4.2",
"react-addons-shallow-compare": "^15.5.2",
"react-document-title": "^2.0.3",
"react-dom": "^15.4.2",
"react-dropzone": "^3.13.2",
"react-hot-loader": "^3.0.0-beta.6",
"react-redux": "^5.0.5",
"react-render-visualizer-decorator": "^0.4.1",
"react-router": "^4.1.1",
"react-tinymce": "^0.5.1",
"react-virtualized": "^9.7.6",
"react-xhr-uploader": "^0.3.4",
"recursive-readdir": "^2.2.1",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"semantic-ui-react": "^0.68.5",
"superagent": "^3.5.2",
"slugify": "^1.1.0",
"timeago.js": "^3.0.1",
"timeout-as-promise": "^1.0.0",
"webpack": "^2.6.1",
"webpack-cleanup-plugin": "^0.5.1",
"webpack-dev-server": "^2.4.5",
"webpack-validator": "^3.0.0",
"whatwg-fetch": "^2.0.3",
"why-did-you-update": "0.0.8"
}
}
node version v7.10.0
npm version 4.2.0
I've tried deleting and re-installing node_modules but it doesn't help.
bw2
on 11 Jun 2017
Updating my configs to match the latest create-react-app fixed the above error
bw2
on 18 Jun 2017
seems like react-dev-utils should be released a major version for removing the file but it didn't / you have upgraded it post eject
viankakrisna
on 18 Jun 2017
Is it possible to install other npm modules without breaking the whole project?
uloga
on 1 Jul 2017
Yes, of course. If you have problems please file a new issue with instructions to reproduce.
Note that if you're using npm 5 you're probably hitting one of its many bugs. Please try downgrading to npm 4 in the meantime. npm install -g npm@4
gaearon
on 1 Jul 2017
Found the issue, it was the npm-lock file. Resolve it by adding .npmrc with content of
package-lock=false
uloga
on 1 Jul 2017
The lockfile itself is fine, but npm 5 doesn't handle it correctly yet. Future releases of npm 5 should fix this.
gaearon
on 1 Jul 2017
I have a similar issue. I have tried running the following:
npm install --save-dev react-dev-utils
npm install -g npm@latest
rm -rf node_modules
npm install
These are the error messages I am getting.
JlandMBP:project_jonathanland jland$ npm start
> [email protected] start /Users/sland/Desktop/project_JonathanLand
> node scripts/start.js
internal/modules/cjs/loader.js:583
throw err;
^
Error: Cannot find module 'react-dev-utils/prompt'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/Users/sland/Desktop/project_JonathanLand/scripts/start.js:20:14)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node scripts/start.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start 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! /Users/sland/.npm/_logs/2018-09-27T19_05_33_119Z-debug.log
jonathanlandGit
on 27 Sep 2018
Please file a new issue, we don't track stale issues.
gaearon
on 27 Sep 2018
Related issues
JimmyLv
·
3Comments
oltsa
·
3Comments
alleroux
·
3Comments
adrice727
·
3Comments
DaveLindberg
·
3Comments
Most helpful comment
Isn’t it the very first section in the User Guide? It’s linked from main README, too.
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases