How to Fix "Cannot Find Module or Type Declarations for Side-Effect Import" in TypeScript

TypeScript may report:

Cannot find module 'mapbox-gl/dist/mapbox-gl.css'
or its corresponding type declarations.

This doesn't necessarily mean that the CSS file doesn't exist.

In fact, if you've installed mapbox-gl, the file is normally located inside your node_modules directory:

node_modules/
└── mapbox-gl/
    ├── dist/
    │   ├── mapbox-gl.js
    │   └── mapbox-gl.css
    └── package.json

The problem is that TypeScript needs to understand the imported module, while CSS files don't contain TypeScript type declarations.

This becomes particularly noticeable when noUncheckedSideEffectImports is enabled.

What Is a Side-Effect Import in TypeScript?

A side-effect import is an import statement that doesn't import a specific value.

For example:

import './styles.css'

There is no variable being imported: