[Live preview] Cannot import package on SvelteKit adapter node

RickGeersing commented 7 months ago

Link to reproduction

No response

Describe the Bug

I want to use the live-preview package in combination with SvelteKit. Works very nicely on development workflows. But whenever I build my SvelteKit app with the adapter-node and run it I get the following error.

I've already tried to load it in as a default import ex. import livePreview from '@payloadcms/live-preview', that works on the build version but not on development.

file:///Users/_/Documents/Repositories/_/frontend/build/server/chunks/_layout.svelte-04d0619f.js:4
import { unsubscribe } from '@payloadcms/live-preview';
         ^^^^^^^^^^^
SyntaxError: Named export 'unsubscribe' not found. The requested module '@payloadcms/live-preview' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@payloadcms/live-preview';
const { unsubscribe } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)
    at async Module.component (file:///Users/_/Documents/Repositories/_/frontend/build/server/chunks/0-30e90f59.js:59:52)
    at async Promise.all (index 0)
    at async render_response (file:///Users/_/Documents/Repositories/_/frontend/build/server/index.js:2529:21)
    at async render_page (file:///Users/_/Documents/Repositories/_/frontend/build/server/index.js:3329:22)
    at async resolve (file:///Users/_/Documents/Repositories/_/frontend/build/server/index.js:3896:24)
    at async Object.handle (file:///Users/_/Documents/Repositories/_/frontend/build/server/chunks/hooks.server-b2e6cc6c.js:13:20)
    at async respond (file:///Users/_/Documents/Repositories/_/frontend/build/server/index.js:3782:22)
file:///Users/_/Documents/Repositories/_/frontend/build/server/chunks/_layout.svelte-04d0619f.js:4

Packages: "@sveltejs/kit": 1.27.6 "@sveltejs/adapter-node": 1.3.1 "vite": 4.5.0 "@payloadcms/live-preview": 0.2.1

"node": 18.19.0

To Reproduce

Create a new SvelteKit application
Install the @payloadcms/live-preview dependency.
Import and use one of the functions of live preview.
Build the app with yarn build
Run the app with yarn start
Load the page at http://localhost:3000
You'll see this error.

Payload Version

2.4.0

Adapters and Plugins

No response

madaxen86 commented 4 months ago

Same here. Also with the updated Version 0.2.2. I am using a Vite based Solid-Start project. You could probably fix it when changing the .swcrc to build UMD forma which is Node and Browser compatible. See devt.to/... and SWC Docs

{
  "$schema": "https://json.schemastore.org/swcrc",
  "sourceMaps": "inline",
  "jsc": {
    "target": "esnext",
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "dts": true
    }
  },
  "module": {
    "type": "umd"
  }
}

madaxen86 commented 4 months ago

Link to reproduction

No response

Describe the Bug

I want to use the live-preview package in combination with SvelteKit. Works very nicely on development workflows. But whenever I build my SvelteKit app with the adapter-node and run it I get the following error.

I've already tried to load it in as a default import ex. import livePreview from '@payloadcms/live-preview', that works on the build version but not on development.
file:///Users/_/Documents/Repositories/_/frontend/build/server/chunks/_layout.svelte-04d0619f.js:4
import { unsubscribe } from '@payloadcms/live-preview';
         ^^^^^^^^^^^
SyntaxError: Named export 'unsubscribe' not found. The requested module '@payloadcms/live-preview' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@payloadcms/live-preview';
const { unsubscribe } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)
    at async Module.component (file:///Users/_/Documents/Repositories/_/frontend/build/server/chunks/0-30e90f59.js:59:52)
    at async Promise.all (index 0)
    at async render_response (file:///Users/_/Documents/Repositories/_/frontend/build/server/index.js:2529:21)
    at async render_page (file:///Users/_/Documents/Repositories/_/frontend/build/server/index.js:3329:22)
    at async resolve (file:///Users/_/Documents/Repositories/_/frontend/build/server/index.js:3896:24)
    at async Object.handle (file:///Users/_/Documents/Repositories/_/frontend/build/server/chunks/hooks.server-b2e6cc6c.js:13:20)
    at async respond (file:///Users/_/Documents/Repositories/_/frontend/build/server/index.js:3782:22)
file:///Users/_/Documents/Repositories/_/frontend/build/server/chunks/_layout.svelte-04d0619f.js:4
Packages: "@sveltejs/kit": 1.27.6 "@sveltejs/adapter-node": 1.3.1 "vite": 4.5.0 "@payloadcms/live-preview": 0.2.1

"node": 18.19.0

To Reproduce

Create a new SvelteKit application

Install the @payloadcms/live-preview dependency.

Import and use one of the functions of live preview.

Build the app with yarn build

Run the app with yarn start

Load the page at http://localhost:3000

You'll see this error.

Payload Version

2.4.0

Adapters and Plugins

No response

What I did for the time till this is fixed is I copied the files from the src directory to my project (as they don't have any dependencies). This works for me now

jacobsfletch commented 5 days ago

@RickGeersing this sounds to me like an issue in the module resolution of your compiler, and I suspect there's a solution listed somewhere in this thread: https://github.com/sveltejs/kit/issues/928

For some context: in 2.0, all of Payload's packages are compiled to CommonJS. As @madaxen86 suggests, you'd need to adjust your compiler's settings based on the environment that it's targeting. Alternatively, you might be able to handle your imports differently. CommonJS is a known pain point across the ecosystem, which is why in 3.0, we've switched fully to ESM. If using 3.0 is an option, this alone might fix your issue. Because this is not an issue on Payload's end, I'm going to close this ticket. Feel free to continue the conversation as needed, though, especially with helpful solutions for others to find.

payloadcms / payload