CODEWITHSUNDEEP
webpackcss-loadersass-loaderpostcss-loaderresolve-url-loader
ShalomBar
ShalomBar

Reputation: 231

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

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)

enter image description here

Upvotes: 23

Views: 28063

Answers (8)

Arham Abeer
Arham Abeer

Reputation: 21

It looks like you have a problem with line endings. Make sure all your files have consistent line endings, may be you are using CRLF for line ending, try reducing it to just LF for all CSS/SCSS files and it would definitely work.

Attached picture for reference!

enter image description here

Upvotes: 0

Shreyansh Gupta
Shreyansh Gupta

Reputation: 318

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

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

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

Upvotes: 20

Mark O
Mark O

Reputation: 1167

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)

Upvotes: 3

synapze
synapze

Reputation: 251

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.

Upvotes: 0

Kritagya Khandelwal
Kritagya Khandelwal

Reputation: 783

  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

Upvotes: 15

Artiom Shelegovich
Artiom Shelegovich

Reputation: 141

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

enter image description here

enter image description here

Upvotes: 9

Xurify
Xurify

Reputation: 746

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

Upvotes: 5

nayaganov
nayaganov

Reputation: 160

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

Upvotes: 13

Related Questions