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

philiposaurus

4 months ago

5

- 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';

• 

  imcorfitz

  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

  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!

  
• 

  philiposaurus

  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

• 

  imcorfitz

  4 months ago

  Development do be like that sometimes. 😅

  
  

  
  

  Glad I could help