This plugin is incompatible with the latest version svg.js

[suasti]

I got ReferenceError: SVG is not defined node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js

[Fuzzyma]

more context please. Did you include the files in teh correct order? Whee do you got your svg.js from?

[cornwe19]

I'm also running into this same error trying to use this plugin against @svgdotjs/svg.js version 3.1.1 installed through npm. I'm following the ES import instructions from the readme,

import { SVG } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.draggable.js'

[Fuzzyma]

Are you using native esm support or some kind of bundler? What's your ecosystem?

[cornwe19]

This is a NextJS React app using webpack 5.

For what it's worth, I did find a workaround. Looks like if I require the plugin inside a useEffect during the first render instead of importing it everything works as expected.

import {SVG, Element, Container} from "@svgdotjs/svg.js"

const MyComponent = () => {
  useEffect(() => require('@svgdotjs/svg.draggable.js'), [SVG])
  ...
}

[anup-a]

Putting it in useEffect doesn't seem efficient. Any solution for this one ?

[cornwe19]

@anup-a FWIW the workaround I suggested would effectively only render once when the component is mounted. Are you concerned about rerenders?

[anup-a]

@anup-a FWIW the workaround I suggested would effectively only render once when the component is mounted. Are you concerned about rerenders?

Yes. also a little bit worried about the bundling and minification. I don't know how webpack/swc handles such imports.

Although the setup looks correct, with the externals and IIFE pattern, don't know what is causing the issue.