Create-react-app: [react-scripts 3.4.0] SCSS file with import statement cause resolve-url-loader: CSS error

[simoneb]

Describe the bug

After upgrading from react-scripts 3.2.0 to 3.4.0 in a project which imports a simple SCSS file with an @import statement, running yarn build consistently fails with:

$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/index.scss
Error: resolve-url-loader: CSS error
  Invalid mapping: {"generated":{"line":1,"column":63},"source":"file:///home/circleci/project/src/index.scss","original":{"column":null},"name":null}

Steps to reproduce

Here's a very simple repro created by:

• npx create-react-app
• yarn add node-sass
• create a index.scss file containing @import url("https://fonts.googleapis.com/css?family=Open+Sans");
• import index.scss from App.js

Links

• Repro url: https://github.com/simoneb/cra-3.4.0-sass-repro
• CircleCI build showing the build error: https://app.circleci.com/jobs/github/simoneb/cra-3.4.0-sass-repro/1

[internationalhouseofdonald]

I'm getting a similar error when using url().

Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option)

react-scripts version: 3.3

[Nguyenvantu]

I'm getting a similar error but with css. I rename index.css to style.css and build again, error is gone.

[iamandrewluca]

Hmm, strange. I changed this

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

to this (without quotes)

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

and it worked

[iamandrewluca]

I think this is a issue on loaders above resolve-url-loader which is sass-loader which uses node-sass which uses libsass

[PsychoXIVI]

We just need removeCR option to be added...

[PsychoXIVI]

Saving SCSS files with LF new lines mode helps, but it is only temporary solution :C

[NSarg7]

Dear developers, please solve this issue, it really interfere.

[iamandrewluca]

@NSarg7 Dear developer can you please help fix this issue? 🙂
It seems this is not a CRA issue.

[NSarg7]

@NSarg7 Dear developer can you please help fix this issue? 🙂
It seems this is not a CRA issue.

I don't know exactly where is problem, but problem solves when in "resolve-url-loader/index.js" file to change option from 'removeCR : false,' to 'removeCR : true,'.

[iamandrewluca]

but problem solves when in "resolve-url-loader/index.js" file to change option from 'removeCR : false,' to 'removeCR : true,'.

Tried, but does not work. Maybe you changed something else?

[shahan953]

Error: resolve-url-loader: CSS error
source-map information is not available at url() declaration (found orphan CR, try removeCR option)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I am getting this error? Why is that?

[shahan953]

Hmm, strange. I changed this

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

to this (without quotes)

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

and it worked

I tried this. But doesn't work

[Yellowhill]

Having the same problem on "react-scripts": "^3.4.1", "node-sass": "^4.14.0".

"./src/index.scss
Error: resolve-url-loader: CSS error
source-map information is not available at url() declaration (found orphan CR, try removeCR option)."

[petetnt]

@Yellowhill and @shahan953 :n issues seem to be related to line endings as seen in https://www.npmjs.com/package/resolve-url-loader#windows-line-breaks

You could try converting your line-endings to LF from CLRF.

Not sure if removeCR: true has any negative side effects or if it should be added (or if it helps with this at all)

[Yellowhill]

@Yellowhill and @shahan953 :n issues seem to be related to line endings as seen in https://www.npmjs.com/package/resolve-url-loader#windows-line-breaks

You could try converting your line-endings to LF from CLRF.

This ended up being the solution after all - thanks! I tried this at first by changing the line endings setting in VS Code preferences, but that did not help. I actually had to open each .scss-file individually, change the line-ending setting for the file and then save the file again.

Edit: Also going into node_modulesreact-scripts\config.js and adding "removeCR : true," into loader: require.resolve('resolve-url-loader') options helped.

[bouteillerAlan]

just for information downgrade react-script to 3.2.0 it would work (I know it's not a "prod" solution but maybe it can help ...)

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[halshing]

Hmm, strange. I changed this

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

to this (without quotes)

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

and it worked

Just encountered the error and this worked for me. weird... 🤔