Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix support typescript option noUncheckedSideEffectImports [1 pull requests, 1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#88197•Fetched 2026-04-08 02:05:27
View on GitHub
Comments
1
Participants
2
Timeline
11
Reactions
0
Author
JanpotJanpot
Participants
github-actions[bot]github-actions[bot]JanpotJanpot
Timeline (top)
labeled ×2referenced ×2subscribed ×2closed ×1

Error Message

  1. see error message: app/layout.tsx:3:8 - error TS2307: Cannot find module './globals.css' or its corresponding type declarations.

Fix Action

Fixed

PR fix notes

PR #88199: fix: support TypeScript noUncheckedSideEffectImports for CSS imports

Description (problem / solution / changelog)

Summary

This PR adds type declarations for plain CSS side-effect imports (*.css, *.sass, *.scss) to support TypeScript 5.6's noUncheckedSideEffectImports option.

What?

Added empty module declarations for non-module CSS imports in packages/next/types/global.d.ts:

declare module '*.css' {}
declare module '*.sass' {}
declare module '*.scss' {}

Why?

When users enable noUncheckedSideEffectImports in their tsconfig (introduced in TypeScript 5.6), they get errors like:

Type error: Cannot find module './globals.css' or its corresponding type declarations.

This option is becoming increasingly important as it may become the default in future TypeScript versions.

How?

Added empty module declarations similar to the existing declarations for server-only and client-only.

Fixes #88197

Checklist

  • Related issues linked using Fixes #88197
  • Tests added - Extended existing test/production/typescript-checked-side-effect-imports/ test suite
  • Verified the test fails without the fix and passes with the fix

Test Plan

pnpm test-start test/production/typescript-checked-side-effect-imports/index.test.ts

Changed files

  • packages/next/types/global.d.ts (modified, +7/-0)
  • test/production/typescript-checked-side-effect-imports/app/globals.css (added, +3/-0)
  • test/production/typescript-checked-side-effect-imports/app/globals.sass (added, +2/-0)
  • test/production/typescript-checked-side-effect-imports/app/globals.scss (added, +3/-0)
  • test/production/typescript-checked-side-effect-imports/app/layout.tsx (modified, +3/-0)
  • test/production/typescript-checked-side-effect-imports/index.test.ts (modified, +6/-2)
  • test/rspack-build-tests-manifest.json (modified, +1/-1)
  • test/turbopack-build-tests-manifest.json (modified, +1/-1)

Code Example

app/layout.tsx:3:8 - error TS2307: Cannot find module './globals.css' or its corresponding type declarations.
    
    3 import "./globals.css";

---

Operating System:
  Platform: linux
  Arch: x64
  Version: #202403151937 SMP PREEMPT_DYNAMIC Fri Mar 15 19:52:22 UTC 2024
  Available memory (MB): 31401
  Available CPU cores: 16
Binaries:
  Node: 22.8.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.9.0
Relevant Packages:
  next: 14.2.11 // Latest available version is detected (14.2.11).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/stefanprobst/issue-next-no-unchecked-side-effect-imports

To Reproduce

  1. clone repo and install dependencies
  2. pnpm tsc --noEmit
  3. see error message: 
    app/layout.tsx:3:8 - error TS2307: Cannot find module './globals.css' or its corresponding type declarations.

3 import "./globals.css";

Current vs. Expected behavior

should support typescript option noUncheckedSideEffectImports (introduced in v5.6)

probably needs .d.ts for .css imports

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #202403151937 SMP PREEMPT_DYNAMIC Fri Mar 15 19:52:22 UTC 2024
  Available memory (MB): 31401
  Available CPU cores: 16
Binaries:
  Node: 22.8.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.9.0
Relevant Packages:
  next: 14.2.11 // Latest available version is detected (14.2.11).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

TypeScript

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

This is a copy of https://github.com/vercel/next.js/issues/70106. Requested in https://github.com/vercel/next.js/discussions/70165#discussioncomment-15427429

The issue becomes more relevant now that the noUncheckedSideEffectImports option becomes default in the upcoming typescript major.

extent analysis

TL;DR

Create a .d.ts file to declare the type for the .css import to resolve the TypeScript error when using the noUncheckedSideEffectImports option.

Guidance

  • The error message indicates that TypeScript cannot find the module or its type declarations for the globals.css import, suggesting a need for a type declaration file.
  • To verify if the issue is resolved, run pnpm tsc --noEmit after creating the .d.ts file and check if the error message disappears.
  • The noUncheckedSideEffectImports option, introduced in TypeScript v5.6, requires explicit type declarations for side-effect imports, which includes CSS files.
  • Consider creating a globals.css.d.ts file with a declaration like declare module './globals.css'; to provide the necessary type information.

Example

// globals.css.d.ts
declare module './globals.css';

Notes

This solution assumes that the issue is specifically related to the noUncheckedSideEffectImports option and the lack of type declarations for the CSS import. If the issue persists, further investigation into the project's configuration and dependencies may be necessary.

Recommendation

Apply workaround by creating a .d.ts file for the CSS import, as this is a straightforward solution that addresses the specific error message and the requirements of the noUncheckedSideEffectImports option.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#latency issue#model loading#dependency error#configuration error#environment variable

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - ✅(Solved) Fix support typescript option noUncheckedSideEffectImports [1 pull requests, 1 comments, 2 participants]