CSS error source-map information is not available at URL() declaration (found orphan CR, try removeCR option)

Question

I am having a problem when I execute NPM start in my project. I get this error message:

./src/assets/base.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/react-scripts/node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/base.scss)
Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option)

Answer 1

Open the file *.css and select end of line sequense to LF (in my case I have change from CRLF to LF) in IDE.

Answer 2

There can be multiple reasons for this problem, I will give 3 possible solutions please try all of them

1. try updating the index.js present in node_modules\resolve-url-loader. So here under the var options

var options = Object.assign({
      sourceMap: loader.sourceMap,
      engine: 'postcss',
      silent: false,
      absolute: false,
      keepQuery: false,
      **
      removeCR: false-- > make this "true" ** ,
      root: false,
      debug: false,
      join: joinFn.defaultJoin
    }

then restart your app

2. Next solution is to change end of line sequence to LF See screenshot below to know how it is done in VS Code

3. Check Your CSS files by commenting them one by one and running your code to find the file with the bug. Check all import statements and also the web links in your CSS file.

P.S. This is my first answer so please go easy on me :p for more reference to what I wrote you can also visit this link -> For more details you can also refer this link

Answer 3

Try changing engine: 'postcss' in node_modules/resolve-url-loader/index.js to engine: 'rework', hope that helps.

Answer 4

Switch from "CRLF" to "LF" (or vice versa) in your IDE (Visual Studio Code in my case)

Answer 5

1. go to node_modules/resolve-url-loader/index.js
2. find removeCR option (in my case it was at line 53)
3. change it from "false" to "true"
4. restart your app

Answer 6

For anyone still having this issue, I found a permanent solution for this.

You can use .gitattributes to prevent the file from being converted to CRLF.

A .gitattributes file can look like this

*.vcproj    eol=crlf
*.sh        eol=lf

add

*.scss eol=lf

This setting forces Git to normalize line endings to LF on checkin and prevents conversion to CRLF when the file is checked out.

Just commit the .gitattributes file and your file will be checkout out on every system with LF line ending.

Answer 7

I just lost 17h and weekend on this issue.

Simple solution :

Change all url(..) to new URL(...) inside scss files

Deeper explanation:

Webpack 5 expects new URL(...) declaration, for some reason url leaves CR at the end of the declaration. It can also be solved by extending webpack configuration adding resolve-url-loader with removeCR:true option

  {
//         loader: 'resolve-url-loader',
//         options: {
//           removeCR:true
//         }
//       }, 

but keep in mind that when you target entire scss file with

test: /\.(s*)css$/,

this will disable built in css support like in next.js and you will need to declare all loaders in webpack manually (going from bottom to top, bottom one being first to call)