Watcher doesn't see a new file called "index.js" inside a subfolder

[BenoitAverty]

Description

I have an app with this folder structure :

src
├── App
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.js
│   └── logo.svg
├── index.css
├── index.js

Inside the index.js file, I have this line :
import App from './App

Which causes this error :

Failed to compile.

Error in ./src/index.js
Module not found: [CaseSensitivePathsPlugin] `/home/benoit/Development/react-spring-template/client/src/App.js` does not match the corresponding path on disk - File does not exist.

When I add a / at the end of the path, then it works.
import App from './App

Is there a reason why the folder import doesn't work without a trailing slash, or is this a bug ?

Expected behavior

I should be able to import something from the index.js file of a subfolder without putting a trailing slash at the end of the folder.

Actual behavior

I need to put a trailing slash at the end of the import statement if it's a folder.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected):

npm ls react-scripts
[email protected] /home/benoit/Development/react-spring-template/client
└── [email protected]

2. node -v:
   v7.2.0
3. npm -v:
   4.0.2

Then, specify:

1. Operating system: Archlinux
2. Browser and version: Chrome

[gaearon]

Can you consistently reproduce this, after stopping and starting the development server again?

[BenoitAverty]

Oh wow, that was the problem. Sorry about that, I didn't think of that.

[gaearon]

No worries. This is kinda weird—my guess is that it remembers that it couldn't find the file with that exact name, and later gives up searching for it again. Not very good so if you find an easy way to reproduce this step by step (e.g. create a file with some name, then add an import with some form) and it always happens, maybe we should file a bug in one of the upstream projects. Please let me know!

[BenoitAverty]

Ok so i've successfully reproduced, it's very easy in fact.

• Create an app from scratch
  create-react-app test-failing-import
• Start the development server
  cd test-failing-import && yarn run start
• Move the App component and its dependencies in a subfolder
  mv App.* logo.svg App/
• Create the index.js file in the subfolder

cat > App/index.js
import App from './App'
export default App

• Refresh browser. You get the error. Change the import in the root index.js to ./App/ or ./App/index and the error goes away.

If I get some more time i'll try to reproduce with webpack-dev-server without react but it may be specific to a particular setting that's use in create-react-app.

[lixiaoyan]

same here, i can reproduce this problem with my own webpack config.
so i think this is a bug of webpack rather than create-react-app.

[gaearon]

Yes, it's a Webpack bug. We are keeping the issue open because it affects CRA experience and ideally we'd like to remember to come back to this at some point and figure out a solution. If you'd like to help please let us know!

[mileung]

Any progress on this issue?

[gaearon]

No, progress doesn’t happen without somebody pushing for it. 😉

I tagged issue as needing contributors. If you’d like to help, you’ll probably need to figure out where this breaks on Webpack side. I don’t know if this is even feasible to fix or not.

[gaearon]

(Just in case you missed it, the workaround is to restart the development server. But it would be nice if this “just worked”.)

[sebcode]

Possibly related to webpack/webpack/issues/1533

[gideondsouza]

is this issue really the cause cause for this problem:
https://stackoverflow.com/a/43281575/368070
reload on change stopped working for me, but I also don't have an App but an index.html which loads an app.js

Any ideas?

[gaearon]

OK, I filed this in webpack: webpack/webpack#6262

We can close this because it's not actionable for us. If it gets fixed upstream we'll get the fix.