Cannot find module or type declarations for side-effect import of './globals.css'.

[Ali1raz]

🏷️ Discussion Type

Bug

Body

i have nextjs app deployed on vercel, app/layout.tsx shows "Cannot find module or type declarations for side-effect import of './globals.css'." , i do have this file

Guidelines

• I have read and understood this category's guidelines before making this post.

[mohamedkhaled204]

This usually happens when TypeScript can’t resolve the global CSS import even though globals.css exists.

A few things to check:
Make sure globals.css is inside the same app/ directory as layout.tsx
Ensure next-env.d.ts exists in the project root
Try setting "moduleResolution": "bundler" in tsconfig.json
try deleting .next and restarting the TS server/dev server.

[blaze0089]

---

One thing nobody mentioned that actually fixes this in a lot of cases is adding a CSS type declaration file manually.

Create a file called custom.d.ts in your project root and add:

declare module '*.css';

Then make sure your tsconfig.json includes it:

{
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "custom.d.ts"]
}

Also worth checking since you're on Vercel specifically, if the app is actually building and deploying fine but the error only shows in your editor, it's just the TypeScript language server being confused rather than a real build error. Restarting the TS server in VS Code with Ctrl+Shift+P → "TypeScript: Restart TS Server" often clears it without any config changes.

If the build itself is failing on Vercel, check your next-env.d.ts file isn't being gitignored because that's the file Next.js uses to tell TypeScript about CSS imports and if it's missing from the repo Vercel won't generate it correctly.

---

[Ali1raz]

it did not work!

[kaungsike]

TypeScript can’t resolve CSS module declarations during type checking, even though the file exists and the app runs fine locally.

Restart TypeScript and Rebuild it
rm -rf .next npm run build

The app usually still works at runtime; it’s primarily a TypeScript resolution issue.

[dimitrilinds]

The answers above cover the most common fixes, but let me add a more complete diagnosis since you mentioned this is on Vercel specifically.

Most likely cause: next-env.d.ts is gitignored or missing

Next.js automatically generates next-env.d.ts in your project root. This file contains:

/// <reference types="next" />
/// <reference types="next/image-types/global" />

The next types package includes the CSS module declarations that tell TypeScript how to handle import './globals.css'. If this file is missing on Vercel (because it's in .gitignore), the build will fail with exactly the error you're seeing.

Fix: Check your .gitignore and make sure next-env.d.ts is not listed there. It should be committed to your repo.

Secondary cause: wrong moduleResolution in tsconfig.json

For Next.js 13+ with the App Router, your tsconfig.json should have:

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "esnext",
    "target": "es2017"
  }
}

If you have "moduleResolution": "node" (the old default), TypeScript will not resolve CSS side-effect imports correctly.

Quick checklist

Check	What to look for
next-env.d.ts exists in repo root	Must be committed, not gitignored
tsconfig.json includes "moduleResolution": "bundler"	Required for Next.js 13+ App Router
globals.css is inside app/ directory	Must be in the same folder as layout.tsx
next-env.d.ts is included in tsconfig.json "include"	Should be ["next-env.d.ts", "**/*.ts", "**/*.tsx"]

If the Vercel build succeeds but the error only appears in your editor locally, it is just the TypeScript language server being out of sync — run Ctrl+Shift+P → TypeScript: Restart TS Server in VS Code to clear it.

[Ali1raz]

it already tried this but nothing works!