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

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

Issue still there

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

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

Issue is still here – thank you.

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'

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

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

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

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.

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

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

This issue is still present in v5.0.0

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

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