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

default discord avatar
4 months ago

I am quite stuck.

Trying to get payload running within NextJS by using the


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


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';
  • default discord avatar
    4 months ago

    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 "create-next-app@13.4.4" 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




    directories in to the





    file containing:

    # mongo connection string
    # payload secret
    # path to your payload.config 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;


    yarn build

    And success!

  • default discord avatar
    4 months ago

    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

    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

  • default discord avatar
    4 months ago

    Development do be like that sometimes. 😅

    Glad I could help

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!


Connect with the Payload Community on Discord



Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.