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

Instead, it provides information to the TypeScript compiler about modules that exist outside the normal TypeScript module system.

In simple terms, you're telling TypeScript:

"My build system knows how to handle CSS files. Treat CSS imports as valid modules."

The actual CSS processing is still handled by your framework and bundler.

For example, in a Next.js application, Next.js handles the CSS during the build process.

Where Should global.d.ts Go?

A simple project structure might look like this:

my-next-app/
├── app/
├── components/
├── public/
├── global.d.ts
├── package.json
└── tsconfig.json

You can also place declaration files inside a dedicated directory, depending on your project's structure.

The important part is that TypeScript must include the declaration file in the project.

For example:

{
  "include": [
    "global.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}