Bytemd 1.12.4 svelte does not seem to work

[quasarchimaere]

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

[pd4d10]

Thanks for the feedback!

There doesn't seem to be enough information in this error message. Could you please provide a minimal production repo?

And You may want to refer to the Svelte example here

[github-actions[bot]]

This issue is stale because it has been open for 60 days with no activity.

[IoannisLafiotis]

I am having the same issue with the library. When I try to load it into the page it crashes .

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

[pd4d10]

Which version are you using? And it would help to troubleshoot if you can provide a reproduction.

[eslym]

this issue still exists until version 1.17.1, seems like the issue is with the precompiled svelte code

[github-actions[bot]]

This issue is stale because it has been open for 60 days with no activity.

[yonnic]

i have the same issue with the latest svelte, bytemd 1.17.2 and vite as bundler :(

[GuoJikun]

script src="https://unpkg.com/bytemd" is not work

[vujovicigor]

Solution for me was to import it directly from node_modules:

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

[OscarLundberg]

Same issue here @vujovicigor `s workaround worked for me

[dbradleyfl]

@vujovicigor thanks for the workaround. Same issue for me.

[powellnorma]

@pd4d10 I made a repository with which the problem is reproducible: https://github.com/powellnorma/bytemd-problem It would be great if you could take a look! Thank you.

[pd4d10]

It seems related to https://github.com/sveltejs/rollup-plugin-svelte/issues/181

[tjands]

That work around is great @vujovicigor. Thanks

[github-actions[bot]]

This issue is stale because it has been open for 60 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale.