Add support for ESM module so it can work with svelte-kit

[Yousef Abdulkarim]

I get this error when I try importing something from this package. The code is actually directly from your example. I am using svelte kit and svelte kit uses vite.

The code:

<script>
    import { Editor } from 'typewriter-editor';
    import Root from 'typewriter-editor/lib/Root.svelte';
    import Toolbar from 'typewriter-editor/lib/Toolbar.svelte';

    const editor = new Editor();
</script>

<Toolbar {editor} let:active let:commands>
    <button on:click={commands.header1}>H1</button>

    <button on:click={commands.header2}>H2</button>

    <button on:click={commands.bold}>B</button>

    <button on:click={commands.italic}>I</button>

    <button on:click={commands.undo}>←</button>

    <button on:click={commands.redo}>→</button>
</Toolbar>

<Root {editor}/>

The error:

13:33:56 [vite] Error when evaluating SSR module /node_modules/typewriter-editor/lib/index.js:
ReferenceError: exports is not defined
at eval (/node_modules/typewriter-editor/lib/index.js:17:23)
at instantiateModule (C:\Users\youse\Desktop\cvplus-svelte\node_modules\vite\dist\node\chunks\dep-0776dd57.js:68919:166)
13:33:56 [vite] Error when evaluating SSR module /node_modules/typewriter-editor/lib/stores.js:
ReferenceError: exports is not defined
at eval (/node_modules/typewriter-editor/lib/stores.js:7:23)
at instantiateModule (C:\Users\youse\Desktop\cvplus-svelte\node_modules\vite\dist\node\chunks\dep-0776dd57.js:68919:166)
13:33:56 [vite] Error when evaluating SSR module /node_modules/typewriter-editor/lib/rendering/html.js:
ReferenceError: exports is not defined
at eval (/node_modules/typewriter-editor/lib/rendering/html.js:7:23)
at instantiateModule (C:\Users\youse\Desktop\cvplus-svelte\node_modules\vite\dist\node\chunks\dep-0776dd57.js:68919:166)

[Hemal]

@joseDaKing

This seems to be a Vite issue. I'm having the same problem.

This here may help - https://kit.svelte.dev/faq#how-do-i-fix-the-error-i-m-getting-trying-to-include-a-package

It somewhat did for me - the error stayed the same but pointed to a different file instead so I think Vite continues to parse a dependency? Not entirely sure.

Keen to hear what you get if you try the same solution.

[Yousef Abdulkarim]

@HemalR
The error I got is required is not defined when I updated the package to the latest version and it is because the package uses common js modules and ECMA script modules, I read this in the link you gave me and there is also a solution.

Thanks for the help

[Jacob Wright]

So we need an ESM version of the library is what I'm reading from that FAQ.

[Yousef Abdulkarim]

@jacwright Yes exactly but I think It can be fixed without ESM module by fiddling with vite so I think it is not a major blocker but I haven't had the time to do that

[Hemal]

I'll give this a crack - never done anything quite like it before but should be able to figure it out.

I'm thinking of creating a wrapper as described in this article here. Would that be acceptable?

On a somewhat related note (relates to Sveltekit) - Typewriter doesn't currently work in an SSR environment because of some browser only modules (e.g. NodeFilter). Not sure that is worth an issue or a fix as it's not really a problem because I can't think of a scenario where SSR would be needed for a contenteditable piece of text.

[Zerowalker]

With suggestion from Blu on vite discord i tried cloning this repository and changing the typescript module settings to es2020.
And that seems to be enough to at least get it up and running.
I can't say if things are broken or not as i don't really know how it's supposed to work.

[Jacob Wright]

Try version 0.6.45. This uses modules.