0

I'm trying to use the DrawFlow library from here:

https://github.com/jerosoler/Drawflow

I managed to make it work using the source file (src/drawflow.js) with the following code:

<script type='module'>
    import Drawflow from "{% static 'drawflow/src/drawflow.js' %}"

    const example = document.getElementById("drawflow");
    const editor = new Drawflow(example);

    editor.editor_mode = 'edit'; // Default
    editor.editor_mode = 'fixed'; // Only scroll

    editor.start();

    editor.addNode('node-1', 'My Node', 100, 100);

</script>

However, when I try to use the minified version, like so:

import Drawflow from "{% static 'drawflow/dist/drawflow.min.js' %}"

But I got this error:

Uncaught SyntaxError: The requested module '/static/drawflow/dist/drawflow.min.js' does not provide an export named 'default'

So after searching, I found that, as it doesn't have default export, I was suppose to import it like that:

import { Drawflow } from "{% static 'drawflow/dist/drawflow.min.js' %}"

But now I'm getting this error:

Uncaught SyntaxError: The requested module '/static/drawflow/dist/drawflow.min.js' does not provide an export named 'Drawflow'

At least now it's looking for the right import name, but it still doesn't work.

What did I miss ?

Thank you.

PS: I precise that I'm using a Django webserver, not sure if it's relevant here.

whiteShadow
  • 369
  • 4
  • 19
  • 2
    The dist version seems to be built as a UMD library, and i believe you cant do an `import` from umd libraries which is why you get the error. You can clone the project and change the webpack config to build it as a different type of library that would keep the ability to use es6 module syntax. – Patrick Evans Feb 20 '23 at 22:35

0 Answers0