'No matching export' error when attempting to build project with SCSS modules.

[tmuscat95]

I receive the following error for every instance where I use an SCSS module import when I attempt to build my React project.

✘ [ERROR] No matching export in "src/styles/mymodule.module.scss" for import "default"

    src/views/layouts/portrait/MyComponent.tsx:21:7:
      21 │ import C from '@styles/mymodule.module.scss';

The plugins entry in my config looks like this, with the more specific filter RegEx being placed first in the array as recommended per a previous discussion :

config.plugins = [
    sassPlugin({
        filter: /\.module\.s?css$/,
        type: 'style',
        transform: postcssModules({})
    }),
    sassPlugin({
        filter: /\.s?css$/,
        type: 'style'
    })];

My tsconfig.json compiler options entry looks like this:

"compilerOptions": {
        "resolveJsonModule": true,
        "baseUrl": ".",
        "paths": {
            "@styles/*": ["./src/styles/*"],
          }
    }

The following entry is present in my react-app-env.d.ts.

declare module '*.module.scss' {
    const classes: { readonly [key: string]: string };
    export default classes;
}

Would greatly appreciate any help.

[glromeo]

There must be some issue affecting the output of postcss transformation which breaks the default export
Can you please hack the plugin in your node_modules, in libs/utils.js around line 146 there should be

cssModule = JSON.stringify(json, null, 2);

just add a console.log of that cssModule and pay attention whether the content is a valid JSON
that text is what goes into the default export for the module