Create React App 4.0 cannot resolve image path in public folder

Question

I have upgraded to the latest Create React App 4.0. Now the scss cannot resolve image assets in the public folder. I was using CRA 3.4.1 before. It worked fine.

Any ideas? I don't want to use npm eject

The icon.svg is in public/images

background-image: url(/images/icon.svg);

Failed to compile.

./src/Components/style.scss 
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
./node_modules/postcss-loader/src??postcss!
./node_modules/resolve-url-loader??ref--5-oneOf-6-3!
./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!
./src/Components/style.scss)
Error: Can't resolve '../../../../../../icon.svg' in ''

In Create React App 3.x, referencing an image from the public folder in (S)CSS worked by simply using a starting slash, as has been been answered here.

As the OP has explained, the image is in public/images and is being referenced as url(/images/icon.svg).

This doesn't work in Create React App 4.0.0 anymore and gives the error message Error: Can't resolve '../../../../../../icon.svg' in ''. The changelog of Create React App doesn't mention a breaking change regarding the public folder.

Answer 1

Try to change to this: (webpack should resolve this to the 'real' path)

background-image: url(./icon.svg);

I know you wanted to add the image as a background-image css property, but maybe another approach is relevant for you.
When you import like this you use it exactly as you would use a normal Component:

import { ReactComponent as Icon } from'<path_to_resource>/images/icon.svg';

<Icon />

Source: https://create-react-app.dev/docs/adding-images-fonts-and-files/