Compilation error with react-scripts 4.0.0 ( Can't resolve file )

[masbaehr]

latest update of react-scripts to 4.0.0 from 3.4.4 causes a compilation problem.
With 3.4.4 it works, and the file exists

./src/styles/mycssfile.css
Error: Can't resolve '/images/module/filename.png' in 'D:\dev\workspace\xxxxxxxxx\src\styles'


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xxxxxxxxxxxxxxx@1.0.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the xxxxxxxxxxxxx@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxxxxxxxxxxxxx\AppData\Roaming\npm-cache\_logs\2020-10-23T16_16_47_530Z-debug.log

[efeichen]

Having a similar issue but with sass url() imports of images in the /public folder

[jrr]

What does the import line look like? What kind of file is it in?

I had the same url() issue as @efeichen and fixed it by moving images to src/.

[efeichen]

@jrr background-image: url(/contact-clip.svg); it's in a sass file in /src/scss

I'd like to move the images to src/ since I believe the relative path from the sass file to the image is working (but can't do that for images in public because of the can't import from outside src restriction), but I'd prefer not to unless absolutely necessary (I have a fairly large public folder). Thanks for the tip though!

[gerard0jr]

I have the same problem with SCSS and CSS files (images and fonts). In 3.x.x works but now it says it can't resolve the file in src.

[hmtri1011]

I also have a problem when loading fonts from public folder. It did work in 3.x.x

[myfatemi04]

I had the exact same issue, it started just today when I upgraded to 4.0.0

src: url(/fonts/josefin-sans-regular.ttf)

And it leads to the error:

Error: Can't resolve '../fonts/josefin-sans-regular.ttf' in '.\frontend\src\scss'

[valtism]

I had this error on a project that was using absolute imports. It seems like setting NODE_PATH=src/ in the .env file is no longer supported. I instead had to use a jsconfig.json as described here: https://code.visualstudio.com/docs/languages/jsconfig

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

[llamamoray]

I'm also seeing this issue where we have an image in /public but it's not getting resolved when reference in css using url:

.background-image { background: url('/bg.jpg'); }

Error:

./src/styles/style.css (./node_modules/css-loader/dist/cjs.js??ref--4-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/styles/style.css) Error: Can't resolve '/bg.jpg' in '/mnt/c/git/application/src/styles'

[KittyGiraudel]

Can confirm this happens with url() calls in @font-face directives as well as per react-scripts@4.0.0. For instance:

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('Nunito Bold'), local('Nunito-Bold'), url('/fonts/nunito.woff2') format('woff2');
}

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Can't resolve '/fonts/nunito.woff2' in '/Path/To/Project/src'

---

Edit: I dug into the changelog and I’m a little confused as to why it stopped working since css-loader and postcss-loader were not updated css-loader was in fact updated.

It looks like this is caused by the css-loader migration to v4: webpack-contrib/css-loader@bc19ddd#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L128.

Originally, a root-relative path like /foo/bar.ext would remain untouched, but as per css-loader@4 it becomes processed:

[upadmdh]

To be fair, there was a warning in v3.4.4

But this does not solve the style issues using url() referencing images from public folder

[egor-xyz]

We are using another repo folder for the assets. I'm getting an error:

./src/components/HTMLPreview/HTMLPreview.module.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/HTMLPreview/HTMLPreview.module.scss)

Error: Can't resolve '../../assets/iphone.svg' in '.../src/components/HTMLPreview'

How can I disable this validation and use this path?
Worked in v3.4.4

[x5engine]

this is crazy! no testing seriously? I broke a production app before deploying thank God!

you have not even mentioned this anywhere??