-
Notifications
You must be signed in to change notification settings - Fork 45
Importing Payload components causes SyntaxError on the front-end #45
Comments
I did some further research on the problems this morning, and it is quite clear it is Next.js that messes with it. Creating a clean Next.js with "dependencies": {
"@payloadcms/next-payload": "^0.0.31",
"@radix-ui/react-slot": "^1.0.2",
"@types/node": "20.4.2",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"eslint": "8.45.0",
"eslint-config-next": "13.4.10",
"next": "13.4.10",
"payload": "^1.11.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.1.6"
}, Then I installed the plugins: [
seo({
collections: [],
}),
], And it outputted the following errors: - error /my-app/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: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> (/my-app/node_modules/payload/dist/admin/components/forms/Label/index.js:10: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> (/my-app/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> (/my-app/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> (/my-app/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> (/my-app/node_modules/@payloadcms/plugin-seo/dist/fields/MetaDescription.js:79: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> (/my-app/node_modules/@payloadcms/plugin-seo/dist/index.js:23:25)
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) {
digest: undefined
} |
So basically - If you are using Next.js version |
This might help you |
You are absolutely on the spot mate! Freaking spent an entire day trying to figure that out. And then adding Cheers! |
I still have this issue when importing payload's CodeField component when following the code described here (last comment). This import is causing the problem: But the |
@ToolReaz You'll likely have to add |
This is causing another error:
I'm using payload 1.13.4 and next-payload 0.0.35 |
That is likely because your file is ending with |
Feels like we're so close to a solution here. Unfortunately, if I follow the above process, and use the Payload component inside of a collection field as an admin component, the page displays: "No matched field found for "MyFieldName". Example // export-reletionship-field.tsx
"use client"
import RelationshipField from "payload/dist/admin/components/forms/field-types/Relationship/index.js";
export { RelationshipField };
// my-field.ts
import { RelationshipField } from "./export-reletionship-field.tsx";
export const tenant: Field = {
name: "tenant",
type: "relationship",
relationTo: "tenants",
admin: {
position: "sidebar",
components: {
Field: RelationshipField,
},
}, If instead I used a non payload component, everything works fine: ...
components: {
Field: () => <div>Hello World</div>
} // Renders as expected on detail screen
... It seems like this will be fixed automatically when payload exports all components as part of the bundle (payloadcms/payload#293), but its unclear when this will happen as it's been on the roadmap for quite a while. |
I just tried to follow your code example - and it seems to work. Not sure why you get an error saying recording.mp4 |
Sorry, I was originally trying to generalize the field name, but in the example I ended up using the actual field. In my case, the error says : "No matched field found for Tenant". I'll try and create a repro for you this evening. |
Here's minimal reproduction of the issue, using a next-payload-repro--importing-from-dist.zip And here's a video on my end: Thanks for your interest in this issue! |
@IAmNatch I'll agree with you that this is odd.. I did manage to get it to work - but the ways of doing so aren't logical 😵💫 Apparently I had to install the seo plugin, transpile it in next config and add the pages collection to the plugin. Then magically, your import of Payload fields is working as expected.. 😅
const nextConfig = {
transpilePackages: ["@payloadcms/plugin-seo"],
};
import seo from "@payloadcms/plugin-seo";
...
plugins: [
seo({
collections: ["pages"],
}),
], |
Weird! I tried this in the repro I shared earlier, but with no luck. I'm not seeing anything in the plugin-seo source code that would affect packaging like this (ie re-exporting of components, or webpack modifications), but perhaps I missed something. Let me know if you'd like another repro. |
I have tried to add a
color-picker
field to a global in Payload, but the moment I call theuseField
hook oruseFieldType
hook, it seems that the front-end is having issues - outputting following in the terminal:How to replicate
next-payload
installation directions.Field.tsx
file in thepayload
directory with following:payload.config.ts
as follows:getPayloadClient()
function on the front-end e.g. by updating the defaultlayout.tsx
file like this:This will cause the error on the front-end. And if one goes in the the
Field.tsx
file and simply remove the imported<Label />
component from Payload, then no errors appear.I have also tried not to use the Payload components, but when I call the
useField()
hook, it causes the same error.The text was updated successfully, but these errors were encountered: