Create-react-app: images with non-ascii names don't appear in dev mode

[vgrigoriu]

Can you reproduce the problem with latest npm?

Yes.

Description

In dev mode, images in src which are imported and have non-ascii characters in their names are not loaded. The problem does not appear in production builds

Expected behavior

Tell us what you think should happen.

Actual behavior

Tell us what actually happens.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected):

   [email protected]

2. node -v:

   v7.1.0

3. npm -v:

   4.0.2

Then, specify:

1. Operating system: Windows 10
2. Browser and version: Edge, Firefox, Chrome

Reproducible Demo

https://github.com/vgrigoriu/diacriticsInFilenames/

Just yarn start to see the issue. There are two identical images, one named Petiole.jpg (which works just fine) and one named Pétiole.jpg which doesn't load. I noticed that this doesn't happen for smaller images, which are converted to data urls.

[gaearon]

Thanks for reporting. Likely a bug in Webpack.
In the meantime please use ASCII for filenames when possible.

[gaearon]

Tagging as 0.9.1—not because we'll fix it, but because we should at least report it upstream to the project causing it, whether Webpack or something else. Once we report it I'm happy to untag it.

[Timer]

We'll have to test if webpack 2 fixes this.

[Timer]

@vgrigoriu can you test if master fixes this?

[vgrigoriu]

Can you point me at instructions on how to use master?

[gaearon]

You can clone the project, run npm install and npm start. This will run the development server with the default template. You can then edit it in packages/react-scripts/template.

[vgrigoriu]

Thanks, I'll give it a try and let you know.

[vgrigoriu]

It seems to have exactly the same behavior as before. The img with diacritics generates a url like http://localhost:3000/static/media/P%C3%A9tiole.f885429e.jpg, but the development server returns the home page for it.

[gaearon]

Would you like to help us by filing a bug in Webpack?

[Timer]

We can ping @bebraw if he's not too busy and ask if he has a suggestion or reason for this (he cut the last release for file-loader). Thanks in advance!

[bebraw]

Hi,

I forwarded this to @SpaceK33z as he knows more about WDS. It might be something there.

[vgrigoriu]

Should I still open the bug in Webpack?

[bebraw]

Maybe better wait for @SpaceK33z to comment, but do as you want. 👍

[SpaceK33z]

Just a note that I haven't forgotten this, it's on my list to research soon. It's _probably_ a bug in webpack-dev-middleware.

[SpaceK33z]

Okay, found the issue in webpack-dev-middleware and released a new version. Thanks @vgrigoriu for providing a repository, that really helped with narrowing down the issue quickly (I wish everyone would do that 😄 ).

[gaearon]

Since this is a transitive dependency, I’m guessing we can close this. New installs shouldn’t have this problem.

[gaearon]

@vgrigoriu Thanks for reporting.
@SpaceK33z Thanks for fixing.

[vgrigoriu]

I confirmed that it is indeed fixed with webpack-dev-middleware 1.10.1. Thanks everyone for your help.