Support for Sveltekit?

[BlenderBoi]

I hope this is not the wrong place to ask this

This is Regarding @milkdown-lab/plugin-menu

I am trying to add this plugin into milkdown in my Sveltekit environment, and I think it doesn't work very well with sveltekit

Is it possible for this to be compatible with sveltekit?

Thank you

[enpitsuLin]

I'm not familiar with Svelte, is there any error reported?

I might take some time to look into the performance in Sveltekit.

[BlenderBoi]

when i try and import this

import { menu, menuDefaultConfig } from '@milkdown-lab/plugin-menu'

it gave me this

[vite] Error when evaluating SSR module /src/lib/Editor.svelte: failed to import "@milkdown-lab/plugin-menu"
|- ReferenceError: document is not defined
    at createIconContent (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/@milkdown-lab/plugin-menu/lib/index.js:180:16)
    at file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/@milkdown-lab/plugin-menu/lib/index.js:197:16
    at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:246:24)
    at async nodeImport (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55896:17)
    at async ssrImport (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55789:24)
    at async eval (eval at instantiateModule (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55848:28), <anonymous>:14:32)
    at async instantiateModule (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55851:9)

5:32:01 pm [vite] Error when evaluating SSR module /src/routes/new-product/+page.svelte: failed to import "/src/lib/Editor.svelte"
|- ReferenceError: document is not defined
    at createIconContent (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/@milkdown-lab/plugin-menu/lib/index.js:180:16)
    at file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/@milkdown-lab/plugin-menu/lib/index.js:197:16
    at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:246:24)
    at async nodeImport (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55896:17)
    at async ssrImport (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55789:24)
    at async eval (eval at instantiateModule (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55848:28), <anonymous>:14:32)
    at async instantiateModule (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55851:9)

Internal server error: document is not defined
      at createIconContent (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/@milkdown-lab/plugin-menu/lib/index.js:180:16)
      at file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/@milkdown-lab/plugin-menu/lib/index.js:197:16
      at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
      at async DefaultModuleLoader.import (node:internal/modules/esm/loader:246:24)
      at async nodeImport (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55896:17)
      at async ssrImport (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55789:24)
      at async eval (eval at instantiateModule (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55848:28), <anonymous>:14:32)
      at async instantiateModule (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55851:9)
ReferenceError: document is not defined
    at createIconContent (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/@milkdown-lab/plugin-menu/lib/index.js:180:16)
    at file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/@milkdown-lab/plugin-menu/lib/index.js:197:16
    at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:246:24)
    at async nodeImport (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55896:17)
    at async ssrImport (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55789:24)
    at async eval (eval at instantiateModule (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55848:28), <anonymous>:14:32)
    at async instantiateModule (file:///C:/Users/blend/OneDrive/Desktop/Sveltekit%20Projects/App/node_modules/vite/dist/node/chunks/dep-8609dc5d.js:55851:9)

I understand it is most likely sveltekit problem, but I was wondering if this it is possible to make it work

Also, Thank you so much for responding so quickly

[enpitsuLin]

@BlenderBoi
There has defaultConfig use document to create icons which doesn't in SSR env in code

I think you can create your own config that uses in Sveltekit w/ browser environment check, for example

import { menu, menuConfigCtx, type MenuConfigItem } from '@milkdown-lab/plugin-menu'
import { browser } from '$app/environment';

const createIconContent = (icon: string) => {
  if(!browser) return null
  const span = document.createElement('span')
  span.className = 'material-icons material-icons-outlined'
  span.textContent = icon
  return span
}

export const defaultConfigItems: MenuConfigItem[][] = [
 [
    {
      type: 'button',
      content: createIconContent('turn_left'),
      key: 'Undo',
      disabled: (ctx) => {
        try {
          if (!ctx.get('historyProviderConfig')) {
            return true
          }
        } catch (error) {
          return false
        }
        return false
      },
    },
    {
      type: 'button',
      content: createIconContent('turn_right'),
      key: 'Redo',
      disabled: (ctx) => {
        try {
          if (!ctx.get('historyProviderConfig')) {
            return true
          }
        } catch (error) {
          return false
        }
        return false
      },
    },
  ], 
]

Might add more menu items check doc

[BlenderBoi]

default config as in default config for milkdown lab?

[enpitsuLin]

default config as in default config for milkdown lab?

just in @milkdown-lab/plugin-menu to provide an example

[BlenderBoi]

Sorry, Im a little new to web dev so im basicly going in blind with alot of things and my fundalmentals aren't very good

Do I modify the source code to fix this? or do I write code and extend it or something?

or it's not a solution, but just explaining something?

I think i get the error just from importing { menu }

[enpitsuLin]

@BlenderBoi

Thanks. but I think there is no necessary.

This problem is framework specific, It's no need to modify the source.

Feel free to raise an issue for some other problem

[BlenderBoi]

Ahh ok, So I guess I can't use this with Sveltekit for now?
Theres nothing much I can do right?

If it is then I'll just close this issue?

Tho, If it is possible, then it would be nice

[enpitsuLin]

@BlenderBoi

I take time to create an example, you can preview it in stackblitz and its' source code in repo, which uses sveltekit w/ vite

I just add simple menu items, hope it can help you

[BlenderBoi]

Oh Thank you so much

[BlenderBoi]

Interesting, I guess the problem lies in my sveltekit setup,

I think your demo code is just svelte, so it works (maybe)

I'm comparing my setup with your demo and they are very similar, but they do have differences

I guess I'll have to study your demo code to figure out how to make it work on mine

Maybe I just need to study how vite and svelte work more in depth

My problem is not solved yet, but perhaps I got a clue now

Thank you so much, I hope I can figure it out by myself

[18601673727]

“document is not defined” happens in nextjs too, I'm trying to create my own config as @enpitsuLin mentioned..