./node_modules/.pnpm/@payloadcms+next@3.0.2_graphql@16.9.0_monaco-editor@0.52.0_next@15.0.0_react-dom@19.0.0-rc-65_gdwoz7aioaillroti2i5plvks4/node_modules/@payloadcms/next/dist/prod/styles.css

Is this a known issue? If so is there a way to fix it?

Failed To Compile: Module parse failed: Unexpected character '@' (1:0) | PayloadCMS v3

Also, it comes from this I believe

/src/app/(payload)/layout.tsx

(not changed)

zed0547last year
Hmm can you check that your payload layout.tsx looks like the one in the breaking changes here:
https://github.com/payloadcms/payload/releases/tag/v3.0.0-beta.128

ashketshuplast year

Yes, give me just a sec

Answering you, this is my current layout.tsx:

/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
import type { ServerFunctionClient } from 'payload'

import '@payloadcms/next/css'
import config from '@payload-config'
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

The only thing it jumps out as different is the import of

'@payloadcms/next/css'

which is probably what's causing the problem

zed0547last year
Go head and add that
ashketshuplast year
I mean, what I'm saying is that mine has it and the one shown in the release doesnt
zed0547last year
Oh no it should have it

Does it work without it?

It's just css so shouldn't make much difference

But it should be in your layout.tsx
ashketshuplast year
Im running to test it without

Nope- Still crashes
zed0547last year
Ok, add it back in, I think it might be cache

Delete lockfile, node_modules, .next, reinstall
ashketshuplast year
Nope, it keeps on breaking

This is the given error maybe this way something may jump out to you

Question. Is it possible that this happens cuz its using NextJS 15.0.0 instead of 15.0.3?
zed0547last year
15 should be fine

Are you importing anything aside from the css anywhere?
ashketshuplast year
How so?
zed0547last year
Your issue reads like some kind of import problem

Module parsing error

It's weird

Maybe run create-payload-app in a new folder and move project files over?
ashketshuplast year
I did that for this one ;-;
zed0547last year
Try running create-payload-app and updating your version to 3.1.0

Like select the option that says updgrade pakcages
ashketshuplast year
that would be
npx create-payload-app
?
zed0547last year
ya
ashketshuplast year
Is it supposed to ask for a project name?
zed0547last year
It should detect your installation

If it goes straight to asking for a project name then you have an invalid install
ashketshuplast year
zed0547last year
Shareyour package.json

Just sigint it
ashketshuplast year
sigint?
zed0547last year
ctrl + c

ashketshuplast year

Ah ok

{
  "name": "BackOffice-Opta",
  "description": "A blank template to get started with Payload",
  "version": "1.0.0",
  "main": "dist/server.js",
  "license": "MIT",
  "scripts": {
    "dev": "env-cmd nodemon src/server.ts ",
    "build:payload": "env-cmd payload build",
    "build:server": "tsc",
    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
    "serve": "env-cmd node dist/server.js",
    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
    "generate:types": "env-cmd payload generate:types",
    "generate:graphQLSchema": "env-cmd payload generate:graphQLSchema",
    "payload": "env-cmd payload"
  },
  "dependencies": {
    "@payloadcms/bundler-webpack": "^1.0.0",
    "@payloadcms/db-mongodb": "^1.0.0",
    "@payloadcms/plugin-cloud": "^3.0.0",
    "@payloadcms/richtext-slate": "^1.0.0",
    "assert": "^2.1.0",
    "axios": "^1.7.7",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "dotenv": "^16.4.5",
    "env-cmd": "^10.1.0",
    "express": "^4.19.2",
    "google-spreadsheet": "^3.3.0",
    "luxon": "^3.5.0",
    "memory-cache": "^0.2.0",
    "mongoose": "^8.8.0",
    "node-cron": "^3.0.3",
    "os-browserify": "^0.3.0",
    "payload": "latest",
    "promise.allsettled": "^1.0.7",
    "querystring-es3": "^0.2.1",
    "stream-browserify": "^3.0.0",
    "url": "^0.11.4",
    "util": "^0.12.5",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^22.9.0",
    "copyfiles": "^2.4.1",
    "nodemon": "^2.0.20",
    "ts-node": "^9.1.1",
    "typescript": "^4.9.5",
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  },
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

zed0547last year
Ok, your packages are all over the place

All Payload pacakges should be on the same version

They should all match your main paylaod version
ashketshuplast year
So 3.1.0?
zed0547last year
My recommendation: replace latest with 3.1.0, replace all payloadcms package version with 3.1.0

Delete node modules, delete .next, delete lockfile

Reinstall

ashketshuplast year

Ok, I'll do that

I just noticed I shared the wrong package.json

{
    "name": "backoffice-opta",
    "version": "1.0.0",
    "description": "A blank template to get started with Payload 3.0",
    "license": "MIT",
    "type": "module",
    "scripts": {
        "build": "env-cmd next build",
        "dev": "env-cmd next dev",
        "devsafe": "rm -rf .next && env-cmd next dev",
        "generate:importmap": "env-cmd payload generate:importmap",
        "generate:types": "env-cmd payload generate:types",
        "lint": "env-cmd next lint",
        "payload": "env-cmd payload",
        "start": "env-cmd next start"
    },
    "dependencies": {
        "@payloadcms/db-mongodb": "latest",
        "@payloadcms/next": "latest",
        "@payloadcms/payload-cloud": "latest",
        "@payloadcms/richtext-lexical": "latest",
        "axios": "^1.7.7",
        "cors": "^2.8.5",
        "cross-env": "^7.0.3",
        "dotenv": "^16.4.5",
        "env-cmd": "^10.1.0",
        "express": "^4.21.1",
        "graphql": "^16.8.1",
        "luxon": "^3.5.0",
        "memory-cache": "^0.2.0",
        "mongoose": "^8.8.2",
        "next": "15.0.0",
        "payload": "latest",
        "promise.allsettled": "^1.0.7",
        "react": "19.0.0-rc-65a56d0e-20241020",
        "react-dom": "19.0.0-rc-65a56d0e-20241020",
        "sharp": "0.32.6",
        "zod": "^3.23.8"
    },
    "devDependencies": {
        "@types/cors": "^2.8.17",
        "@types/express": "^5.0.0",
        "@types/luxon": "^3.4.2",
        "@types/node": "^22.9.3",
        "@types/promise.allsettled": "^1.0.6",
        "@types/react": "npm:types-react@19.0.0-rc.1",
        "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
        "eslint": "^8",
        "eslint-config-next": "15.0.0",
        "typescript": "5.6.3"
    },
    "engines": {
        "node": "^18.20.2 || >=20.9.0"
    },
    "pnpm": {
        "overrides": {
            "@types/react": "npm:types-react@19.0.0-rc.1",
            "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
        }
    },
    "overrides": {
        "@types/react": "npm:types-react@19.0.0-rc.1",
        "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1"
    },
    "packageManager": "pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
}

This is the real one

zed0547last year
On this one you used pnpm create-payload-app and get prompted for a dir name?
ashketshuplast year
yes
zed0547last year
Sorry pnpx*

Can you do pnpm why payload
ashketshuplast year
I used pnpm not pnpx

Do I need to use pnpx to create the payload app?
zed0547last year
Yeah I think so

or pnpm dlx
ashketshuplast year
what is the dlx option?
zed0547last year
they're just aliases

they do the same thing

dlx and pnpx
ashketshuplast year
Using pnpx somehow solved things

I noticed that there were some react packages that it added in the dependencies that were only on the dev side.

oh well, thanks for the help.

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.