New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
BenoitAverty opened this Issue Dec 5, 2016 · 12 comments

Comments

Projects
None yet
6 participants
@BenoitAverty
Contributor

BenoitAverty commented Dec 5, 2016

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
client@0.1.0 /home/benoit/Development/react-spring-template/client
└── react-scripts@0.8.1
  1. node -v:
    v7.2.0
  2. npm -v:
    4.0.2

Then, specify:

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

This comment has been minimized.

Member

gaearon commented Dec 5, 2016

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

@BenoitAverty

This comment has been minimized.

Contributor

BenoitAverty commented Dec 5, 2016

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

@gaearon

This comment has been minimized.

Member

gaearon commented Dec 5, 2016

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

This comment has been minimized.

Contributor

BenoitAverty commented Dec 6, 2016

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.

@gaearon gaearon reopened this Dec 6, 2016

@gaearon gaearon changed the title from Cannot import a module with "index.js" inside a subfolder to Watcher doesn't see a new file called "index.js" inside a subfolder Dec 6, 2016

@lixiaoyan

This comment has been minimized.

Contributor

lixiaoyan commented Jan 4, 2017

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

This comment has been minimized.

Member

gaearon commented Jan 4, 2017

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!

@gaearon gaearon added the issue: bug label Jan 4, 2017

@MiLeung

This comment has been minimized.

MiLeung commented Mar 7, 2017

Any progress on this issue?

@gaearon

This comment has been minimized.

Member

gaearon commented Mar 7, 2017

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

This comment has been minimized.

Member

gaearon commented Mar 7, 2017

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

@sebcode

This comment has been minimized.

sebcode commented Mar 7, 2017

Possibly related to webpack/webpack/issues/1533

@gideondsouza

This comment has been minimized.

gideondsouza commented Nov 26, 2017

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

This comment has been minimized.

Member

gaearon commented Jan 8, 2018

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.

@gaearon gaearon closed this Jan 8, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment