Solving Cannot Find CSS Module Errors in Typescript

I remember feeling puzzled the first time my TypeScript compiler complained about an imported .module.css file in my React code. Everything worked at runtime, but VSCode kept throwing red squiggles. To avoid confusion, I decided to create a quick fix that put an end to these errors.

Thank me by sharing on Twitter 🙏

Cannot find module ‘./MyComponent.module.css’ or its corresponding type declarations.

1. Creating a Declaration File
I started by adding a new file named custom.d.ts in my src folder. In that file, I placed this line:

declare module '*.module.css';

Because my application only needed .module.css files, I stuck with one line. However, if I had .module.scss files, I would add another line:

declare module '*.module.scss';

2. Updating My tsconfig.json
After creating custom.d.ts, I made sure my tsconfig.json included it in the include array. For instance:

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react",
    "moduleResolution": "node",
    "skipLibCheck": true
  },
  "include": ["src", "src/custom.d.ts"]
}

That way, TypeScript knew where to find this new declaration file.

3. Verifying in VSCode
Lastly, I restarted VSCode. The error messages about missing types for .module.css vanished. My editor’s autocompletion also improved since TypeScript recognized those modules as valid imports.

Conclusion
This approach ended my frustration over mysterious CSS module type errors. Now I feel much more confident when importing .module.css files in my React and TypeScript projects.