Create-react-app: 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 :smile:

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 :pray:

[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 :smile:

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 :smiley: 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?

[Urthen]

I _believe_ the watcher will operate correctly as all imports will be relative to that directory. I'm not positive though, as I haven't played with trying to break the watcher at all.

Right now I have confirmed a few things, however. Unfortunately, all I've confirmed is I cannot replicate the bug in OSX or Windows.

OSX does allow you to CD into the wrongly-cased directory, and process.env.pwd will report it as such. However, doing path.resolve or __dirname will report the correctly-cased directory. In all my testing, I haven't been able to reproduce the reported create-react-app behavior in OSX - everything seems to work fine regardless of what case directory I am in, and the case sensitivity plugin does not trigger.

Using the default Windows 10 command prompt, I also cannot reproduce the behavior. Attempting to CD into an incorrectly cased directory (e.g. cd pictures when the directory is Pictures) puts me into the correctly cased directory.

Both sets of tests were performed on Node 6.4.

If I can get the correct environment & steps to reproduce, I can take another look. Until then I am hesitant to spend any more time on what I feel is primarily user error.

[richkeenan]

Thanks @Urthen for looking into this in detail.

If I use command prompt I also cannot reproduce this.
If I use Powershell - which a lot of Windows users will use - I can reproduce the error.
If I use Git Bash - which I tend to use - I can also reproduce the error

[Urthen]

Ok, I'm able to replicate with Powershell. It looks like node gives the cwd casing inconsistently across platforms. I believe this is a bug in Node, and have opened one as such: https://github.com/nodejs/node/issues/8237

In the meantime, I'll attempt to do a workaround by checking what is reporting as the current working directory, and allowing that version of case path. This'll have to wait until tonight.

[gaearon]

Thanks to you both for cooperation.

[gaearon]

@Urthen Any luck so far?

[Urthen]

Published case-sensitive-paths-webpack-plugin v1.1.4 which seems to resolve this issue. Tested in Windows and OSX.

[gaearon]

Thanks!

[gaearon]

@Urthen
Can you submit a PR bumping the version so I can credit the change to you in the release notes?

[Urthen]

Just opened #593

[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 [e-mail] 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
https://github.com/facebookincubator/create-react-app/issues/472#issuecomment-274678955,
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-appfrontend-re act:
Error: Cannot resolve directory 'C:\Users\myuser\Documents' in C:\Users\myuser\Document s!GoWorkspace\src\github.com\myuser\my-2017-appfrontend-react

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

Path that works:
C:\Users\myuser\Documents\2Bitbucketmy-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 [email protected] 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 [e-mail]
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
https://github.com/facebook/create-react-app/issues/472#issuecomment-405625618,
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!