Module '"*.module.css"' has no exported member '[class]'. Did you mean to use 'import [class] from "*.module.css"' instead? ts(2614)

[ruziev-dev]

I'm using Vite (React+TypeScript template) and try to set up typed import CSS Modules. But I can't import any exactly class

test.module.css

.testCssClass {
    color: greenyellow;
}

When I using it there are some problems. I can import CSS module as CSSModuleClasses but it doesn't have known keys for TypeScript

Module '"*.module.css"' has no exported member 'testCssClass'. Did you mean to use 'import testCssClass from "*.module.css"' instead? ts(2614)

I'have tried to use typescript-plugin-css-modules in tsconfig.json

"compilerOptions": {
        "plugins": [
            {
                "name": "typescript-plugin-css-modules",
            }
        ]
    }

But it doesn't help.

[wesbos]

Try include your CSS modules in your tsconfig:

  "include": [ "**/*.module.css"],

[Ch-Valentine]

@ruziev-dev this package doesn't support latest css-loader, and it uses deprecated webpack loader API, I switched to another package: https://www.npmjs.com/package/css-modules-dts-loader,

{
    loader: require.resolve("css-modules-dts-loader"),
    options: {
        camelCase: true,
        quote: "double",
        indentStyle: "space",
        indentSize: 4,
        sort: true,
        mode: isProduction ? "verify" : "emit"
    }
}

and css-loader started set namedExport prop as true by the default, you have to import css loaders by the new way: from import styles from ... to import * as styles from ...