nextjs - 💡(How to fix) Fix TypeScript error: Cannot find module or type declarations for side-effect CSS import in App Router [1 comments, 2 participants]

npx create-next-app@latest css-import-ts-error --ts --app Observe the TypeScript error reported by the editor TypeScript should not report an error for side-effect CSS imports in app/layout.tsx, as this is the officially documented and recommended pattern for importing global CSS in the App Router. TypeScript reports the following error in the editor and during type checking: The application builds and runs correctly, but the TypeScript error persists unless a manual module declaration is added.

TL;DR

Manually adding a global declaration file with declare module "*.css"; can resolve the TypeScript error for side-effect CSS imports.

Guidance

• Verify that the issue is specific to TypeScript type checking and editor diagnostics, and that the application builds and runs correctly.
• Consider adding a global declaration file (global.d.ts) with the necessary module declaration to resolve the error.
• Check if there are any updates or changes in the Next.js documentation or TypeScript configuration that may address this issue.
• If using a code editor like VS Code, ensure that the TypeScript version and configuration are up-to-date and aligned with the project settings.

Example

// global.d.ts
declare module "*.css";

This declaration file can be added to the project root to resolve the TypeScript error.

Notes

The issue appears to be related to the TypeScript configuration and module declarations, rather than a runtime or build issue. The provided workaround may be necessary until a more official solution is available.

Recommendation

Apply workaround: Add a global declaration file (global.d.ts) with declare module "*.css"; to resolve the TypeScript error, as this is a straightforward and minimal solution to address the issue.