Next-Payload not working together with plugin-seo

[payloadcms]

Next-Payload not working together with plugin-seo

[onepoordeveloper]

Ok, so based on my discussion at Payload's official discord (https://discord.com/channels/967097582721572934/1128234019012743241) this can be resolved by following the below steps

1. use withPayload
2. add the problematic plugin @payloadcms/plugin-seo in transpilePackages
3. boom

  transpilePackages: ['@react-three/postprocessing', '@payloadcms/plugin-form-builder', '@payloadcms/plugin-seo'],

[jacobsfletch]

@onepoordeveloper amazing! Some context here: transpiling is necessary when importing raw .scss files (like some Payload components do). Next.js will transpile scss modules just fine, but Payload is intentionally not using scss modules to promote css customization and style overrides.

[onepoordeveloper]

@rpfaeffle I'm facing this also on my localhost. Did you find a solution?

[rpfaeffle]

Hey @onepoordeveloper,

my currrent workaround is adding the fields manually without the features provided by the plugin.

[jacobsfletch]

@JarrodMFlesch do you have any idea what might be going on here? Would #45 fix this?

[onepoordeveloper]

any update on this plz?

[jacobsfletch]

Hey @rpfaeffle and @onepoordeveloper, it looks like that error is because the plugin imports a React component that uses scss and the compiler does not recognize the syntax. Do either of you have sass installed in your Next.js app? I believe Next.js natively supports it, so all you have to is run yarn add sass or npm i --save sass and no additional setup is needed. Give that a try and let me know if the error persists!

[rpfaeffle]

Hey @jacobsfletch,

I do have sass as well as sass-loader installed in my Next.js app. Do you think the error might be related to the fact that I am using pnpm as my package manager?

[onepoordeveloper]

@jacobsfletch thank you for the response.

I had sass in my project. I realized that it is not needed so I

1. removed it from package.json
2. removednode_modules directory
3. removed package-lock.json
4. ran npm i
5. and npm run dev

and the error still persists.

I also attempted the install with yarn but had no success.

[onepoordeveloper]

@jacobsfletch I noticed the same error appears when I am using @payloadcms/plugin-form-builder

This is my configuration, results are same if I keep everything to default like formBuilder({}).

@import '../../../scss/styles.scss';
^

SyntaxError: Invalid or unexpected token
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/ahmad/projects/f44/yungo/node_modules/payload/dist/admin/components/forms/Label/index.js:9:1)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/ahmad/projects/f44/yungo/node_modules/payload/dist/admin/components/forms/field-types/Text/Input.js:8:33)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/ahmad/projects/f44/yungo/node_modules/payload/dist/admin/components/forms/field-types/Text/index.js:33:33)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/ahmad/projects/f44/yungo/node_modules/payload/components/forms.js:27:16)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/ahmad/projects/f44/yungo/node_modules/@payloadcms/plugin-form-builder/dist/collections/Forms/DynamicFieldSelector.js:40:15)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/Users/ahmad/projects/f44/yungo/node_modules/@payloadcms/plugin-form-builder/dist/collections/Forms/fields.js:15:30)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18) {
  page: '/'
}

[cbratschi]

I am getting the same Sass build issue but I am using Payload independently of Next.js. It happens as soon as the SEO plugin is used. How can I fix this case?

ts-node fails to load the Sass file:

[nodemon] starting `ts-node --project tsconfig.server.json src/payload/server.ts`
/.../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:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1175:20)
    at Module._compile (node:internal/modules/cjs/loader:1219:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)
    at Object.require.extensions.<computed> [as .js] (/.../node_modules/ts-node/src/index.ts:1608:43)
    at Module.load (node:internal/modules/cjs/loader:1113:32)
    at Function.Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1137:19)
    at require (node:internal/modules/helpers:121:18)
    at Object.<anonymous> (/.../node_modules/payload/src/admin/components/forms/Label/index.tsx:8:1)

[onepoordeveloper]

@cbratschi

I was facing the exact same issue and you can use my last comment above as a guide on how I fixed it.

[cbratschi]

@onepoordeveloper I am using Payload directly not through Next.js. Therefore your workaround does not apply. It's failing in this case in dev mode and also as transpiled TypeScript.

I think the problem is a different one: some client code processed through Webpack is referenced by the SEO plugin and gets used in backend code. In this case Webpack Sass is not supported.