I Use VSCode with CSS Modules extension for NextJS project with path aliases. Autocompletion for files working fine, but the classNames itself only show up if importing file without path aliases.
for example the
import styles from "./Main.module.css";
will show up autocomplete variants:
but the
import commonStyles from "@styles/common.module.css";
will show nothing, it doesn’t load anything about file, only global autocomplete hints
I use latest version of NextJS, vscode and extensions.
Here is my tsconfig and next config:
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"],
"@styles/*": ["./src/shared/UI/styles/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack(config) {
const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg"));
config.module.rules = [
...config.module.rules.filter((rule) => rule !== fileLoaderRule),
{ ...fileLoaderRule, exclude: /.svg$/i },
{
...fileLoaderRule,
test: /.svg$/i,
resourceQuery: {
...fileLoaderRule.resourceQuery,
not: [...fileLoaderRule.resourceQuery.not, /component/],
},
},
{ test: /.svg$/i, issuer: /.[jt]sx?$/, use: "@svgr/webpack", resourceQuery: /component/ },
];
return config;
},
};
export default nextConfig;
If anybody had face this issue too and resolve it, please help