react vite throws error for all CSS module files "Cannot find module or its corresponding type declarations"

Question

I have imported a NavbarSample.module.css file

content inside NavbarSample.module.css

    .navbar {
      width: rem(80px);
      height: rem(750px);
      padding: var(--mantine-spacing-md);
      display: flex;
      flex-direction: column;
      border-right: rem(1px) solid
        light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
    }

When I try to import this CSS module file in .tsx file using the following command:

    import classes from './NavbarSample.module.css';

I am getting the following error import :

Cannot find module './NavbarSample.module.css' or its corresponding type declarations.

This CSS file is in the same folder where I am importing. actually across the project am not able to use module.css files. I am getting the same error.

My vite.config.ts file:

    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react';
    import fs from 'fs';
    import path from "path";
    
    export default defineConfig({
        plugins: [react()],
        server: {
            port: 8080
        },
        resolve: {
            alias: {
                "@assets":path.resolve(__dirname, "./assets") ,
                "@service":path.resolve(__dirname, "./services") ,
            },
          },
    });

pnpm list gives me the following output:

dependencies:
@emotion/react 11.11.1                 @tabler/icons-react 2.34.0             mantine-react-table 1.3.3
@mantine/core 6.0.20                   @tanstack/react-query 4.35.3           react 18.2.0
@mantine/dates 6.0.20                  @tanstack/react-query-devtools 4.35.3  react-axios 2.0.6
@mantine/form 6.0.20                   @tanstack/react-table 8.9.9            react-chartjs-2 5.2.0
@mantine/hooks 6.0.20                  axios 1.5.0                            react-dom 18.2.0
@mantine/modals 6.0.20                 chart.js 4.4.0                         react-router-dom 6.16.0
@mantine/notifications 6.0.20          cronstrue 2.32.0                       react-table 7.8.0
@mui/material 5.14.11                  dayjs 1.11.9                           recharts 2.8.0

devDependencies:
@types/node 20.6.0                       eslint 8.40.0                            eslint-plugin-react-refresh 0.4.3
@types/react 18.2.21                     eslint-config-prettier 8.8.0             prettier 2.8.8
@types/react-dom 18.2.7                  eslint-plugin-jest 27.2.1                typescript 5.0.4
@typescript-eslint/eslint-plugin 5.59.6  eslint-plugin-prettier 4.2.1             vite 4.4.9
@typescript-eslint/parser 5.59.6         eslint-plugin-react 7.32.2
@vitejs/plugin-react 4.0.4               eslint-plugin-react-hooks 4.6.0

Let me know what other config details required to find this issue.

Answer 1

just create a file css.d.ts:

declare module "*.module.css";