Search code examples
javascriptreactjsnode-modulessass-loaderresolve-url-loader

React Module Error sass-loader and type-error resolve-url-loader

I wanted to learn more React in general and because I need it for university project now. I got 2 projects from a friend who is a decent developer but I can not run them on my computer without any Errors.

I always recieve 2 different type of errors regarding sass-loader and resolve-url-loader.

ERROR in ./src/base-style.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/react-scripts/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/base-style.scss)
Module Error (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
Cannot read properties of undefined (reading 'indexOf')

and

ERROR in ./src/base-style.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/react-scripts/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/base-style.scss)
Module build failed (from ./node_modules/react-scripts/node_modules/resolve-url-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'replace')
    at process (M:\Uni\SofN\frontend\node_modules\react-scripts\node_modules\resolve-url-loader\lib\engine\postcss.js:28:19)
    at Object.resolveUrlLoader (M:\Uni\SofN\frontend\node_modules\react-scripts\node_modules\resolve-url-loader\index.js:213:14)

I read on another post that my devDependencies in package.json are important

 "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
    "css-loader": "^6.8.1",
    "gh-pages": "^5.0.0",
    "node-sass": "^7.0.3",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.69.4",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "webpack": "^5.89.0"
  }

I tried multiple things I saw on stackoverflow or what my classmates told me. I tried to update all loaders, I tried to delete and reinstall them, I deleted node-modules and npm install again etc. I also tried to change the webpack.config file, but I can not promise that I did it completely correct.

I was hoping maybe something is wrong with the projects but on another friends notebook it runs fine, except some other weird Javascript errors but not simillar to the errors I get.

Solution

  • Check your Node and npm version with node -v npm -v

    I had this issue today and all i did was to downgrade node to version 19.9.0 if your version is 21.0.0 all you need to do is downgrade you node. Just uninstall node and download v19.9.0 Visit: nodejs-v19.9.0