Fixing CSS not defined Error in Next.js Production | Payload | Page 1

viscid sailBOT Nov 28, 2024, 3:51 PM

#

 ⨯ ReferenceError: CSS is not defined
    at <unknown> (/home/node/app/.next/server/app/(payload)/admin/[[...segments]]/page.js:43:52079)
    at Object.nr [as useMemo] (/home/node/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:36398)
    at t.useMemo (/home/node/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:68:6660)
    at r6 (/home/node/app/.next/server/app/(payload)/admin/[[...segments]]/page.js:43:52060)
    at r5 (/home/node/app/.next/server/app/(payload)/admin/[[...segments]]/page.js:43:53220)
    at n$ (/home/node/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:45906)
    at nI (/home/node/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:47681)
    at nL (/home/node/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:65480)
    at nN (/home/node/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:63111)
    at nB (/home/node/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:20:68893) {
  digest: '1420037132'
}
```I get this error on `/admin` (or any initial page load on routes for the payload admin) in production

heady fableBOT Nov 28, 2024, 3:51 PM

#

Original message from @tranquil echo - Moved from #core-dev message

#

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:

barren fossil Nov 28, 2024, 3:52 PM

#

@neon cosmos @astral flume

#

@tranquil echo Can you share your page.tsx in the (payload) folder

#

This is only happening in production?

#

Also Payload versions

tranquil echo Nov 28, 2024, 3:55 PM

#

only in production

#

payload version "^3.2.1"

#

src/app/(payload)/admin/[[...segments]]/page.tsx

/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import type { Metadata } from 'next'

import config from '@payload-config'
import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
import { importMap } from '../importMap'

type Args = {
  params: Promise<{
    segments: string[]
  }>
  searchParams: Promise<{
    [key: string]: string | string[]
  }>
}

export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
  generatePageMetadata({ config, params, searchParams })

const Page = ({ params, searchParams }: Args) =>
  RootPage({ config, params, searchParams, importMap })

export default Page

#

my react version is 19.0.0-rc-65a56d0e-20241020, I updated like 4 seconds ago to the latest: 19.0.0-rc-7670501b-20241124. gonna have to wait for the ci/cd to finish to see if that fixes it

#

@barren fossil

#

is there anything else you need?

barren fossil Nov 28, 2024, 3:59 PM

#

I doubt bumping react will fix it but lmk, I'm looking into it

#

Thanks for the quick reply

#

If that doesn't work, weird as it may sound, can you trying changing custom.scss to custom.css

#

In (payload) and giving that a shot?

tranquil echo Nov 28, 2024, 4:00 PM

#

it seems custom.scss is completely empty?

#

@barren fossil

barren fossil Nov 28, 2024, 4:01 PM

#

Yeah, it's for custom styles

tranquil echo Nov 28, 2024, 4:01 PM

#

would it be okay to just straight up delete it?

barren fossil Nov 28, 2024, 4:01 PM

#

But it's weirding me out because it used to be just custom.css

#

You can try but I'm pretty sure it'll just regenerate

tranquil echo Nov 28, 2024, 4:01 PM

#

upgrading to the latest react version does not solve it

#

I'll modify it to .css

#

I am not even sure how its able to compile scss at all...

barren fossil Nov 28, 2024, 4:03 PM

#

Oh wait check layout.tsx

tranquil echo Nov 28, 2024, 4:03 PM

#

there is no scss in the package.json

tranquil echo Nov 28, 2024, 4:03 PM

#

barren fossil Oh wait check layout.tsx

/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import config from '@payload-config'
import '@payloadcms/next/css'
import type { ServerFunctionClient } from 'payload'
import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
import React from 'react'

import { importMap } from './admin/importMap.js'
import './custom.scss'

type Args = {
  children: React.ReactNode
}

const serverFunction: ServerFunctionClient = async function (args) {
  'use server'
  return handleServerFunctions({
    ...args,
    config,
    importMap,
  })
}

const Layout = ({ children }: Args) => (
  <RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
    {children}
  </RootLayout>
)

export default Layout

#

its completely stock

barren fossil Nov 28, 2024, 4:03 PM

#

Ok, after you change to .css adjust the reference in there too

#

Hmm also @payloadcms/next/css si suspicious but those are the admin ui styles

tranquil echo Nov 28, 2024, 4:05 PM

#

the weird thing is that the sass dependency is not even installed in this project @barren fossil

barren fossil Nov 28, 2024, 4:06 PM

#

Yeah, I hear ya but it's installed in admin, but obviously it has to be processed so I'm not sure why the custom is a scss

#

it used to be just custom.css

tranquil echo Nov 28, 2024, 4:08 PM

#

~/app $ yarn info sass
Usage Error: No package matched your request

$ yarn info [-A,--all] [-R,--recursive] [-X,--extra #0] [--cache] [--dependents] [--manifest] [--name-only] [--virtuals] [--json] ...
```you sure?

