How to silence false SASS warnings in React

I was working on a React project and I kept running into an error that read Cannot find module './Index.module.scss'. The file was definitely there, and the project was building fine. What gives?

Missing Type Definitions

After doing more research, it turns out that this isn’t a problem with missing files at all, but missing type definitions. For whatever reason, when Typescript reads the file, realizes it doesn’t have type definitions, and instead of saying something like “Missing type definitions for file”, it says that it can’t find it at all. To fix this error, you need to take two steps:

  1. Add a tsconfig.json file
  2. Provide type definitions for your .scss files

1. Add a tsconfig file

This step is pretty straightforward — just add a file named tsconfig.json to the top level of your project. You can have Typescript automatically generate one (with the command tsc --init), but here’s an example of a basic one to get you started:

"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"strict": true,
"esModuleInterop": true

If you decide to have Typescript automatically generate one, just make sure you set the jsx option to react.

Random tidbit: you can actually fix this error with a blank tsconfig file. While that’s an option, I think it makes sense to populate it with actual values, so you don’t have some random blank file hanging around. You also then have more control over how your Typescript is compiling.

2. Add type definitions for your .scss files

There are three approaches to solving this problem:

  1. Provide all of the type definitions by hand for every CSS class you create (hard)
  2. Automatically generate type definitions for your .scss files (hard because the tooling out there isn’t perfect)
  3. Add a catch-all type definition for all .scss files (easy)

After spending hours on trying to make #2 work, I decided to go with option #3. To do this, you create a .d.ts file somewhere in your project (I stuck mine in the src folder and called it globals.d.ts) and add the following definition to it:

declare module '*.scss' {
const content: {[className: string]: string};
export = content;

This declaration basically tells Typescript what to expect when looking at a .scss file. Save that and then…





Web Developer @ Shopify.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Trevor Harmon

Trevor Harmon

Web Developer @ Shopify.

More from Medium

Client-Side Routing with React

How make SVG files more usable for ReactJs

Change theme using Styled Components

Talking about the useState hook