SCSS file being compiled as JS and (obviously) erroring on "Collecting page data" step

[viral fractal]

I am quite stuck.

Trying to get payload running within NextJS by using the @payloadcms/next-payload package. All seems OK but when I run a build I get an error on the cjs loader not understanding SCSS syntax. In dev mode all is fine.

Having a hard time understanding how this can be happening, and how to prevent it.

My first thought was that payload is being imported somewhere directly but after making sure all the payload calls are being made via the req object it is no different.

- info Creating an optimized production build  
- info Compiled successfully
- info Skipping validation of types
- info Skipping linting
- info Collecting page data ...<PATH TO REPO>/node_modules/payload/dist/admin/components/forms/Label/index.scss:1
@import '../../../scss/styles.scss';
^

SyntaxError: Invalid or unexpected token
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (<PATH TO REPO>/node_modules/payload/dist/admin/components/forms/Label/index.js:9:1)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
<PATH TO REPO>node_modules/payload/dist/admin/components/forms/Label/index.scss:1
@import '../../../scss/styles.scss';

[terse nimbus]

Would you mind sharing an example repo? I have just tried to set it up locally, but can't replicate the error.

yarn create next-app

in ~/Desktop 
(╯°□°)╯ ︵ ┻━┻ ❯ yarn create next-app                   
yarn create v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "[email protected]" with binaries:
      - create-next-app
✔ What is your project named? … test
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Users/Corfitz/Desktop/test.

cd test/

yarn add @payloadcms/next-payload payload

yarn next-payload install

(Mind you - I said yes to src directory, so had to manually move pages and app directories in to the src directory)

Created .env file containing:

# mongo connection string
MONGODB_URI=mongodb://localhost/create-next-app-serverless
# payload secret
PAYLOAD_SECRET=SOME_SECRET
# path to your payload.config file
PAYLOAD_CONFIG_PATH=payload/payload.config.ts

Updated next.config.js file:

const path = require("path");
const { withPayload } = require("@payloadcms/next-payload");

/** @type {import('next').NextConfig} */
const nextConfig = withPayload(
  {
  },
  {
    configPath: path.resolve(__dirname, "./payload/payload.config.ts"),
    // Note: I removed the optional properties from here.
  }
);

module.exports = nextConfig;

Ran yarn build

And success!

[viral fractal]

Thanks for looking into it, I can confirm it works following this steps for me too. Am now in the process of moving my custom files over to the working base example step by step to figure out what part is causing issues

[viral fractal]

Kind of lost my mind here.

When moving all the payload files and next pages over to a working example, it still worked...
Copied all the things back over to the original repo... still works but no obvious diff showing what caused the fix..

Anyways, thanks for the help

[terse nimbus]

Development do be like that sometimes. 😅