NX + Payload SCSS import issue

[freercurse]

Link to reproduction

No response

Describe the Bug

Im creating a monorepo using NX and wanting to include payload to test out when integrating with NX and different technologies and originally had a work demo,

Recently I've been following the website example to enable a more complex setup for articles and help with setting up users and access control when ive come across a persistent error which seems to have occurred previously.

PATH\node_modules\payload\dist\admin\components\elements\Banner\index.scss:1
@import '../../../scss/styles.scss';
^

SyntaxError: Invalid or unexpected token
at internalCompileFunction (node:internal/vm:128:18)
at wrapSafe (node:internal/modules/cjs/loader:1279:20)
at Module._compile (node:internal/modules/cjs/loader:1331:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
at Module.load (node:internal/modules/cjs/loader:1205:32)
at Function.Module._load (node:internal/modules/cjs/loader:1021:12)
at Function.Module._load (PATH\node_modules@nx\js\src\executors\node\node-with-require-overrides.js:18:31)
at Module.require (node:internal/modules/cjs/loader:1230:19)
at require (node:internal/modules/helpers:179:18)
at Object. (PATH\node_modules\payload\dist\admin\components\elements\Banner\index.js:21:1)

I have tried all sorted, even removing all of the components within the payload config to no joy, multiple different node versions and installations of sass and addtion to ts and webpack config. nothing.


Here is my config import { postgresAdapter } from '@payloadcms/db-postgres';

import { viteBundler } from '@payloadcms/bundler-vite';
import { buildConfig } from 'payload/config';
import { Articles } from './apps/Holy_API/src/payload/Articles';
import Categories from './apps/Holy_API/src/payload/Categories';
import Users from './apps/Holy_API/src/payload/Users';
import { Media } from './apps/Holy_API/src/payload/Media';
import { lexicalEditor } from '@payloadcms/richtext-lexical';

export default buildConfig({
admin: {
user: Users.slug,
bundler: viteBundler(),
livePreview: {
url: 'http://localhost:3000',
collections: ['articles'],
},
},
db: postgresAdapter({
pool: {
connectionString: process.env.DATABASE_URL,
},
}),
editor: lexicalEditor({}),
collections: [Articles, Categories, Users, Media],
globals: [
{
slug: 'header',
fields: [
{
name: 'nav',
type: 'array',
fields: [
{
name: 'page',
type: 'relationship',
relationTo: 'articles',
},
],
},
],
},
],
});

Any help would be much appreciated

To Reproduce

My specific configuration involves nx monorepo.
I don't think it is connected, as the error is coming through a payload module

But i was following the website example : https://github.com/payloadcms/payload/blob/main/templates/website/src/payload/payload.config.ts

Here is a screen shot of my file system

Payload Version

latest

Adapters and Plugins

No response

[jmikrut]

Hey @freercurse — you should use the website template from Payload 3.0 beta on this and this issue should be solved.

npx create-payload-app@beta -t website

We now no longer import client-side dependencies within the config which makes it easier for monorepo packages to import the config and not have to safely disregard any client-side imports like SCSS. Will convert this to a discussion to keep helping if necessary though!