Skip to content
This repository has been archived by the owner on Dec 4, 2024. It is now read-only.

Support for Sveltekit? #60

Open
BlenderBoi opened this issue Jul 15, 2023 · 12 comments
Open

Support for Sveltekit? #60

BlenderBoi opened this issue Jul 15, 2023 · 12 comments

Comments

@BlenderBoi
Copy link

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
Copy link
Owner

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

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

@BlenderBoi
Copy link
Author

BlenderBoi commented Jul 15, 2023 •
edited
Loading

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
Copy link
Owner

@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
Copy link
Author

default config as in default config for milkdown lab?

@enpitsuLin
Copy link
Owner

default config as in default config for milkdown lab?

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

@BlenderBoi
Copy link
Author

BlenderBoi commented Jul 15, 2023 •
edited
Loading

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
Copy link
Owner

@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
Copy link
Author

BlenderBoi commented Jul 15, 2023 •
edited
Loading

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
Copy link
Owner

enpitsuLin commented Jul 15, 2023 •
edited
Loading

@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
Copy link
Author

Oh Thank you so much

@BlenderBoi
Copy link
Author

BlenderBoi commented Jul 15, 2023 •
edited
Loading

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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@18601673727 @enpitsuLin @BlenderBoi