barren fossil Nov 28, 2024, 4:09 PM

#

Am I sure what?

#

That scss is used in the Admin ui styles? Yes

tranquil echo Nov 28, 2024, 4:09 PM

#

that I don't need to include sass

barren fossil Nov 28, 2024, 4:09 PM

#

Shouldn't need to include sass

#

To run it

tranquil echo Nov 28, 2024, 4:09 PM

#

alright

#

well... deploy pipeline is running. I'll let you know in a minute

#

same error

barren fossil Nov 28, 2024, 4:11 PM

#

You changed .scss and the reference in layout yeah?

tranquil echo Nov 28, 2024, 4:11 PM

#

yes both

barren fossil Nov 28, 2024, 4:13 PM

#

I'm confused why it's custom.scss now since by the time the admin ships to you the sass gets bundled as css and included in /dist/styles.css and exported as /next/css already, so I don't think it's @payloadcms/next/css

neon cosmos Nov 28, 2024, 4:14 PM

#

curious too see whether this error happens when building a default template

#

or is it something specific to our configs

barren fossil Nov 28, 2024, 4:15 PM

#

That's a good question

#

Are you guys importing custom css into custom components anywhere in configs?

#

Can you double check

tranquil echo Nov 28, 2024, 4:16 PM

#

I do have a few custom components, but no custom css

neon cosmos Nov 28, 2024, 4:17 PM

#

i have some components with
import 'react-toastify/dist/ReactToastify.css';

tranquil echo Nov 28, 2024, 4:18 PM

#

including sass as dev dependency does indeed not fix it

barren fossil Nov 28, 2024, 4:19 PM

#

neon cosmos i have some components with import 'react-toastify/dist/ReactToastify.css';

Why not just use the sonner tooltip that comes out of the box?

tranquil echo Nov 28, 2024, 4:19 PM

#

I'll try removing it from the layout

barren fossil Nov 28, 2024, 4:19 PM

#

Your admin styles will go goofy but yeah

tranquil echo Nov 28, 2024, 4:19 PM

#

I have git, so if it gets regenerated I'll be able to see it and just remove it again

neon cosmos Nov 28, 2024, 4:20 PM

#

barren fossil Why not just use the sonner tooltip that comes out of the box?

thats a good point, i havent got to cleaning up my older components but will switch to sonner

barren fossil Nov 28, 2024, 4:24 PM

#

Somehow I wonder if excluding the css import for admin styles will fix it

tranquil echo Nov 28, 2024, 4:25 PM

#

funnily enough, removing the scss and editing the layout does not fix it

barren fossil Nov 28, 2024, 4:25 PM

#

Greyshadow about to drop a bomb

tranquil echo Nov 28, 2024, 4:25 PM

#

I am guessing when building, they are regenerated?

barren fossil Nov 28, 2024, 4:25 PM

#

Can you try removing the @payloadcms/next/css from layout

#

Oh, you did remove it?

tranquil echo Nov 28, 2024, 4:26 PM

#

huh, but both are used?

#

I removed the scss import from the layout

#

didnt work

barren fossil Nov 28, 2024, 4:26 PM

#

No no, I mean import '@payloadcms/next/css'

tranquil echo Nov 28, 2024, 4:26 PM

#

I can try

#

I think that its gonna break the entire admin ui

barren fossil Nov 28, 2024, 4:31 PM

#

Yeah, they are the styling of the ui

#

But I think somethings not being resolved correctly

#

Honestly not too sure

tranquil echo Nov 28, 2024, 4:31 PM

#

well... the style certainly is missing in my dev build so far

#

doomed to wait 5 minutes for my pipeline every time

