Share:

How to Fix "Cannot Find Module or Type Declarations for Side-Effect Import" in TypeScript
Learn how to fix the TypeScript TS2882 error for CSS imports, understand noUncheckedSideEffectImports, and use declare module '*.css' in Next.js.
If you're using TypeScript with Next.js or React and see an error like:
Cannot find module 'mapbox-gl/dist/mapbox-gl.css'
or its corresponding type declarations. (TS2882)when importing a CSS file:
import 'mapbox-gl/dist/mapbox-gl.css'you're likely running into TypeScript's handling of side-effect imports and the noUncheckedSideEffectImports option.
The confusing part is that the application may still work correctly. Next.js can find the CSS file, the browser loads the stylesheet, and the application builds successfully in some configurations—yet TypeScript or your IDE reports an error.
Fortunately, the fix is usually straightforward.
In this guide, you'll learn:
- What a side-effect import is in TypeScript
- Why TypeScript reports this CSS import error
- What
noUncheckedSideEffectImportsdoes - How to fix TS2882 with
declare module '*.css' - How to configure
global.d.ts - The difference between wildcard and exact CSS module declarations
- Which approach is best for Next.js and React projects
What Causes the "Cannot Find Module or Type Declarations" Error?
Consider this common CSS import:
import 'mapbox-gl/dist/mapbox-gl.css'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.jsonThe 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:
Share:
More in Technology
View category


Refrigeration Plant Maintenance: Keeping Industrial Cooling Systems Reliable
When it comes to supermarkets, hospitals, restaurants and processing areas, Polar Bear cold rooms are the most versatile energy-efficient storage solution that offers durability hygiene and temperature control.
READ ARTICLE
How a Conversion Rate Optimization Agency in Dubai Helps Reduce Google Ads Costs
A conversion rate optimization agency in Dubai can help businesses identify these gaps, improve the customer journey, and get more value from their existing advertising budget.
READ ARTICLE