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;
}
I never encountered anything similar building this same project with WebPack. Would greatly appreciate any help.
In case it may help better diagnose my problem; my complete config
object is pasted below:
In case it might be of any help, I have posted below my complete config.
{
package: {name, version},
isDevServer: devServer,
isProduction: production,
entry: {
index: devServer ? './index-dev.ts' : './index.ts',
},
publicPath: config.isDevServer ? '/' : '/[REDACTED]/' + config.package.version.split('-').shift(),
bundle: true,
outdir: 'dist',
platform: 'browser',
format: 'html',
outExtension: 'js',
polyfills: true,
sass: true,
svgr: true,
sourcemaps: true,
sourceRoot: 'dist',
inlineSources: !production,
fileNamesHash: true,
manifest: true,
declarations: false,
declarationsOneFile: false,
// minify: true,
external: false,
swc: true,
injectRegeneratorRuntime: false,
html: {
filename: 'index.html',
template: 'public/index.html',
favicon: 'public/favicon.ico',
title: 'App',
hash: true,
},
alias: {},
plugins: [],
copy: [
existsSync(resolveApp('assets/exports')) && {
from: 'assets/exports/**/*',
to: `assets/`,
},
],
define: {
'process.env.BUILD_ENV': JSON.stringify(production ? 'production' : 'development'),
'BUILD_ENV': JSON.stringify(production ? 'production' : 'development'),
},
server: {
host: 'localhost',
port: 3000,
rewrite: true,
// files: {},
},
log: production ? 'info' : 'warning',
globalName: 'redacted',
polyfills: { process: true }
}