CODEWITHSUNDEEP
javascriptcssreactjswebpacksass
Augustin Marcin
Augustin Marcin

Reputation: 41

React App Build Failure (sass/resolve-url-loader)

Creating a react app off this tutorial (https://www.youtube.com/watch?v=yqe5UB_BF7Q) and got this error when trying to apply the styles. The last step involved deleted the index.css file and replacing it with styles.scss.

I already tried npm install -g sass to no luck, anyone know what to do here?

Error output below.

Failed to compile.

Cannot find module 'sass'
Require stack:
- /Users/amarcin/web/node_modules/sass-loader/dist/utils.js
- /Users/amarcin/web/node_modules/sass-loader/dist/index.js
- /Users/amarcin/web/node_modules/sass-loader/dist/cjs.js
- /Users/amarcin/web/node_modules/loader-runner/lib/loadLoader.js
- /Users/amarcin/web/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/amarcin/web/node_modules/webpack/lib/NormalModule.js
- /Users/amarcin/web/node_modules/webpack-manifest-plugin/dist/index.js
- /Users/amarcin/web/node_modules/react-scripts/config/webpack.config.js
- /Users/amarcin/web/node_modules/react-scripts/scripts/start.js
WARNING in ./src/styles.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/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/styles.scss)
Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
  webpack or the upstream loader did not supply a source-map

ERROR in ./src/styles.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/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/styles.scss)
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
Require stack:
- /Users/amarcin/web/node_modules/sass-loader/dist/utils.js
- /Users/amarcin/web/node_modules/sass-loader/dist/index.js
- /Users/amarcin/web/node_modules/sass-loader/dist/cjs.js
- /Users/amarcin/web/node_modules/loader-runner/lib/loadLoader.js
- /Users/amarcin/web/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/amarcin/web/node_modules/webpack/lib/NormalModule.js
- /Users/amarcin/web/node_modules/webpack-manifest-plugin/dist/index.js
- /Users/amarcin/web/node_modules/react-scripts/config/webpack.config.js
- /Users/amarcin/web/node_modules/react-scripts/scripts/start.js

ERROR in ./src/styles.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/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/styles.scss)
Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: error processing CSS
  PostCSS received undefined instead of CSS string
  at new Input (/Users/amarcin/web/node_modules/resolve-url-loader/node_modules/postcss/lib/input.js:38:13)
    at encodeError (/Users/amarcin/web/node_modules/resolve-url-loader/index.js:287:12)
    at onFailure (/Users/amarcin/web/node_modules/resolve-url-loader/index.js:228:14)

webpack compiled with 2 errors and 1 warning

Upvotes: 0

Views: 3477

Answers (1)

Augustin Marcin
Augustin Marcin

Reputation: 41

Apparently all that was needed was to run npm install sass-loader sass webpack

Upvotes: 3

Related Questions