Typescript Cannot Find CSS Module

24 May 2023

Here's a way to help Typescript find CSS module type declarations.

The Import

You have an import of a CSS module in your Typescript, something like:

import css from "./positioner.module.css";

When it compiles, you get a doozy of an error:

src/common/positioner.tsx:3:17 - error TS2307: Cannot find module './positioner.module.css' or its corresponding type declarations.

To fix, you'll want to make sure that your tsconfig.json is considering your CSS modules a part of the source files:

"include": ["src/**/*"]

Then you'll want to create a type declaration file for your CSS modules.

Make a directory to store the types. This is the default directory:

mkdir src/types

Then make a new file:

nvim src/types/index.d.ts

And create the declaration:

declare module "*.module.css" {
  const content: Record<string, string>;
  export default content;
}

Re-compile, and you'll be good. Well, I mean, you were good before. Now your code will work.