Plugin causes scss compilation error when used in payloadcms

[lukzerom]

Hi everyone,

Since I have been stuck for few days I have decided to ask here. I am building right now CMS using payload + next (payloadcms package). We used there payload-plugin-oauth. But after I have used this plugin - strange errors started to show up - it try to compile scss files from node_modules/payload - and error is about unexpected token in first lines (@import). I have tried to change node, payload versions etc, deleted node modules, installing it again , nothing help. Issue is both in runtime and using builded app. When plugin is deleted - everything is fine.

node: v16.20.2

Node modules dependencies

{ "dependencies": {
    "@aws-sdk/client-cognito-identity-provider": "^3.413.0",
    "@aws-sdk/client-s3": "^3.413.0",
    "@aws-sdk/lib-storage": "^3.413.0",
    "@payloadcms/next-payload": "0.0.37",
    "@payloadcms/plugin-cloud-storage": "^1.0.19",
    "@payloadcms/plugin-nested-docs": "^1.0.6",
    "@types/node": "20.6.0",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "aws-crt": "^1.18.0",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "node-sass": "^7.0.3",
    "payload": "1.15.6",
    "payload-plugin-oauth": "^0.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass-loader": "^13.3.2",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "sass": "^1.67.0"
  }}

Next config:

const nextConfig = withPayload(
  {
    distDir: "build",
  },
  {
    configPath: path.resolve(__dirname, "./src/payload/payload.config.ts"),
    payloadPath: path.resolve(__dirname, "./src/payload/payloadClient.ts"),
  }
);

error:

- error /Users/zzz/node_modules/payload/dist/admin/components/icons/Plus/index.scss:1
@import '../../../scss/styles';
^

SyntaxError: Invalid or unexpected token

Do you know what can be wrong with this? Best regards

[thgh]

Sounds related to these lines, what is your webpack config? https://github.com/thgh/payload-plugin-oauth/blob/d422f815127d90e3356b355bc22a41b45a4af0d5/src/index.ts#L209-L219

[lukzerom]

Hey! No custom webpack config from my side. I guess it comes from withPayload method from @payloadcms/next-payload or directly from NextJS.

[thgh]

Maybe it's because of the Button import, you could copy the index.ts file and leave out the Button code. Next.js probably doesn't transpile things in node_modules whereas payload does.