Missing '@payloadcms/next/css'

[brazen moat]

I'm getting Payload set up, and there seems to be an issue because the @midnight night/next/css module is no longer included. I've tried a lot of things, and cannot seem to fix this/find it.

This missing module causes my production build to error out, and therefore it will not deploy on Vercel. The module is important for styling the Payload dashboard. Without it, the dashboard has no CSS.

See image. Should be a simple fix. I used Payload maybe a year ago and never ran into this issue.

[delicate salmon]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Payload Concepts - Package Structure
• Troubleshooting - Dependency mismatches - Monorepos
• Installation - Adding to an existing app - 2. Copy Payload files into your Next.js app folder

Community-Help:

• Create component path variable for custom component and import in field will cause paylaod cli fail
• Can't deploy payload app
• Next Payload boilerplate build
• Errors when trying to add custom elements to richText

[wicked osprey]

Hey @brazen moat a few questions to narrow this down:

• is this a fresh install from npx create-payload-app?
• Are you using one of our templates?
• What is your Payload version?

[brazen moat]

Yes, fresh install. Using the blank template, but also tried the website template. Payload v3.83.0

[wicked osprey]

hmm interesting, I will try to reproduce

[brazen moat]

Yes, it is very weird. I mean the @midnight night/next/css module is not there so I understand the concern, but in development locally everything is fine

[deep shell]

Hey there! I solved this by adding payload-css.d.ts to src with the following contents:

declare module '@payloadcms/next/css'

[frail bluff]

You shouldn't import css file in route.ts, move that to admin/layout.ts

[wicked osprey]

this is a valid bug! There is an open issue for it, but in the meantime you can add a declare in your environment.d.ts

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      PAYLOAD_SECRET: string
      DATABASE_URL: string
      NEXT_PUBLIC_SERVER_URL: string
      VERCEL_PROJECT_PRODUCTION_URL: string
    }
  }
}

declare module '@payloadcms/next/css'

// If this file has no import/export statements (i.e. is a script)
// convert it into a module by adding an empty export statement.
export {}

[brazen moat]

Added that and included the new "environment.d.ts" file to my tsconfig.json as seen below, but still get a "cannot find module" error. I'm new to ".d.ts" files, do I need to do anything specific to make sure the new file is picked up?

[wicked osprey]

you shouldn't need to add it to your ts config as its a .ts it'll be picked up automatically

can you show me your environment.d.ts file?