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.

Here is a issue on CRA repo for this: github.com/facebook/create-react-app/issues/10022 — Dario Seidl

Zrizi Zrizi · Accepted Answer · 2021-07-26T17:55:29

I think it is deprecated in CRA 4, (after all.. it was a breaking change..) there are some workarounds using craco but I suggest to move these files to the src folder.

Create React App 4.0 cannot resolve image path in public folder

2 Answers