barren fossil Nov 28, 2024, 4:32 PM

#

/next/dist/prod/styles.css are the style sfor the whole admin ui, in the package.json (near the bottom) it gets mapped to /next/css

#

So that's what /next/css import is

tranquil echo Nov 28, 2024, 4:33 PM

#

guess we doing over time

barren fossil Nov 28, 2024, 4:33 PM

#

Hmm I'm not getting this issue on a local build of the templates

tranquil echo Nov 28, 2024, 4:36 PM

#

FROM node:20.11.0-alpine AS base

WORKDIR /home/node/app

RUN mkdir -p /home/node/app/media \
    && chown node /home/node/app/media

RUN corepack enable && corepack prepare yarn@4 --activate

RUN apk add --update git
FROM base AS production

COPY package.json yarn.lock .yarnrc.yml ./
RUN yarn install
COPY . .

ENV NODE_ENV=production

RUN mkdir .next && chown node:node .next

USER node

RUN yarn build

CMD ["yarn", "start"]

#

this is how I build for production

tranquil echo Nov 28, 2024, 4:37 PM

#

barren fossil No no, I mean `import '@payloadcms/next/css'`

doesn't work

#

everything just looks broken now

barren fossil Nov 28, 2024, 4:37 PM

#

Lol yeah

tranquil echo Nov 28, 2024, 4:37 PM

#

exact same error

barren fossil Nov 28, 2024, 4:37 PM

#

Damn

#

Nothing stands out to me in your dockerfile

#

@neon cosmos Also docker?

tranquil echo Nov 28, 2024, 4:41 PM

#

im leaving the office for today, maybe tomorrow I can further investigate

barren fossil Nov 28, 2024, 4:42 PM

#

Sounds good, I'll keep looking into it and will come back here if I find anything useful

neon cosmos Nov 28, 2024, 4:57 PM

#

nope, no docker here

#

will also report back if i find something

barren fossil Nov 28, 2024, 5:39 PM

#

Might be this: #general message

#

Not sure tho

barren fossil Nov 28, 2024, 8:48 PM

#

Good news: https://github.com/payloadcms/payload/pull/9603/files

#

Next release I suppose

#

Turns out it was the issue above

ripe kestrel Nov 28, 2024, 8:49 PM

#

Will have a canary ready in the next 5m, then you don't need to wait for the next release ^^

barren fossil Nov 28, 2024, 8:49 PM

#

Absolutely sensational

#

Thanks Alessio

ripe kestrel Nov 28, 2024, 8:56 PM

#

you're welcome! Here's the canary with the fix: 3.2.2-canary.a11698b

barren fossil Nov 28, 2024, 8:56 PM

#

@tranquil echo @astral flume @neon cosmos

tranquil echo Nov 28, 2024, 8:57 PM

#

Ah classic

#

Thanks for the fix Alessio

heady fableBOT Nov 28, 2024, 9:01 PM

#

You do not have permission to mark this thread as solved. Only thread creators, contributors and payload team members can mark a thread as solved.

tranquil echo Nov 28, 2024, 9:01 PM

#

Oh funny, I don't have permission to make it as solved :p

barren fossil Nov 28, 2024, 9:02 PM

#

Maybe because I moved it?

heady fableBOT Nov 28, 2024, 9:02 PM

#

Payload Bot

Thread Solved!

Glad your issue was resolved! :tada: If you want to help make payload better, please give us a :star: on GitHub and review us - It helps us a lot.

🌟 Star Us on GitHub

Click here to star us on GitHub

👍 Review Us

Click here to review us on G2

tranquil echo Nov 28, 2024, 9:02 PM

#

Likely

ripe kestrel Nov 28, 2024, 9:02 PM

#

oh strange, the bot should be able to detect the thread creator for moved threads

neon cosmos Nov 28, 2024, 10:12 PM

#

Thanks @ripe kestrel

tranquil echo Nov 29, 2024, 9:58 AM

#

I just did a deployed a release this morning with the canary version, and it has indeed been fixed

#

Thanks again

barren fossil Nov 29, 2024, 6:08 PM

#

You guys should be able to move off canary and on to 3.2.2 now that it's released

neon cosmos Nov 29, 2024, 6:13 PM

#

👏🏼 good stuff

#Fixing CSS not defined Error in Next.js Production

Documentation: