Entry module not found: Error: [CaseSensitivePathsPlugin]

[richkeenan]

Hi folks,

I'm getting a compilation error after following the tutorial and running npm start inside my-app.

Html Webpack Plugin:
  Error: Child compilation failed:
  Entry module not found: Error: [CaseSensitivePathsPlugin] `C:\users\myuser\pr  ojects\create-react-app\my-app\index.html` does not match the corresponding pa  th on disk `Projects`.:
  Error: [CaseSensitivePathsPlugin] `C:\users\myuser\projects\create-react-app\  my-app\index.html` does not match the corresponding path on disk `Projects`.

There's some really suspicious whitespace in the middle of the path, not sure if relevant.

Environment:
Windows 10
Node version 6.4.0
npm version 3.10.7
project path, C:/Users/myuser/Projects/create-react-app/my-app (The Projects directory has a capital P which could be relevant)

[richkeenan]

OK, so if I create the app inside a different directory that's all lower case it works fine 😄

Not sure if I should close this, or leave it open - thoughts?

[gaearon]

I think it’s better to create the project inside another directory. The watcher can get tripped by some special directories, and doesn’t detect the changes inside them. I added the plugin to warn in such cases.

[gaearon]

That said the error message is very funny (“child compilation failed”, wat).
We should figure out a way to display a nicer error message for this.

[richkeenan]

Not sure what you mean by 'special directory' but I just created in my regular directory that I have all my git projects in. Just happens to start with a capital P.

[gaearon]

Can you reliably reproduce this with any folder that starts with a capital letter on Windows?
Maybe it’s case-sensitive-paths-webpack-plugin that needs a fix then.

cc @Urthen for thoughts/discussion

[Urthen]

@richkeenan Is there any reference to the 'Projects' directory as lower case in your project? The case-sensitive-paths-webpack-plugin is supposed to only detect when you inadvertently use the wrong case on an import, but without seeing your code, I couldn't say for sure where it is coming from.

[Urthen]

Looking through the code a little bit. "Child compilation failed" comes from html-webpack-plugin itself. The errant spacing looks like it's just an oddity between the console and what appears in the browser - a space appears whenever there is a line break in the console. I'm only able to reproduce the "bug" on my machine if I deliberately change what is in paths.js to a differently-cased filename, for example Index.html. Something, somewhere, must be requesting the improperly-cased path name. Only thing I could think of is oddities with path.resolve in Windows causing it to return the wrong case?

I don't myself develop with create-react-app nor Windows, sorry I can't be more help.

[gaearon]

Only thing I could think of is oddities with path.resolve in Windows causing it to return the wrong case?

That’s what I’m thinking. (Maybe it always lowercases?)

[richkeenan]

@Urthen There's no references to Projects/projects that I've explicted added because I'm just running the create-react-app command.

@gaearon I'm running a few tests now for different directories/casing etc

[Urthen]

@richkeenan You might try going into node_modules/react_scripts/config/webpack.config.dev.js and throwing in a quick console.log('Path', paths.appHtml); to check if that is showing the improperly cased full path.

You'll have to scroll up in your console to see it because create-react-app clears the console window before compilation.

[gaearon]

You'll have to scroll up in your console to see it because create-react-app clears the console window before compilation.

This probably won't work on Windows but you can comment out this line to keep the output.

[richkeenan]

I've tried on a few new directories, some with Upper Case some with lower. They all work fine - it just seems like my original (C:/users/me/Projects/create-react-app) is dead.

Ima try that console log and see what I get 🙏

[richkeenan]

The output from the console log is

Path C:\users\myuser\projects\create-react-app\my-app\index.html

Which looks legit apart from the lower case . There's an error line at the bottom,,

Error in multi main
Module not found: Error: [CaseSensitivePathsPlugin] `C:\users\myuser\projects\create-react-app\my-app\src\index.js` does not match the corresponding path on disk `Projects`.
 @ multi main

[Urthen]

Hrm - so it's definitely requesting the incorrect case. This indicates some path.resolve bugginess since the generation of that path is fairly straightforward. What version of node are you running? Node has had some path casing issues in the past.

[richkeenan]

Node version 6.4.0
npm version 3.10.7

But I was using Node v4.something when I produced the bug originally. I updated thinking it might help

[richkeenan]

Ooohhh! I found why it was inconsistent 😄

I'm using git Bash, if I

cd /c/users/myuser/Projects/create-react-app/my-app
npm start

It works.

If I

cd /c/users/myuser/projects/create-react-app/my-app
npm start

It doesn't work!

[richkeenan]

Having narrowed down the git bash path upper/lower difference I've tried on some new directories with upper and lower case and they all behave consistently:

If the directory on disk starts with Upper Case, but I cd to it with lower case (Windows lets me do this no probs), then npm start fails

[Urthen]

Ok. Well, at least we know the issue. Looks like the current directory, even if the wrong case, is being used in path.resolve.

@gaearon I might be able to check for this specific edge case in my plugin to better clarify the exact cause of the error, think it'd be worth it?

[richkeenan]

Yea it's defos path.resolve. It returns "Projects" when I cd /Projects/ and "projects" when I cd /projects/ even though it's "Projects" on the disk

[richkeenan]

As an experiment I tried using true-case-path,

const path = require('path');
const trueCasePathSync = require('true-case-path')

console.log(trueCasePathSync(path.resolve()));

This prints the path that's on disk - so it doesn't matter whether I've cd'd to Projects, projects, PrOjecTs etc.

If I hack this into ./node_modules/react-scripts/config/paths.js and replace the resolveApp function with,

function resolveApp(relativePath) {
  var resolved = path.resolve(relativePath);
  var truePath = truePaths(resolved);

  return truePath == undefined ? resolved : truePath;
}

This allows the app to start up fine 😃 I'd be happy to do a PR if you're interested? Although I'll need a little help with knowing which package.json needs to change!

[gaearon]

Seems like case-sensitive-paths-webpack-plugin could switch to use true-case-path (or adopt its approach)? We’d need to see how slow it is.

[Urthen]

It's not so much a problem with case-sensitive-paths-webpack-plugin - it is reporting, correctly, that the requested path does not match the one on disk. Under most circumstances (such as import Foo from '../foo' vs import Foo from '../Foo') this is critical to prevent various issues in Webpack.

While looking at true-case-path has given me some ideas how to use glob to possibly make the case-detection algorithm more efficient by eliminating some recursion, it actually wouldn't matter in this case. The path.resolve would still be returning the full path, which is going to be a string representation of an improperly-cased path. It's going to be tough to determine whether or not this is OK in a particular context.

Best I can imagine doing is to update the plugin to attempt to intelligently ignore cases where the path case matches what is in process.env.pwd, even if it doesn't match what is on disk. I am able to replicate at least this portion in OSX (incorrectly cased PWD) so I should be able to get an update to the plugin soon.

[gaearon]

I still don’t understand. If user cds to an incorrectly cased path and runs npm start there, will Webpack watcher experience those problems associated with wrong import? Or will it not because the import itself will also be relative to that directory?

[gaearon]

Haha thanks a lot.

[gaearon]

Likely fixed by #593 and will be out in 0.4.2.
Closing but please reopen if after 0.4.2 comes out you still experience this.

[gaearon]

This should be fixed in 0.4.2.
Please verify!

[richkeenan]

Tested on 0.4.2. Looking great!. Thanks folks

[zhangchf]

This still happens on Mac with version 1.0.3.
import Projects from './Components/Projects'; will not work. but change the Components folder name to all lower case will resolve this issue.

[Urthen]

What is the actual case of the path on disk?

[gaearon]

but change the Components folder name to all lower case will resolve this issue.

Maybe because that's how the folder named on the disk? Then the plugin is working as intended: preventing inconsistencies which break other tools.

[zhangchf]

I checked the path on disk, it's correct, Capital first letter, 'Components'. But it does not work untill I rename it to lower 'components'.

[zhangchf]

Maybe it's a first-time use issue. I tried to rename the 'components' folder back to 'Components' folder, and it works now.

[eminaz]

I don't think it's a first-time use issue. My app is under a sub directory of a folder called "Code", and the app runs fine for a long time until once day I ran into this error:
"Module not found: Error: [CaseSensitivePathsPlugin] /Users/xxx/code/xxx/xxx/xxx/index.js does not match the corresponding path on disk Code."
I had to rename the folder "Code" to something else to make it work. Then I changed the folder name back to "Code" and it also works thereafter. I'm not sure how to reproduce this.

[Urthen]

Is the issue that you've committed the code in one case, then switched cases, and now it doesn't work on another machine?

I've run into that before due to a issue/bug with Git on case-insensitive platforms, where Git won't properly commit a case change unless you explicitly tell it to. The build works fine locally, but on other machines the old case is used and therefore the build fails due to the plugin detecting incorrect case.

[zhangchf]

It's not git related. For me, it happens after I first create the project using 'create-react-app', and create a new 'Components' folder under 'app'. I didn't introduce git into it yet.

[Urthen]

Can you send the entire error message as well as the exact path (Run 'pwd' in shell on *nix based systems)? It sounds like something, somewhere is expecting you to have it lower cased, and using upper case in the folder name is triggering the plugin.

…

On Mon, Jan 23, 2017 at 8:00 PM zhangchf ***@***.***> wrote: It's not git related. For me, it happens after I first create the project using 'create-react-app', and create a new 'Components' folder under 'app'. I didn't introduce git into it yet. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#472 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAb_duXIZa8DzYZseSE1nY9_jcEKVuTWks5rVVtEgaJpZM4JqIft> .

[zhangchf]

Sorry I just realized it is with react-native, but not react-js itself.
Also when I try to reproduce this issue today, it didn't appear for some reason I don't know.

[angelbuenrostro]

Experienced the same issue using react-create-app and attempting to import styled from 'styled-components' .

Fix was as others have said moving the entire project to a lower case directory (C:\lowercase\app ...etc)
It was originally located at C:\Users\MyName ... etc

[jesstelford]

This happens on OSX when creating a project in the home directory (~ which maps to /Users/jess.telford).

The workaround is to cd into an all lower-case version of the directory (because directories on OSX are not case sensitive): cd /users/jess.telford. Then run yarn start.

[Urthen]

@jesstelford That's strange, I and my entire team run it on OSX under the home directory with no issues. I just even checked with node -e "console.log(process.cwd())" and it reported the correct case. What does that command report for you? It's possible the path structure on your machine has gotten inconsistent somehow.

[erocheleau]

I am getting a similar error as the first person who opened that issue.

Just installed the create-react-app and tried to create an app.
A working directory elsewhere copied into that path doesn't work anymore so it seems to indicate a problem with either casing in paths or special characters:

Path that do not work:
Error: Child compilation failed:
Entry module not found: Error: Cannot resolve directory 'C:\Users\myuser\Documents' in C:\U sers\myuser\Documents!GoWorkspace\src\github.com\myuser\my-2017-app\frontend-re act:
Error: Cannot resolve directory 'C:\Users\myuser\Documents' in C:\Users\myuser\Document s!GoWorkspace\src\github.com\myuser\my-2017-app\frontend-react

(I'm also getting those suspicious white spaces in the error messages.

Path that works:
C:\Users\myuser\Documents\2Bitbucket\my-app

On windows 10

[cesarvarela]

Just happened to me, renamed a folder to lowercase and it worked, but I'm not sure if that was actually what fixed it.

It was after installing the styled-components module.

[cesarvarela]

Happened again after installing another module.

Stopping and re-starting the dev server fixes it.

[Urthen]

I published case-sensitive-webpack-modules-plugin@2.1.1 which may fix some of these issues. Need people to try it out locally before I open a PR to add it to create-react-app

[stramel]

@Urthen has this been fixed? I just ran into the issue on v2.1.1

[Urthen]

@stramel You're the first to report it not working, what error are you seeing exactly?

[controversial]

Doesn't work for me on 2.1.1 either @Urthen (macOS 10.14 developer beta), I get the following error:

./src/components/StyleGuide/index.js
Module not found: `/Users/luke/Projects/.../ImageUpload/index.js` does not match the corresponding path on disk `Upload`.

(ellipsis mine)

[Urthen]

Hrm, that's definitely a first. Was a file or folder named 'Upload' ever in the folder path anywhere, either on disk or in a require? Is there a symbolic link or anything that might confuse it?

The code uses the standard path.basename() and path.dirname() functions to grab file/folder names, and webpack's built in inputFileSystem to grab file names, so I'd be surprised if it was parsing paths incorrectly - but you never know what's happening.

[controversial]

We found the issue — the folder called “Upload” had been renamed to lowercase “upload,” and the require paths changed, however since macOS is case insensitive the change never appeared in a git diff and so never got committed, and when I cloned the repository it still had a folder named “Upload” even though the require paths had been changed to read “upload.”

…

On Tue, Jul 17, 2018 at 11:34 AM Michael Pratt ***@***.***> wrote: Hrm, that's definitely a first. Was a file or folder named 'Upload' ever in the folder path anywhere, either on disk or in a require? Is there a symbolic link or anything that might confuse it? The code uses the standard path.basename() and path.dirname() functions to grab file/folder names, and webpack's built in inputFileSystem to grab file names, so I'd be surprised if it was parsing paths incorrectly - but you never know what's happening. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#472 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJ5Yrw_jBRIoI5ar4wNmPIw_pxmKHErbks5uHgPrgaJpZM4JqIft> .

[Urthen]

Ah, yeah, that's definitely been a problem before - and exactly why the plugin exists!