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

[Igor10k]

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

[Igor10k]

Created a related issue in the resolve-url-loader repo as well https://github.com/bholloway/resolve-url-loader/issues/131

[bholloway]

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.

[crux153]

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.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[sublimedatasys]

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

[lorini]

Hi,

Same issue here, in 3.0.1 everything is going well. But as soon as I bump version to 3.1.0, I get the same error as @Igor10k. (3.2.0 doesn't work either)

@crux153 workaround is working well for developement, but the build fails to compile with error :

Creating an optimized production build...
Failed to compile.

Lexical error on line 1: Unrecognized text.
  Erroneous area:
1: #{$element} - #{$substract}
^..^

Hope it helps.

Thanks for you work on react.

[oldwin]

Same error, I can not use // comments and can not use import on scss files.
On version 3.0.1 everything works good.

[ralmo]

This issue remains with react-scripts 3.3.0.

Curiously: almost the same configuration (v3.3.0 as well) is working fine in another project which also makes use of SASS modules and I can't figure out the difference.

[Igor10k]

@ralmo the issue happens only when you compose from other files. So my guess is it's working fine for you in a project where you don't do that.

[ralmo]

@Igor10k Well I'll be... I completely missunderstood the reason for this error and assumed it was due to react-scripts > 3.1.0 + usage of SASS modules in general. I thought the error was related to the @import statement :)

Your guess was completely on point, thank you!

[vibecode]

Is there any progress on this? I use 'composes' in my projects heavily and got stuck with older versions of CRA because of this issue.

[Igor10k]

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.

[crux153]

It seems react-scripts 3.3.1 with PR #8281 fixes this issue. Now my project builds fine without removing the resolve-url-loader.

[Pils19]

Just tried to upgrade from 3.0.1 to 3.3.1 and still got that issue... So for me it does not solve the problem

[4ndv]

Still broken on 3.3.1

[heladiofog]

Does somebody have had the same issue with url images. I have. a message like ' Module not found: Can't resolve in '.

[vibecode]

I created a fresh project with 3.3.1 with the exact structure as OP described and everything now compiles just fine. But it's hard to believe that the fix was that simple.

[oldwin]

It works good for me now with version 3.3.1

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[4ndv]

Bump?

[akshygupt]

I still have this issue with 3.4.1, I switched to 3.4.0 and 3.3.0, removed package-lock and node_modules, reinstalled everything and it still doesn't work.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale[bot]]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[phongyewtong]

had this problem too!

[vibecode]

@phongyewtong but do you have it now, what version of CRA do you use? Could you share a repo reproducing the problem if so?