SVG not defined error

[jeremyjamez]

I imported svg.js and svg.panzoom.js as the docs say but svg.panzoom.js still gives the SVG not defined error.

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

componentDidMount(){
     const draw = SVG(rawSvg).addTo('#map').size('100%', '100%').panZoom({ zoomMin: 1, zoomMax: 20 })
}

[mushfau]

@jeremyjamez im having the same issue.... did you find a solution ?

[Fuzzyma]

What setup do you use? Which bundle? Do you use a bundler? Which one?

[mushfau]

@Fuzzyma i'm on nextJs 12.0.3, with webpack as the bundler

[Fuzzyma]

In which part this error happens? Is the { SVG } you imported undefined? At which part does it fail? When bundling or when executing?

[mushfau]

import { SVG } from "@svgdotjs/svg.js" works without any error. issue is with the import "@svgdotjs/svg.panzoom.js" ... it fails during bundling with this error

ReferenceError: SVG is not defined
    at Object.<anonymous> (\node_modules\@svgdotjs\svg.panzoom.js\dist\svg.panzoom.js:371:3)

[Fuzzyma]

Webpack picks up the wrong bundle. As you can see in the package.json of this repo, the module key is set to ./src/svg.panzoom.js . If you import this package via esm, this key should be picked up and webpack should resolve it to this location. Instead it tries to load the bundled package for the browser. I guess you have to tell webpack to resolve this package to the correct path or you just import "@svgdotjs/svg.panzoom.js/src/svg.panzoom.js" which should also do the trick

[mushfau]

its throws this error SyntaxError: Cannot use import statement outside a module

[Fuzzyma]

Well it clearly is a module. webpack does some magic there. You could go ahead and load those scripts in the browser and it would work

[nikhilnxvverma1]

I am getting the same error. Running it with angular v12 (thus webpack, I suppose).

[nikhilnxvverma1]

Since the code is only around ~400 lines, I might just derive/copy it as a standalone file to make it work on my end. Do let me know if and how I can attribute/credit you.

PS: I have used your main library (svg.js) and its amazing. Thank you.

[Fuzzyma]

You just have to put the license with it and then ist fine :)

[nikhilnxvverma1]

In my case, perhaps the problem is that I am using server side rendering(angular universal) and this library is running headless on node js. To get around this, some people have suggested the use of svgdom

[Fuzzyma]

svgdom is usually how you run svg.js on the server because there is no other library that calculates geometry for you. But why on earth would you include panZoom on the server? :D Is there even a node version released?

[nikhilnxvverma1]

I was pre rendering a page on server that initializes with SVG().panZoom(). I was expecting it to work on the client end.

[Fuzzyma]

panZoon adds events to the dom. The server doesnt have a dom. You need to initialize it on the clint

[nikhilnxvverma1]

Got it. I am contemplating making an SPA now anyway.

[sylvlecl]

Hi there, I just encountered that error in the context of executing unit tests with jest (which means in a node.js environment). I've been able to work around it by:

• pointing straight to the ESM module (svg.panzoom.esm.js)
• transpiling it to CJS

However, it seems that a common practice for NPM packages is to provide a UMD module in "main" file, which I think would solve that issue. Maybe rollup could be configured to deliver a UMD module instead of an IIFE ?

[besstiolle]

I may have encounter this same issue

• JS vanilla => no problems
• typescript + webpack => the function .panZoom() wasn't even accepted in my IDE (VSC)

Soo here my solution. (typescript)

The imports

//Look carefully to the case of Svg & SVG
import { Container, Svg, SVG } from "@svgdotjs/svg.js"
import '@svgdotjs/svg.panzoom.js'

The code

let drawSVG:Container = SVG().addTo("myHTMLElementId")
    (<Svg>drawSVG
            .viewbox( [....] ) 
            .size( [....] )  
     ).panZoom({ [....] })

Work like a charm with webpack + typescript

Hope it's will help you