create-react-app: Version 3.1.0+ breaks SASS modules composition

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

npx create-react-app test_app && cd test_app
yarn add node-sass
Create b.module.sass with

.test
  background: #FFF

Create a.module.sass with

.test
  composes: test from './b.module.sass`

In App.js add as the first line import './a.module.sass'
yarn start and observe the error

Rename b.module.sass to b.module.css and replace the contents with

.test {
  background: #FFF;
}

In a.module.sass change b.module.sass to b.module.css
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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 13
Comments: 27 (2 by maintainers)

Most upvoted comments

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.

igor10k on Jan 19, 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>'.

heladiofog on Feb 14, 2020

I’m using react-app-rewired to temporarily fix this issue. Below is content of my config-overrides.js to remove resolve-url-loader from webpack config.

const findSassModuleRule = (config) => {
  let sassModuleRuleIndex;
  const cssLoaderModule = config.module.rules.find(ruleItem => {
    if (!ruleItem.oneOf || !ruleItem.oneOf.length) {
      return false;
    }
    sassModuleRuleIndex = ruleItem.oneOf.findIndex(
      loaderItem =>
        loaderItem.test &&
        loaderItem.test.toString() === "/\\.module\\.(scss|sass)$/"
    );
    return sassModuleRuleIndex !== -1;
  });

  const sassModuleRule = cssLoaderModule.oneOf[sassModuleRuleIndex];
  return sassModuleRule;
};

// Remove resolve-url-loader which causes SASS modules to not work properly
// TODO: Remove this when below issue gets fixed
// https://github.com/facebook/create-react-app/issues/7682
const removeResolveUrlLoader = (config) => {
  const sassModuleRule = findSassModuleRule(config);
  sassModuleRule.use = sassModuleRule.use.filter(
    loaderItem =>
      !(loaderItem.loader && loaderItem.loader.includes("/resolve-url-loader/"))
  );
  return config;
};

module.exports = function override(config) {
  config = removeResolveUrlLoader(config);
  return config;
}

Hope this helps before this issue gets fixed.

crux153 on Sep 25, 2019

It seems this is a css-loader issue per webpack-contrib/css-loader#131.

They have closed that issue but I suspect that it is not fixed. I suggest anyone who arrives here may need to agitate on that issue to get this fixed.

bholloway on Sep 18, 2019

Is there any workaround? I am having the same issue. See #8144 for more detail

sublimedatasys on Dec 12, 2019