Critical error when trying to use with SvelteKit 1.0

[Figments]

when trying to use this library with the full release, the following error crops up:

Cannot read properties of undefined (reading 'Editor')
TypeError: Cannot read properties of undefined (reading 'Editor')
    at eval (/node_modules/svelte-tiptap/Editor.js:5:42)

perhaps this would be fixed by upgrading this library to SvelteKit 1.0, as well?

[sibiraj-s]

perhaps this would be fixed by upgrading this library to SvelteKit 1.0, as well?

I guess so. I have made the necessary changes. Some tests are failing. Will try to fix this weekend and make a release.

[sibiraj-s]

Updated to version 1 and released as v0.7.0. I am currently closing this issue. If still not fixed, do reopen.

Thanks.

[Figments]

thanks for the quick response! unfortunately, even after upgrading to 0.7.0 of the library, building this with a sveltekit project still fails in the same spot:

Cannot read properties of undefined (reading 'Editor')
TypeError: Cannot read properties of undefined (reading 'Editor')
    at eval (/node_modules/svelte-tiptap/Editor.js:5:42)

right on line 5 (this.contentElement = null;)

import { Editor as CoreEditor } from '@tiptap/core';

export class Editor extends CoreEditor {

    constructor() {
        super(...arguments);
        this.contentElement = null;
    }
}

i've also tried this with a fresh sveltekit project, only to get the same result.

[sibiraj-s]

@Figments I tried creating a fresh svelte project and tried setting up, there were no issues. Can you verify your project configuration.

[Figments]

weird that it's not working on my machine. i created a fresh sveltekit project, added all the necessary libraries, copied the minimum viable editor listed in the README (listed below), and imported the component. but still, the same error crops up.

<script lang="ts">
    import { onMount } from 'svelte';
    import type { Readable } from 'svelte/store';
    import { createEditor, Editor, EditorContent } from 'svelte-tiptap';
    import StarterKit from '@tiptap/starter-kit';

    let editor: Readable<Editor>;

    onMount(() => {
        editor = createEditor({
            extensions: [StarterKit],
            content: `Hello world!`,
        });
    });
</script>

<EditorContent editor={$editor} />

Cannot read properties of undefined (reading 'Editor')
TypeError: Cannot read properties of undefined (reading 'Editor')
    at eval (/node_modules/svelte-tiptap/Editor.js:5:42)

i don't think it's a problem with my configuration in this case, unless i'm missing something?

[sibiraj-s]

Strange 🤔 . I verified the repl too, works fine there as well. https://svelte.dev/repl/fa178c3b141a4c52a2d74eecb2279c4b?version=3.55.0

[amirhhashemi]

I also had the same problem. Changing the EditorContent import fixed it for me:

<script lang="ts">
    import StarterKit from "@tiptap/starter-kit";
    import { onMount } from "svelte";
    import { createEditor, type Editor } from "svelte-tiptap";
    import EditorContent from "svelte-tiptap/EditorContent.svelte";
    import type { Readable } from "svelte/store";

    let editor: Readable<Editor>;

    onMount(() => {
        editor = createEditor({
            extensions: [StarterKit],
            content: `Hello world!`
        });
    });
</script>

<EditorContent editor={$editor} />

[sibiraj-s]

I couldn’t find anything wrong with the library 🤔 .

[Figments]

I also had the same problem. Changing the EditorContent import fixed it for me:

<script lang="ts">
  import StarterKit from "@tiptap/starter-kit";
  import { onMount } from "svelte";
  import { createEditor, type Editor } from "svelte-tiptap";
  import EditorContent from "svelte-tiptap/EditorContent.svelte";
  import type { Readable } from "svelte/store";

  let editor: Readable<Editor>;

  onMount(() => {
      editor = createEditor({
          extensions: [StarterKit],
          content: `Hello world!`
      });
  });
</script>

<EditorContent editor={$editor} />

i've also tried this, but encountered the same error as before.

[leerobert]

I was able to resolve this issue by moving svelte-tiptap into my dependencies instead of devDependencies on install. I also had to ensure my .npmrc had auto-install-peers=true configured as when I pnpm i svelte-tiptap it would have peer dependency errors.

I also added

// page.ts
export const ssr = false;

[sibiraj-s]

Hi, Sorry for the delay in response. I tried to reproduce this issue, but for some reason it is working without any issues for me.

I created a fresh svelte kit project with npm create svelte@latest my-app and installed the package. It works fine. It also works well in the repl as well as the projects demo itself.

Can someone provide a reproducible example, so that I can compare the differences. Also any help in figuring this out is very much appreciated.

[amirhhashemi]

Now I can't reproduce it in the same project!! Your README example works perfectly. I don't know what was the problem but it seems to be resolved for me.

[sibiraj-s]

Great.

Closing this issue for now. As it appears there is nothing wrong with the library itself. Feel free to reopen if required.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in the thread.