Theo's Typesafe Cult•14mo ago

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

I am quite stuck. Trying to get PayloadCMS 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. I am not sure if the issue is even related to the payload package. How can the cjs loader think a scss file is js? Having a hard time understanding how this can be happening, and how to prevent it. Probably hard to see why based off of this info but pls help me look into the right direction. Thanks in advance! Nextjs build output:

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

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

2 Replies

Matvey•14mo ago

did you run npm install sass?

philiposaurus•14mo ago

I did, these are all the installed packages:

  "dependencies": {
    "@faceless-ui/css-grid": "^1.2.0",
    "@faceless-ui/modal": "^2.0.1",
    "@payloadcms/next-payload": "^0.0.25",
    "@payloadcms/plugin-cloud": "^1.0.1",
    "@payloadcms/plugin-seo": "^1.0.13",
    "@payloadcms/plugin-stripe": "^0.0.13",
    "@stripe/react-stripe-js": "^1.16.3",
    "@stripe/stripe-js": "^1.46.0",
    "@swc/wasm": "^1.3.60",
    "@vercel/edge": "^0.3.4",
    "cloudinary": "^1.37.0",
    "escape-html": "^1.0.3",
    "graphql": "^16.6.0",
    "next": "^13.4.3",
    "payload": "^1.8.3",
    "payload-admin-bar": "^1.0.5",
    "qs": "^6.11.1",
    "querystring-es3": "^0.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.41.5",
    "sass": "^1.62.1",
    "sass-loader": "^13.3.0",
    "slate": "^0.84.0",
    "stream-browserify": "^3.0.0",
    "stripe": "^11.6.0",
    "url": "^0.11.0"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.1.6",
    "@payloadcms/eslint-config": "^0.0.1",
    "@swc/core": "^1.3.60",
    "@types/escape-html": "^1.0.2",
    "@types/node": "18.11.3",
    "@types/qs": "^6.9.7",
    "@types/react": "18.0.21",
    "@typescript-eslint/eslint-plugin": "^5.51.0",
    "@typescript-eslint/parser": "^5.51.0",
    "eslint": "8.25.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-filenames": "^1.3.2",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "prettier": "^2.7.1",
    "typescript": "4.8.4"
  }

  "dependencies": {
    "@faceless-ui/css-grid": "^1.2.0",
    "@faceless-ui/modal": "^2.0.1",
    "@payloadcms/next-payload": "^0.0.25",
    "@payloadcms/plugin-cloud": "^1.0.1",
    "@payloadcms/plugin-seo": "^1.0.13",
    "@payloadcms/plugin-stripe": "^0.0.13",
    "@stripe/react-stripe-js": "^1.16.3",
    "@stripe/stripe-js": "^1.46.0",
    "@swc/wasm": "^1.3.60",
    "@vercel/edge": "^0.3.4",
    "cloudinary": "^1.37.0",
    "escape-html": "^1.0.3",
    "graphql": "^16.6.0",
    "next": "^13.4.3",
    "payload": "^1.8.3",
    "payload-admin-bar": "^1.0.5",
    "qs": "^6.11.1",
    "querystring-es3": "^0.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.41.5",
    "sass": "^1.62.1",
    "sass-loader": "^13.3.0",
    "slate": "^0.84.0",
    "stream-browserify": "^3.0.0",
    "stripe": "^11.6.0",
    "url": "^0.11.0"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.1.6",
    "@payloadcms/eslint-config": "^0.0.1",
    "@swc/core": "^1.3.60",
    "@types/escape-html": "^1.0.2",
    "@types/node": "18.11.3",
    "@types/qs": "^6.9.7",
    "@types/react": "18.0.21",
    "@typescript-eslint/eslint-plugin": "^5.51.0",
    "@typescript-eslint/parser": "^5.51.0",
    "eslint": "8.25.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-filenames": "^1.3.2",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "prettier": "^2.7.1",
    "typescript": "4.8.4"
  }

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

Gaming

Programming

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