hashmd: Bytemd 1.12.4 svelte does not seem to work

Somehow adding the Editor (see component code below) does not work, and breaks any page with the editor included:

<script>
  import { Editor } from "bytemd";
  import gfm from "@bytemd/plugin-gfm";
  import bytemdLocaleDe from "bytemd/lib/locales/de.json";
  import bytemdLocaleEn from "bytemd/lib/locales/en.json";
  import { get } from "svelte/store";
  import { stores } from "@sapper/app";
  const { session } = stores();

  const plugins = [gfm()];

  function handleChange(e) {
    content = e.detail.value;
  }

  function changeLocale(locale) {
    if (locale === "de") {
      return bytemdLocaleDe;
    }
    return bytemdLocaleEn;
  }

  $: currentLocale = changeLocale(get(session).locale);

  export let content;

  let tempContent;

  function initContent() {
    if (content && content !== tempContent) {
      tempContent = content;
    }
  }

  $: initContent(content);
</script>

<div class="mb-3">
  <Editor
    value={tempContent}
    plugins={plugins}
    on:change={handleChange}
    locale={currentLocale}
  />
</div>

This error is shown in the console output

TypeError: Cannot read properties of undefined (reading '$$')
    at init$1 (index.esm.js:258:46)
    at new Editor (index.esm.js:35629:5)
    at create_fragment (index.esm.js:4897:1)

we use:

  • svelte 3.46.4
  • sapper 0.29.3
  • rollup 2.70.1

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 16 (7 by maintainers)

Most upvoted comments

Solution for me was to import it directly from node_modules:

    //import { Editor } from 'bytemd';
    import Editor from '../node_modules/bytemd/svelte/editor.svelte';

I am having the same issue with the library. When I try to load it into the page it crashes Bildschirmfoto 2022-05-30 um 15 04 29 .

I am not sure if it is caused due to incompatibilty with svelte version or node for example.

"svelte": "^3.47.0",
"webpack": "^5.48.0",

 node 16.11.1