.panZoom is not a function on ES6 modules

[lucafaggianelli]

I'm trying to use panzoom with SVG.js v3 in a React app with webpack and ES6 modules,

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

const draw = SVG()
      .addTo(mapRef.current!)
      .panZoom()

but I receive an error at runtime:

Unhandled Rejection (TypeError): Object(...)(...).addTo(...).panZoom is not a function

consider also that I'm using TypeScript and it is compiling correctly without warnings or error.

I also add a question, I'd like to panzoom an embedded svg, which I'm importing from an HTTP request, that is I do:

const response = await axios.get('/images/world-map.svg')
draw.svg(response.data)

should I call .panzoom() on the root svg object or on the imported one?

[Fuzzyma]

Your code should work as is. You can take a look at the transpired source to see what's going wrong.

For your second question: it doesn't matter. You could also just load the whole svg as is with SVG(svg string) and append that somewhere. This way you don't end up with a nested svg

[lucafaggianelli]

OK thanks for the second question, this is very useful!

About the other issue, I'll run some investigation on a smaller app and keep you updated

[omixer]

@lucafaggianelli Any updates on this issue? I am getting the same error message in Angular10!

[omixer]

Actually after changing the svg.js import statement (was working fine in Angular8/9) from

import SVG from '@svgdotjs/svg.js/src/svg'

to

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

the error disappeared and panZoom works again!

[lucafaggianelli]

Hey @omixer at the end I understood there was a strange case with my SVG file, as it included a comment at the beginning, so I needed to use this code, notice the part where I manipulate the SVG to remove the comment, but then no issue anymore with TS, I don't know if there was some update at some point:

import { Box as BBox, SVG, Path } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.panzoom.js'

const response = await axios.get('/images/world-map.svg')

let startOfSvg = response.data.indexOf('<svg')
startOfSvg = startOfSvg >= 0 ? startOfSvg : 0

const map = SVG(response.data.slice(startOfSvg))
  .addTo(mapRef.current)
  // @ts-ignore
  .size('100%', 450)
  .panZoom()

@Fuzzyma the TS issue seems gone (i'm using v3.0.16), but the problem is that when I load an SVG file starting with a comment, my map variable is of type Comment not and SVG element, thus I needed this string manipulation trick