Node Error: resolve-url-loader: CSS error

Question

I am trying to run a react project as dev server on my surface, and if gives me the error shown below and in the title. When I am running the same config on my pc I am not having this problem. (I tried creating the same conditions, but it just wont work).

Error:

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

Complete error from Browser Console: (Chrome)

Fetch API cannot load file:///C:/Users/Max-T/Documents/Sources/StaffMangerV2/Oauth2Manager-Web/src/assets/scss/black-dashboard-pro-react.scss. URL scheme must be "http" or "https" for CORS request.
(anonymous) @ index.js:1679
s @ index.js:499
(anonymous) @ index.js:479
e.<computed> @ index.js:536
S @ index.js:1517
i @ index.js:1534
(anonymous) @ index.js:1541
(anonymous) @ index.js:1530
(anonymous) @ index.js:1699
(anonymous) @ index.js:1673
s @ index.js:499
(anonymous) @ index.js:479
e.<computed> @ index.js:536
S @ index.js:1517
i @ index.js:1534
(anonymous) @ index.js:1541
(anonymous) @ index.js:1530
q @ index.js:1726
I @ index.js:1658
G @ index.js:1817
(anonymous) @ index.js:1831
(anonymous) @ index.js:1848
(anonymous) @ index.js:1332
error (async)
u @ index.js:1334
K @ index.js:1847
ce @ index.js:1951
./node_modules/react-dev-utils/webpackHotDevClient.js @ webpackHotDevClient.js:38
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
0 @ store.js:18
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1679 Fetch API cannot load file:///C:/Users/Max-T/Documents/Sources/StaffMangerV2/Oauth2Manager-Web/node_modules/resolve-url-loader/index.js. URL scheme must be "http" or "https" for CORS request.
(anonymous) @ index.js:1679
s @ index.js:499
(anonymous) @ index.js:479
e.<computed> @ index.js:536
S @ index.js:1517
i @ index.js:1534
(anonymous) @ index.js:1541
(anonymous) @ index.js:1530
(anonymous) @ index.js:1699
(anonymous) @ index.js:1673
s @ index.js:499
(anonymous) @ index.js:479
e.<computed> @ index.js:536
S @ index.js:1517
i @ index.js:1534
(anonymous) @ index.js:1541
(anonymous) @ index.js:1530
q @ index.js:1726
I @ index.js:1658
G @ index.js:1817
(anonymous) @ index.js:1831
(anonymous) @ index.js:1848
(anonymous) @ index.js:1332
error (async)
u @ index.js:1334
K @ index.js:1847
ce @ index.js:1951
./node_modules/react-dev-utils/webpackHotDevClient.js @ webpackHotDevClient.js:38
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
0 @ store.js:18
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
main.chunk.js:10 Uncaught Error: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option)
  at file://C:\Users\Max-T\Documents\Sources\StaffMangerV2\Oauth2Manager-Web\src\assets\scss\black-dashboard-pro-react.scss:13239:3
    at encodeError (C:\Users\Max-T\Documents\Sources\StaffMangerV2\Oauth2Manager-Web\node_modules\resolve-url-loader\index.js:219:12)
    at onFailure (C:\Users\Max-T\Documents\Sources\StaffMangerV2\Oauth2Manager-Web\node_modules\resolve-url-loader\index.js:176:14)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/resolve-url-loader/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/assets/scss/black-dashboard-pro-react.scss?v=1.0.0 (http://localhost:3000/static/js/main.chunk.js:10:7)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Object../src/assets/scss/black-dashboard-pro-react.scss?v=1.0.0 (http://localhost:3000/static/js/main.chunk.js:744:15)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Module../src/index.js (http://localhost:3000/static/js/main.chunk.js:9220:109)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at fn (http://localhost:3000/static/js/bundle.js:151:20)
    at Object.0 (http://localhost:3000/static/js/main.chunk.js:9988:18)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:786:30)
    at checkDeferredModules (http://localhost:3000/static/js/bundle.js:46:23)
    at Array.webpackJsonpCallback [as push] (http://localhost:3000/static/js/bundle.js:33:19)
    at http://localhost:3000/static/js/main.chunk.js:1:85
./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/resolve-url-loader/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/assets/scss/black-dashboard-pro-react.scss?v=1.0.0 @ main.chunk.js:10
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/assets/scss/black-dashboard-pro-react.scss?v=1.0.0 @ black-dashboard-pro-react.scss?v=1.0.0:1
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
./src/index.js @ index.css?e32c:37
__webpack_require__ @ bootstrap:785
fn @ bootstrap:150
0 @ store.js:18
__webpack_require__ @ bootstrap:785
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1375 ./src/assets/scss/black-dashboard-pro-react.scss?v=1.0.0 (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-4!./src/assets/scss/black-dashboard-pro-react.scss?v=1.0.0)
Error: resolve-url-loader: CSS error
  source-map information is not available at url() declaration (found orphan CR, try removeCR option)

score 44 · Accepted Answer · answered Dec 29 '19 at 18:48

44

I had this same error. To fix this, I had to navigate to

node_modules/resolve-url-loader

open

index.js

and under var options change removeCR from "false" to "true".

answered Dec 29 '19 at 18:48

Mudassir

1,442
11
15

1

haven't worked on the project in some time I will try that tomorrow. – Maxdola Dec 29 '19 at 20:28
2

Thank you, just had the same issue and this worked for me. – user2292370 Feb 20 '20 at 11:05
can this be configured in angular.js or elsewhere. It feels silly for every developer to change that – Pawel Cioch Aug 11 '20 at 22:10
2

I believe yes, you can add a rule in your webpack.config.js file as follows to enable removeCR. `loader: 'resolve-url-loader', options: { removeCR: true },` – Mudassir Aug 13 '20 at 17:00
Also, I am sorry since I don't have that project anymore can't test and confirm this, but if that works for you please post your update. – Mudassir Aug 13 '20 at 17:07
21

This may be sufficient for local development, but this is not acceptable for production (or at all). The `package.json` will create the `node_modules` directory automatically and install the modules from their source, so unless you fork the repo and make this change, i wouldn't recommend changing module files directly. – halshing Aug 28 '20 at 21:15
I agree with @halshing we cannot modify manually in production. – Wilmer Adalid Sep 10 '20 at 05:52
I don't think there should be an issue with that in production, these are the internal loader configurations for webpack and dev dependencies are never included in your production build, so logically if it works in development, the same should work in production. I've not had any such issues in my project, so if someone does, please update. – Mudassir Jan 20 '21 at 11:29
2

Thanks, that also worked for my error `Error: resolve-url-loader: CSS error Cannot read property 'toString' of undefined` – Yana Trifonova Jul 14 '21 at 09:43
3

Can be solved that by changing url(..) to new URL(...) inside scss files. Webpack 5 expects new URL(...) declaration – Mark O Aug 14 '21 at 21:33
It didn't work for me but It worked mysteriously after yarn upgrade. – Arun Panneerselvam Oct 02 '22 at 19:22

score 6 · Answer 2 · answered Sep 13 '20 at 06:50

6

Another option would be to configure the IDE or Editor for the End of Line Sequence type, change from CRLF to LF ... They are only alternatives ... try it.

answered Sep 13 '20 at 06:50

TonyInuma

111
1
3

score 3 · Answer 3 · edited Sep 13 '20 at 12:01

well, the solution must be related to some package configuration or something. But I want to share the solution that I applied:

@import "variables";
@import "colored-balls";
@import "glowing-ball";
@import "pixel-loader";
@import "square-box";
@import "circle-loader";
@import "jumping-dots-loader";

Look for the file that cannot be resolved by the module in charge (Look for the error file). with ctrl + click ... and comment one by one until you see which of them you did not read, when you found them: you can, comment on them, Or delete them. They are preloaders, I did not need them.

/* @import "colored-balls"; */

/* @import "pixel-loader"; */

score 3 · Answer 4 · answered Apr 25 '22 at 04:28

3

In my case, I have recently updated Node.js to latest version & the dependencies for the some of the projects were not rebuilt. So, I deleted existing dependencies & rebuilt them freshly. Then the error was gone.

rm -rf node_modules
npm install

answered Apr 25 '22 at 04:28

Tamil Vendhan Kanagarasu

407
3
9

score 2 · Answer 5 · answered Dec 14 '22 at 07:40

2

Me I resolved the problem by installing resolve-url-loader component as below:

Install via npm

npm install resolve-url-loader --save-dev

via yarn

yarn add resolve-url-loader --dev

answered Dec 14 '22 at 07:40

Harst Logics

19
3

score 1 · Answer 6 · answered Oct 26 '20 at 18:41

1

Checkout git repo with :

[core]
    autocrlf = false

Because Windows CRLF are not supported by resolve-url-loader, using node-sass but Options not available to setup with Create-React-App. See https://github.com/sass/node-sass/issues/2756

answered Oct 26 '20 at 18:41

François Breton

1,158
14
24

Node Error: resolve-url-loader: CSS error

6 Answers6

Linked