Skip to content
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

Jump to bottom

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

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

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

BenoitAverty opened this issue Dec 5, 2016 · 12 comments
Labels
contributions: up for grabs! difficulty: complex issue: bug tag: underlying tools

Comments

@BenoitAverty
Copy link
Contributor

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
Copy link
Contributor

gaearon commented Dec 5, 2016

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

@BenoitAverty
Copy link
Contributor Author

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

@gaearon
Copy link
Contributor

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
Copy link
Contributor Author

BenoitAverty commented Dec 6, 2016 •
edited

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 Cannot import a module with "index.js" inside a subfolder Watcher doesn't see a new file called "index.js" inside a subfolder Dec 6, 2016
@gaearon gaearon mentioned this issue Dec 12, 2016
Closed
@lixiaoyan
Copy link
Contributor

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
Copy link
Contributor

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!

@mileung
Copy link

mileung commented Mar 7, 2017

Any progress on this issue?

@gaearon
Copy link
Contributor

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
Copy link
Contributor

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
Copy link

sebcode commented Mar 7, 2017

Possibly related to webpack/webpack/issues/1533

@gideondsouza
Copy link

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 gaearon mentioned this issue Jan 8, 2018
Closed
@gaearon
Copy link
Contributor

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 as completed Jan 8, 2018
@lock lock bot locked and limited conversation to collaborators Jan 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
contributions: up for grabs! difficulty: complex issue: bug tag: underlying tools
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@sebcode @gideondsouza @gaearon @lixiaoyan @mileung @BenoitAverty