Inconsistent filename casing breaks the watcher

Question

Inconsistent filename casing breaks the watcher

thedjpetersen opened this issue 8 years ago · 10 comments

I am working on setting up a basic site on this and I want to split up my components into subdirectories. Do I have to eject and modify the webpack config to get the hot reloading working correctly?

Answer 1 · 2016-07-27T15:03:52.000Z

Not sure I understand. You should be able to create any number of subdirectories inside src.

Answer 2 · 2016-07-27T15:21:19.000Z

Sorry I should have phrased it better. I am working on modularizing and I have tried to add things into their own subdirectories. When I save on any of these files though it doesn't seem to trigger a recompilation, only saves on the root level javascript files.

I was wondering if I needed to eject the config in order to get it to recompile on any save in the src/ directory and it's subdirectories.

Answer 3 · 2016-07-27T15:31:02.000Z

Everything inside src including subdirectories should be watched.

Is there any chance, however, that the name you’re importing has a different casing from the filesystem name?

For example, could it be that your file or directory is called something but you’re importing Something or vice versa? I’ve seen this trip the watcher.

Answer 4 · 2016-07-27T15:35:52.000Z

Thanks! Should have looked a little closer - that was it.

Answer 5 · 2016-07-27T15:37:20.000Z

That’s our fault. We should warn/err in such cases, at least in user code.
It’s weird that webpack tolerates it.

Answer 6 · 2016-07-27T16:32:16.000Z

@gaearon were you thinking of something like this? https://github.com/Urthen/case-sensitive-paths-webpack-plugin

Answer 7 · 2016-07-27T17:25:18.000Z

This looks nice!
I’m not a big fan of the error message with the plugin name but I’d like to give this a try.
Would you want to submit a PR?

Answer 8 · 2016-07-27T17:29:42.000Z

Absolutely! I'll see if I can get it to work.

On Wednesday, 27 July 2016, Dan Abramov notifications@github.com wrote:

This looks nice!
I’m not a big fan of the error message with the plugin name but I’d like
to give this a try.
Would you want to submit a PR?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#240 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAFuONtnfJa1igZqtD5dKuZL5qXSTbZRks5qZ5R_gaJpZM4JWSYv
.

Answer 9 · 2016-08-01T15:06:52.000Z

This should be fixed in new version—we now should warn if you attempt to import a file with invalid casing. Can you please verify that this is fixed? Please find the upgrade instructions here.

Answer 10 · 2017-04-24T03:54:21.000Z

Somehow errors are showing up while I don't expect them to. Let me list out the steps:

install create-react-app, create application, was working properly with npm run start and everything
finished the app
merge this new app into an existing git repo
- method A: copy package.json, public/, src/, and yarn.lock to my current git repo folder. npn install && npm run start. works fine. then stop server with control+c. then I git checkout another branch and went back. and then npm run start and it's throwing error Error in multi main Module not found: [CaseSensitivePathsPlugin] '/Users/.../src/index.js' does not match the corresponding path on disk 'Index.js'.
- method B: copy .git/ folder from my current repo to the original create-react-app folder. git commit and git push. works fine with npm run start. but when I stop dev server, git checkout other stuff and came back, it's also throwing the same error.

What I found:

changing Index.js to index.js solves that error, but all other paths are broken. I haven't gone around to changing all my containers and components paths.