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

[NMinhNguyen]

Demo Repo

https://github.com/NMinhNguyen/css-import-issue

Which of the following problems are you reporting?

Something else more complicated which I'll explain in more detail

Demonstrate the defect described above with a code sample.

import "./globals.css"; // resolves using TypeScript 5.9.3

Run tsc --showConfig and paste its output here

{
    "compilerOptions": {
        "target": "es2017",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "bundler",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "react-jsx",
        "incremental": true,
        "plugins": [
            {
                "name": "next"
            }
        ],
        "paths": {
            "@/*": [
                "./*"
            ]
        },
        "preserveConstEnums": true,
        "useDefineForClassFields": false
    },
    "files": [
        "./next-env.d.ts",
        "./next.config.ts",
        "./app/layout.tsx",
        "./app/page.tsx",
        "./.next/types/cache-life.d.ts",
        "./.next/types/routes.d.ts",
        "./.next/types/validator.ts",
        "./.next/dev/types/cache-life.d.ts",
        "./.next/dev/types/routes.d.ts",
        "./.next/dev/types/validator.ts"
    ],
    "include": [
        "next-env.d.ts",
        "**/*.ts",
        "**/*.tsx",
        ".next/types/**/*.ts",
        ".next/dev/types/**/*.ts",
        "**/*.mts"
    ],
    "exclude": [
        "node_modules"
    ]
}

Run tsc --traceResolution and paste its output here

traceResolution.txt (the text was too long so had to upload as a file)

Paste the package.json of the importing module, if it exists

{
  "name": "css-import-issue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.1.6",
    "react": "19.2.3",
    "react-dom": "19.2.3"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "16.1.6",
    "tailwindcss": "^4",
    "typescript": "^6.0.0-beta"
  }
}

Paste the package.json of the target module, if it exists

{
  "name": "css-import-issue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.1.6",
    "react": "19.2.3",
    "react-dom": "19.2.3"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "16.1.6",
    "tailwindcss": "^4",
    "typescript": "^6.0.0-beta"
  }
}

Any other comments can go here

Upgrading TypeScript from 5.9.3 to 6.0.0-beta results in a module resolution error in a freshly created Next.js app:

pnpm tsc

app/layout.tsx:3:8 - error TS2882: Cannot find module or type declarations for side-effect import of './globals.css'.

3 import "./globals.css";
~~~~~~~~~~~~~~~

Found 1 error in app/layout.tsx:3

I did some searching and found an earlier issue with the exact same error message: #62547 (comment)

[NMinhNguyen]

Never mind, I think this is expected and caused by #62421.