bytemd

bytemd copied to clipboard

I used this package in the Svelte:

I have the same issue. I made an example/+page.svelte with almost exactly the example given on the README and it encounters the same error.

<script lang="ts">

    import { Editor, Viewer } from 'bytemd'
    import gfm from '@bytemd/plugin-gfm'
  
    let value: string = "";
    const plugins = [
      gfm(),
      // Add more plugins here
    ]
  
    function handleChange(e) {
      value = e.detail.value
    }
</script>

<style type="text/css">
    @import "bytemd/dist/index.css";
</style>

<template>
    <Editor {value} {plugins} on:change={handleChange} />
</template>

I dug a bit further on this and concluded it's because Bytemd doesn't like Vite / Sveltekit out-of-the-box.

Adding

export default defineConfig({
  // ...
  optimizeDeps: { exclude: ["bytemd"]},
}

To my vite.config.js file seems to have resolved that error.

I don't know what happened with this repository: there was already an issue on this, but it disappeared: https://github.com/bytedance/bytemd/issues/269 (broken link). I guess the maintainers deleted the repo and recreated it under the same name, thus loosing the previous issues.

Nevertheless, I can confirm that @afiorillo 's solution works (I reported the trick in the issue above)

Additionally, we have a warning (with sveltekit v2 & svelte v4)

[vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

This fix didn't work for me.

This fix didn't work for me. either, I'm using vue-cli

Does not work at all. The whole lib seems to be broken on sveltekit.