Using requireJS with svgPanZoom giving error: Uncaught TypeError: svgPanZoom is not a function

Question

I have been using svg-pan-zoom library successfully with my javascript app but I now need to refactor it to use requireJS.

My util.js is:

define([
    'baja!',
    'jquery',
    '/file/WebWidgets/js/libraries/svg-pan-zoom.js'
], function (
    baja,
    $,
    svgPanZoom) {
'use strict';

const updateInitializeDiv = () => {

    const svgDocument = $('#svgObjectElementFromBinding')[0].contentDocument;
    const svgDocumentElement = svgDocument.documentElement;
    console.log(svgDocumentElement);
    console.log(svgDocumentElement.tagName);//svg

    let panZoomSVG = svgPanZoom(svgDocumentElement, {
        zoomEnabled: true,
        controlIconsEnabled: true
    });
}

const util = {};
util.updateInitializeDiv = updateInitializeDiv;
return util;
});

I am getting "Uncaught TypeError: svgPanZoom is not a function".

Can anyone suggest what I am doing wrong?

Answer 1

I had to reference the svg-pan-zoom library in the RequireJS config to get this to work.