Create-react-app: Module not found: Can't resolve '../components/Overlay' on starting server

Created on 1 Sep 2017  路  21Comments  路  Source: facebook/create-react-app

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

I'm using yarn 0.27.5

Which terms did you search for in User Guide?

N/A

Environment

  1. node -v: v8.2.1
  2. npm -v: 5.3.0
  3. yarn --version (if you use Yarn): 0.27.5
  4. npm ls react-scripts (if you haven鈥檛 ejected): 1.0.12

Then, specify:

  1. Operating system: Mac OS X 10.12.6
  2. Browser and version (if relevant):

Steps to Reproduce

  1. run dotenv npm run start

Expected Behavior

Server starts running.

Actual Behavior

Receive the following error:

Failed to compile.

./node_modules/react-error-overlay/lib/containers/CompileErrorContainer.js
Module not found: Can't resolve '../components/Overlay' in '/Users/jason/nob/messages-frontend-prototype/node_modules/react-error-overlay/lib/containers'

Reproducible Demo

None at the moment.

Note: Downgrading to react-scripts 1.0.11 works great.

bug

Most helpful comment

The issue is because we replaced overlay.js with Overlay.js, and FS gets confused.
Let's just completely rename this file to something else. e.g. ErrorOverlay.js.

All 21 comments

Can you run

rm -rf node_modules
npm i

and try again?

@gaearon That does fix the issue. But yarn upgrade react-scripts should have worked fine right?

Also ran into this issue. Yarn install, then Yarn Start to launch Development Server. I have the same environment as the author and same error message.

Resolution:
Deleted the node_modules and the yarn.lock file. Yarn install, yarn start. Works perfectly now.

It's not working because the filename casing is different but OS probably didn't recognize that.
I think we can fix it.

@gaearon you mean by renaming the file to old name?

The issue is because we replaced overlay.js with Overlay.js, and FS gets confused.
Let's just completely rename this file to something else. e.g. ErrorOverlay.js.

Do,
npm install
or
yarn install if you are using yarn

It solved problem on my system

I just upgraded to 1.0.13 and got this error when I copied and pasted yarn add --exact [email protected] from the release notes.

I went back and ran yarn upgrade react-scripts and it fixed the issue.

I was on 1.0.10 and then I ran yarn add --exact [email protected] and yarn add --exact [email protected]
both of them gave me this error. I'm trying to reinstall all modules now

update: it works!

Yes, you'll still have the issue if you even try to upgrade to 12. That's why we recommend skipping it and going directly to 13.

But in any case removing node_modules and reinstalling will fix it.

I just tried everything posted here, and nothing works! My project was ejected with react eject. Can it be a problem? I get this error at running yarn start:

module.js:471
    throw err;
    ^

Error: Cannot find module 'react-error-overlay/middleware'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/balazs/github/bibic-vendeghazak/config/webpackDevServer.config.js:3:32)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/balazs/github/bibic-vendeghazak/scripts/start.js:32:31)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: write EPIPE
    at exports._errnoException (util.js:1020:11)
    at WriteWrap.afterWrite (net.js:800:14)
error Command failed with exit code 1.

@balazsorban44 if you've already ejected perhaps try rolling back react-error-overlay to an older version.. "react-error-overlay": "^1.0.10" works for me

@balazsorban44 If you look closely at your error message, it is not the error message discussed in this thread. Please search issues for it鈥攕omebody already filed another issue about it. If you see this message it means you updated react-error-overlay to incompatible major version. Did you do this intentionally? It is expected that if you update packages to major versions, they will have breaking changes. Please don't update them if you haven't checked what changed.

After upgrading to [email protected] this issue arises to me as well.

```> node scripts/start.js

module.js:491
throw err;
^

Error: Cannot find module 'react-error-overlay/middleware'
at Function.Module._resolveFilename (module.js:489:15)
at Function.Module._load (module.js:439:25)
at Module.require (module.js:517:17)
at require (internal/module.js:11:18)
at Object. (/home/devserve/ankServe/walkOrder/admin-panel/config/webpackDevServer.config.js:3:32)
at Module._compile (module.js:573:30)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
at tryModuleLoad (module.js:470:12)
at Function.Module._load (module.js:462:3)
at Module.require (module.js:517:17)
at require (internal/module.js:11:18)
at Object. (/home/devserve/ankServe/walkOrder/admin-panel/scripts/start.js:32:31)
at Module._compile (module.js:573:30)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
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! /home/devserve/.npm/_logs/2017-10-01T18_53_03_730Z-debug.log
```

I had errors with react-error-overlay/middleware, I had upgraded them which caused errors.

My fix was to downgrade.

react-error-overlay to 1.0.9
react-hot-loader to 3.0.0-beta.7

Steps:
yarn remove react-error-overlay -D (remove from devDependencies)
yarn add [email protected] -D

yarn remove react-hot-loader -D (remove from devDependencies)
yarn add [email protected]

Having same problems on

  • Windows 10 x64
  • node 8.5.0 and 8.6.0 (tried both)
  • npm 5.3.0
  • react-scripts 1.0.13 and 1.0.14 (tried both)
  • I did not eject app

(on macOS High Sierra works ok -- problems appears on Windows)

image

also

image

pls hlp!!!!

----- UPD

to everyone having same problem: when I thought I tried everything (reinstalling node, npm, packages) someone told me to restart windows and that worked ;)

I've had something similar happening with a project attempting a react 16 upgrade - getting the following error:

./node_modules/react-error-overlay/node_modules/react-dom/lib/ReactMount.js
Module not found: Can't resolve 'react/lib/React' in '/Users/zach/Sites/rhinofront/node_modules/react-error-overlay/node_modules/react-dom/lib'

I've tried deleting node_modules and clearing npm cache without any luck.

Doing some research around that error (like this one) it looks like there might still be a 16 incompatibility with that module, but the package itself should support it just fine.

I have the same error in "react-error-overlay": "^3.0.0" with React 16.2.0
image

After I re-create the whole scripts is OK.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

DaveLindberg picture DaveLindberg  路  3Comments

barcher picture barcher  路  3Comments

Evan-GK picture Evan-GK  路  3Comments

fson picture fson  路  3Comments

alleroux picture alleroux  路  3Comments