Sveltekit demo throws error

[mudcube]

Internal server error

500 error is thrown when running demos/sveltekit package using vite dev.

The following error is logged in the browsers console:

ReferenceError: Prism is not defined
    at chunk-6JJXRI76.js?v=5eb5b87e:2:1
handleError @ app.js:16
handle_error @ client.js?v=5eb5b87e:1620
_hydrate @ client.js?v=5eb5b87e:2386
await in _hydrate (async)
start @ client.js?v=5eb5b87e:293
(anonymous) @ (index):2136
Promise.then (async)
(anonymous) @ (index):2135

Live svelte-lexical codebase

Next, I tried to debug the issue with live code.

I could not find instruction on how to do this, so booted up packages/svelte-lexical using vite dev, and rewrote the src/routes/+page.svelte to use the same code as the demos/sveltekit. Is there a better way to live debug?

Unfortunately, ran into this issue:

Error: Failed to resolve entry for package "svelte-lexical". The package may have incorrect main/module/exports specified in its package.json.

The solution to this was, rewriting MarkdownShortcutPlugin.svelte references to svelte-lexical to use the local copies of getEditor and the ImageNode imports. Resolving this allowed the live code to work within sveltekit.

npm svelte-lexical

I am unable to get the npm version of the svelte-lexical package working, however. I don't think it's only because of the issue with MarkdownShortcutPlugin.svelte. The Prism issue seems to resolve with adding the following to the vite config:

ssr: {
    noExternal: [/^(lexical|@lexical\/.*)$/],
}

But, once this resolves the Prism error, the following error occurs;

TypeError: Cannot set properties of undefined (setting 'class-name') at Object.extend (chunk-GB7WFCTK.js?v=ce5c0a11:301:26) at chunk-SSOLOCL7.js?v=ce5c0a11:7:43 at chunk-SSOLOCL7.js?v=ce5c0a11:92:3

Additional note

Another note on sveltekit compatibility: CodeActionMenuPlugin and FloatingLinkEditorPlugin reference document at the top scope, so unable to get either of those plugins working within svelte-lexical local package, or from the npm repository.

[umaranis]

Hi @mudcube ,

Prism is not defined

It is working fine with pnpm which I have been using for this project. That's why I didn't come across this issue.

In my testing, the Prism undefined issue happens with npm dev build (production build works fine). The reason seems to be Prism.js package being CJS (not supporting ESM). We need to check if there is any ESM build available for Prism.js to resolve this issue.

Live coding

Regarding live coding, it works with pnpm as the project is set up as a monorepo (You will have run build on svelte-lexical for the changes to be picked up automatically by HMR).

Plugins not supporting SvelteKlt

Yeah, not all plugins support SvelteKlt at the moment. I will fix the one you pointed out on priority.

[mudcube]

That you so much for your thoughtful response 😊.

It sounds like PrismJS v2.0 is planned to have ESM support, but no word when that will be. Since PrismJS is included in the Lexical package, if there was an ESM version, would we need to get the commit upstream in Lexical proper to sort out the issue, or do you think there'd be another way around?

Do you happen to have a Patreon, or somewhere to send a thank you for your hard work on this project?

[umaranis]

Hi @mudcube ,

There is an ESM wrapper for Prism.js that I found in lexical repo. I will give it a go and share the update here later this week. I believe it is better to commit upstream but there is always an option to fork a particular plugin into svelte-lexical if need be.

Regarding Patreon, I have enabled the Sponsor Me in my GItHub profile. thanks :)

[umaranis]

Removed the 'svelte-lexical` references from MarkdownShortcutPlugin, instead using local references. 26e52caf97112fe7950c2905650c1c78ed2777c4

[umaranis]

MarkdownShortcutPlugin now supports SvelteKit 1d5d16352b6405e46692e5a16e6473c9351d6da9

[umaranis]

• Most of the packages are tested to work with SvelteKit
• Prismjs issue with dev build when npm is used as a package manager is resolved by adding npm workspaces