react-scripts v4.0.0 causes local images to not load

[douglasrcjames]

Describe the bug

Upgrading from v3.4.4 to v4.0.0 (using npm install react-scripts@latest) causes my local images (using src={require("../../assets/images/logo/logo-v4.png")}) to not load, however external images load. (see StackOverflow post here ) Fixed by simply downgrading to v3.4.4.

Environment

Tested using MacOS Catalina v10.15.7 and Windows 10 on Chrome Version 86.0.4240.111

[PupoSDC]

In absolute terms, where are these images located? inside or outside the src folder?

[douglasrcjames]

Inside src folder

[Acarye]

downgrade the version of react-scripts, thats works for me. I downgrade to 3.4.4 .

[Letcheverry]

I recomend to downgrade react-scripts to 3.4.4 that bug does not happened anymore with that version, i hope that they fix that bug in the next patch

[n3tr]

I have submitted a PR to fix this issue in #9934

[qiqiboy]

try const logov4 = require("../../assets/images/logo/logo-v4.png").default or import logov4 from "../../assets/images/logo/logo-v4.png"

[greggman]

I don't know if this is the same issue but in 3.x this worked

+-public
|  +-images
|  |  +-abc.svg
|  +-index.html
+-src
  +-app.js
  +-app.css

Where app.js does import './app.css'; and app.css does foo { background url("/images/abc.svg"); }

Works in 3.x, fails in 4.0 with

./src/app.css
Error: Can't resolve '/images/abc.svg' in '/Users/gregg/temp/test/src'

[MobeenAshraf]

@greggman how/have you fixed this?

[greggman]

For now I just reverted to 3.x I haven't had time to check if @n3tr 's patch is related or not

[littlee]

I have to use require('./to/img/a.png')?.default 😢

[trainto]

I can confirm this issue.
I tried to upgrade CRA 4.0.0 and images are not loaded.

[arjunkomath]

+1 images are not loading after upgrading to react-scripts 4.0.0

[Arnaudpagn]

same here, updated to react-scripts v4.0.0 and images are not loading anymore
all my img sources are in the src folder and I call them via src={require("./img/example.svg")}
React scripts v3.4.4 works fine

[Deivi2]

Issue still there

[brienpafford]

Issue is still here -- thank you.

[greggman]

Some of us have 3rd party things in our public folder that are not part of the build. We used to be able to reference those things. Now we can't

[vishnusajev]

Just use normal import import logo from '../../assets/images/logo/logo-v4.png' it should work. For some reasons require is importing images as modules.

[douglasrcjames]

How is this still an issue? Was this intended? Do I need to update all my projects using require() to load images? I am now getting a high severity vulnerability with immer package that depends on react-scripts and it wants me to update react-scripts to at least 4.0.3.

[lewatt23]

I have this issue too I spend a day on it, this should be fixed......

[suhailalopa]

how do we solve the problem for loading images dynamically, say my image name depends on a variable

require("../../assets/images/others/"+loginBgImage)

loginBgImage can have different values (login-image.jpg, login-new-image.jpg)

this got fixed using require("../../assets/images/others/"+loginBgImage).default

[chuckponzi]

try const logov4 = require("../../assets/images/logo/logo-v4.png").default or import logov4 from "../../assets/images/logo/logo-v4.png"

this worked for me with react-scripts 4.0.3

I was also seeing that immer version warning when i rolled back to 3.4.4

[alyssaruth]

Ugh, I've been hit by this too. Spent longer than I care to admit trying to figure out what the problem was. I had a broken serviceWorker to deal with as well - and mistakenly thought both were the same problem 🤦

Adding the ?.default works for me too on 4.0.3.

[stryker2k2]

Bump. Not fixed. Currently using require('../images/img-9.jpg').default to display images as a work around.

[Saurav-Nepal]

Try this it will definitely work
src={process.env.PUBLIC_URL + your image URL}

[Saurav-Nepal]

Bump. Not fixed. Currently using require('../images/img-9.jpg').default to display images as a work around.

Try this it will definitely work
src={process.env.PUBLIC_URL + your image URL}

[HipSiGa]

Bump. Not fixed. Currently using require('../images/img-9.jpg').default to display images as a work around.

Try this it will definitely work
src={process.env.PUBLIC_URL + your image URL}

Nice work for me! Thanks.

[k-funk]

Importing file types that are supported (png, svg, etc), works. But in 3.x I would use requires to get urls of non-supported files like .csv. Changing my requires to use .default at the end is the solution I'm going with for now, but I'd prefer to use es6 imports import someFileUrl from '../../data.csv', so I don't have to disable the @typescript-eslint/no-require-imports lint rule.

Using process.env all over my repo, in render methods, is rather gross. As is using global variables like process unless absolutely necessary.

[nnmquang]

I have to use require('./to/img/a.png')?.default 😢

Thanks, i used this way and it's running ok

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[kens-visuals]

This issue is still present in v5.0.0

[alex-cleo]

This issue is still present in v5.0.0

I stumbled over this issue because after the upgrade from v4.0.3 to v5.0.0 some of my imports broke.

I discovered the following with image require calls in v5.0.0:

• PNG and JPG images don't require the addition of .default anymore. With .default the variable is undefined.
• SVG images still need the addition of .default. Without it the variable looks like this:

{
    "default": "/static/media/someSvg.34f11025103557d5898b89cf772fcb3e.svg",
    "ReactComponent": {}
}

Importing it normally worked for both cases. I didn't test any other file extensions.

I'm wondering if there's any documentation for this.

EDIT: Found the definition:
react-app.d.ts

[woowalker]

This issue is still present in v5.0.0

it seems to be no, v5.0.1 in my case, require png with default get undefined, direct require get normal base64, in v4 i almost totally use require.default, but now seems to should remove them all, it is a tough work. by the way, i have reject the project, i don`t know if it makes a difference

[Aadil-Raja]

issue still present