Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte says "editor is incorrectly packaged" #10

Closed
zrthxn opened this issue Dec 15, 2021 · 2 comments
Closed

Svelte says "editor is incorrectly packaged" #10

zrthxn opened this issue Dec 15, 2021 · 2 comments

Comments

@zrthxn
Copy link

zrthxn commented Dec 15, 2021

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

idris-maps commented Dec 15, 2021

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

zrthxn commented Dec 15, 2021

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}/>

@zrthxn zrthxn closed this as completed Dec 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants