esbuild w/ esbuild-sass-plugin: 'No matching export' error when attempting to build project with SCSS modules

25 views Asked by At

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 }
}
0

There are 0 answers