question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Version 3.1.0+ breaks SASS modules composition

See original GitHub issue

Describe the bug

In 3.1.0 the resolve-url-loader lib was added that breaks SASS modules composition. Either removing the lib from the webpack config or downgrading to 3.0.1 fixes the issue.

Did you try recovering your dependencies?

Yes. Deleted node-modules and removed the package-lock.json.

Environment

Environment Info:

  System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 12.6.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.75
    Firefox: 66.0.3
    Safari: 12.1.2
  npmPackages:
    react: ^16.9.0 => 16.9.0 
    react-dom: ^16.9.0 => 16.9.0 
    react-scripts: 3.1.1 => 3.1.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

  1. npx create-react-app test_app && cd test_app
  2. yarn add node-sass
  3. Create b.module.sass with
.test
  background: #FFF
  1. Create a.module.sass with
.test
  composes: test from './b.module.sass`
  1. In App.js add as the first line import './a.module.sass'
  2. yarn start and observe the error

  1. Rename b.module.sass to b.module.css and replace the contents with
.test {
  background: #FFF;
}
  1. In a.module.sass change b.module.sass to b.module.css
  2. Observe that the error is gone

Expected behavior

Build succeeds.

Actual behavior

Build fails.

./src/b.module.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-6-3!./src/b.module.sass)
Error: resolve-url-loader: CSS error
  ./src/b.module.sass:2:3: Unknown word
You tried to parse Sass with the standard CSS parser; try again with the postcss-sass parser
  You tried to parse Sass with the standard CSS parser; try again with the postcss-sass parser

Reproducible demo

https://github.com/Igor10k/rca_sass_modules_bug

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:13
  • Comments:27 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
igor10kcommented, Jan 19, 2020

I miss the times when the CRA team cared more about the stability of the package. Now they’ve added resolve-url-loader to cover some specific use-cases of the app building but broke the old ways. And the issue is here for 4 months already and nobody gives a damn. According to the author of resolve-url-loader the bug is in fact in css-loader. But the corresponding github issue in css-loader was closed so I guess it won’t be fixed. The obvious fix for CRA should’ve been to just drop resolve-url-loader until it’s fixed. Or at least make it optional and disabled by default.

3reactions
heladiofogcommented, Feb 14, 2020

Does somebody have had the same issue with url images. I have. a message like ’ Module not found: Can’t resolve <wrong image path> in <react src>'.

Read more comments on GitHub >

github_iconTop Results From Across the Web

postcss-modules-values | Yarn - Package Manager
PostCSS plugin for CSS Modules to pass arbitrary values between your module files. css, modules, postcss. readme. CSS Modules: Values.
Read more >
Gatsby Changelog | 5.3.0
We are proposing Breaking Changes for the next major version of Gatsby to our GraphQL API. The goal of this change is increasing...
Read more >
Sass: @use
The @use rule loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together.
Read more >
resolve-url-loader - npm
Resolve URL Loader. NPM. This webpack loader allows you to have a distributed set SCSS files and assets co-located with those SCSS files....
Read more >
error: node sass version 7.0.1 is incompatible with ^4.0.0.
node_modules /sass-loader/lib/loader.js): Error: Node Sass version 7.0.1 is incompatible with ... Don't forget to read the breaking changes for each release, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found