Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Node Error: resolve-url-loader: CSS error

Tags:

node.js

npm

reactjs

node-sass

resolve-url-loader

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)
like image 729
Maxdola Avatar asked Oct 31 '19 18:10

Maxdola

People also ask

What is wrong with resolve url loader?

Long story short, the subject issue was the result of the bad configuration and management of CSS files caused by the Resolve-Url-Loader, itself included in the react-scripts package. Since my development environment was newly installed.

What happens if I remove resolve-url-loader from a build?

Also, removing resolve-url-loader altogether makes the build succeed. When building without resolve-url-loader, the resulting css file is identical to the one with [email protected] in the build pipeline. Generated css file with [email protected]. The url points to the correct svg file in the build folder. @asbjornh!

What is resolve-url-loader in react-scripts?

when starting a new React project, you will need to install a react-scripts package, which includes the resolve-URL-loader package, the latter role includes management and redirection of the CSS files. connecting the dots, we may understand that the management operation of the CSS files includes the auto prefixing service.

Why did the resolve-url-loader package switch to PostCSS?

Previous versions of the resolve-URL-loader package used to make use of the Rework CSS parser, but as it's not adapted to manage the modern CSS versions, the package of interest adopted the PostCSS parser by default.

1 Answers

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

like image 89
Mudassir Avatar answered Sep 24 '22 19:09

Mudassir
Sign in to Comment

Related questions

How to download created excel file in node.js using exceljs
How do you install angular-cli for windows 7
Is this possible to install node-sass offline proxy
Jade/Pug if else condition usage
Difference between location and redirect in node.js
Node exceljs reading file
How to store array of hashes in redis
jade template engine, how to use layout.jade?
Having trouble understanding how fs.stat() works
How to run more than one app on one instance of EC2
How to unit test a method which connects to mongo, without actually connecting to mongo?
Keycloak: Access token validation end point
Run node.js application in debug with supervisor
Can't read my environment variable in my Node.js app
Is there any way to supply the allowDiskUse option to an mongoose.js aggregation?
nock.js - how to match any parameter combination in a URL
Cannot install latest nodejs using conda on Mac
Relative file system write path within module
Inserting Meta using jade Template engine
How to show all x-axis tick values in Plotly?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!