CRA 4 fails to compile when css background-image ulr('url') not resolved

[a-tonchev]

I have a css file that is imported in my react app, it is something like:

styles.css

.flag { ... background-image: url("/img/flags.png") !important; }

It is imported in my react file -> import './styles.css';

In the previous version of CRA it works well, and when I build the app it was also okay, since I have the /img/flags.png in my 'public' directory.

After CRA 4 it fails to compile

Best regards

[pascalstr]

This guide still works: https://create-react-app.dev/docs/adding-images-fonts-and-files

You should not link to the public folder in your src or css. Create a static directory in your src folder and do like:

background-image: url("./static/img/flags.png");

[saeed-rohani]

@pascalstr, Your solution works, but I have to move all the assets that do not need to be in the src folder, such as images, videos, fonts, and so on. Also, all of these will beside together in the media folder that CRA created by default and is not customized for production.

[a-tonchev]

@pascalstr Thanks that works for me!

[pascalstr]

@saeed-rohani #9937 seems to be a similar issue, maybe close this in favour of #9973

[makis-spy]

This guide still works: https://create-react-app.dev/docs/adding-images-fonts-and-files

You should not link to the public folder in your src or css. Create a static directory in your src folder and do like:

background-image: url("./static/img/flags.png");

@saeed-rohani The guide makes sense but how would you reference an image in an inline style to do something like this:

style={{backgroundImage:"url(/img/example.png)"}}

in this case static will not work and the use case being...

style={{backgroundImage:"url(/img/example-"+var+".png)"}}

Cheers

[makis-spy]

I'm surprised this isn't a show stopper for more people. Any light on a work around or approach I'm not getting would be helpful.

Cheers!

[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.

[bazo]

any progress on this? i just spent too many hours figuring why my app won't suddenly compile after upgrading react scripts

[sagar7993]

I'm surprised that more people haven't realised that this is a major concern for SEO.

Lets say that you have a image file within the src folder, and you're using it within your CSS file like this -

.Profile {
text-align: center;
background-image: url("../../images/user/profile.png");
}

If this profile.png file is inside the src > images > user directory, then while creating a build with react-scripts, the URL generated for this file will be something like this -

https://{my-domain.com}/static/media/profile.{hash}.jpg

This {hash} value changes with every build. Therefore, if you use this in a static website, and if your website is crawled by google bot, you may see 404's reported in the google search console the next time you deploy, because Google can take several weeks before indexing your site again.

This is where an image in the public folder would have helped, because that URL will never change, and can safely remain indexed in search engines.

[walterdl]

Same error over here. In CRA 3.4 it just was worked fine. :(

[klepon]

Hi, I am new in issue discussion
what the result to fix?
my case is using react as one of cms page content, all the assets relative to domain with year/month folder organiser, can not put it on static folder
any clue?

[maciejgaciarz]

Hey for quick fix you can use craco (https://github.com/gsoft-inc/craco/tree/master/packages/craco)

install per instructions. In my case im using .cracorc file.

Put this inside .cracorc:
module.exports = { reactScriptsVersion: "react-scripts", style: { css: { loaderOptions: () => { return { url: false } } } } }

Save, when launched with changed package.json (see craco install instructions) with CRA 4.0 .scss properly resolves from public just like before

[Cochonours]

Is there no better fix than using yet another package with yet another configuration file?

Moving my assets into src doesn't work (and I don't like the idea anyway), whether I use url("/aze"), url("./aze") or url("aze"). I'm going to try downgrading now but this sucks.

[artemlatark]

What changes are planned in this regard?

[mobeigi]

I ran into this issue too. I was previously using something like:
background: #000 url("/images/bg/bg.jpg") repeat;

Inside of /src/App/app.css. I ended up moving all the static/global CSS files I use to /public/css/* instead and use them in /public/index.html like so:

<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/slate.css">  
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/SlateOverrides.css">

Now all my static CSS files sit inside the public folder and in my actual App I use JS imports / styled components to style everything else. This seems to be the intended best practice.

[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.

[Morta1]

This is still an issue.
with react-scripts v3, the same import have worked for me, but now I'm getting this error:
Uncaught Error: Cannot find module '../../../../assets/images/game/enchants/types/major.png'

(The file is in public/assets/images/game...)

[djwadhwa]

Closing in on almost 36 months since this issue was opened. I would be interested in creating a pull request to resolve this but am not sure where to start, any recommendations on how I could begin to get this fixed?