idris-maps / svelte-parts

Svelte components
https://svelte-parts.surge.sh
49 stars 5 forks source link

Svelte says "editor is incorrectly packaged" #10

Closed zrthxn closed 2 years ago

zrthxn commented 2 years ago

I'm trying to use the editor package, almost exactly as you've recommended in the readme

<script lang="ts">
  import { articles } from '$lib/store';
  import Editor from '@svelte-parts/editor';
  import 'codemirror/lib/codemirror.css';
</script>

<Editor initialValue={$articles[0].content} />

But I get the following error

@svelte-parts/editor is incorrectly packaged. Please contact the package author to fix.
7:39:52 PM [vite] Error when evaluating SSR module /node_modules/codemirror/lib/codemirror.js?v=4b019038:
ReferenceError: navigator is not defined
    at /node_modules/codemirror/lib/codemirror.js?v=4b019038:18:19
    at /node_modules/codemirror/lib/codemirror.js?v=4b019038:13:49
    at /node_modules/codemirror/lib/codemirror.js?v=4b019038:14:2
    at instantiateModule (node_modules/vite/dist/node/chunks/dep-7817f5b4.js:67424:15)

Any idea why this might be happening? Or how I can fix it?

idris-maps commented 2 years ago

Any idea why this might be happening?

codemirror, the underlying library only works in a browser context. As your error starts with [vite] Error when evaluating SSR module, I assume you trying to prerender the component on the server.

Or how I can fix it?

I do not know much about vite, sorry. I think you need to somehow tell it to render the component only when in the browser.

zrthxn commented 2 years ago

I've tried doing that like so

let Editor;

onMount(async () => {
  Editor = (await import('@svelte-parts/editor')).default;
});

This doesnt give me the error but nothing really happens, Editor is never rendered if I do

<svelte:component this={Editor}/>