typewriter-editor / typewriter

A rich text editor based off of Quill.js and Ultradom, and using Svelte for UI.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

No provided export named 'Delta' breaking Vite build

JacobL84 opened this issue · comments

While attempting to add typewriter-editor to my adapter-static SvelteKit project, I wrote the following import statements in my src/routes/+page.svelte file's <script> block:

import { Editor } from 'typewriter-editor';
import asRoot from 'typewriter-editor/lib/asRoot';
import Toolbar from 'typewriter-editor/lib/Toolbar.svelte';

The first two lines behave as normal and I can utilize them fine. The third line however, breaks my build with the following console error:
SyntaxError: The requested module '/node_modules/@typewriter/delta/dist/index.js?v=867ac9e3' does not provide an export named 'Delta' (at VM208 Line.js:1:10)

This appears to be similar to #101, however my build tool is Vite instead of Webpack. I am unable to determine what the equivalent fix would be in Vite despite consulting numerous other troubleshooting resources. If @jacwright could provide any insight on this it would be greatly appreciated.

commented

Exactly the same issue here -- spent some energy looking at this a few months back (and here again today)

Things I've tried (latest SvelteKit as far as I know).

  • various combos of optimizeDeps [include/exclude] in the SvelteKit vite.config.js file
  • different combos/patterns importing from the lib vs. src folders of node_modules
  • copying Toolbar.svelte out of node modules into my application

So far in every case I've chosen to defer this and build without the toolbar for now. Seems like at some point Vite/SvelteKit/Typewriter will converge to interop again -- all are great products more on the leading edge of progress, which has this side-effect of tricky build processes and compatibility.

If anyone has any tricks though beyond the above, I'm happy to try something out, and LMK @JacobL84 if you get anywhere too!

Similar issue here, but in my case I'm not using the toolbar but importing Delta myself.
I think vite can't handle this export line:

export * from '@typewriter/document';

Fixed my import by transforming:

import { TextDocument, Delta, Typeset, docToHTML } from 'typewriter-editor';

to

import { Typeset, docToHTML } from 'typewriter-editor';
import { TextDocument } from '@typewriter/document';
import { Delta } from '@typewriter/delta';

I just stumbled across this issue by chance and I remember that I had a similar issue in a different project (so not really sure, if this is the same issue here).

First of all, this issue occurs, when a dependency (let's call it A) of a project is provided as EMS modules, but imports another commonjs library (let's call it B).
In this case (based on my understanding), vite sees the dependency A, realizes that it is in an EMS format and then skips further processing.
I don't think that should happen, but it seems like it happens under certain conditions.
This means it does not travers the dependencies of A and hence does not realize that B would require processing/optimization to be used with vite.

However, you can tell vite to include them, as explained here: https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude

The following config worked in the case of my problem

export default defineConfig({
  optimizeDeps: {
    include: ['A > B'],
  },
})

Typewriter-document has been changed to commonjs modules now. Does this fix this problem?

Typewriter-document has been changed to commonjs modules now. Does this fix this problem?

No. I think its a Typescript/vite issue. On day three of trying everything to get this to work. Does anyone have a solution yet to get this working with sveltekit.