Error loading Snap with webpack

[zuotian]

When loading Snap (from the dev branch) with webpack.

var Snap = require('snapsvg');

browser throw error Uncaught TypeError: Cannot read property 'on' of undefined

from line 1625 in svg.js

...
// default
eve.on("snap.util.getattr", function () {
    var att = eve.nt();
...

[tykko87]

Same problem for me.

[clm-a]

Same problem here :cry:

[ibrierley]

Is this related to https://github.com/adobe-webplatform/Snap.svg/issues/338 maybe ?

[clm-a]

@ibrierley I checked out back to commit No.#c0b0b5805ecb231 and just felt on the issue you've referenced !

[frank-weindel]

Same here

[andrew-minted]

Same!

[frank-weindel]

I've found a fairly simple way of pull in Snap with webpack using legacy-loader. Unfortunately Snap uses eval() in certain places (transform() is one area I know for sure) and so Snap is REQUIRED to be on the window.

var Snap = require('legacy-loader?exports=Snap!Snap.svg');
window.Snap = Snap; // transform REQUIRES Snap on the window because it uses eval

If you want to also get access to other resources that Snap exports (like mina) you can do something like this instead:

var SnapLib = require('legacy-loader!Snap.svg');
var Snap = SnapLib.Snap;
var mina = SnapLib.mina;
window.Snap = Snap; // transform REQUIRES Snap on the window because it uses eval

A bit involved I know. ES6 destructuring could be used to make it a bit more pleasant. Hope this helps.

[DmitryBaranovskiy]

@frank-weindel Could you, please, point where “Snap uses eval() in certain places (transform() is one area I know for sure)”?

[frank-weindel]

@DmitryBaranovskiy I think this may have been a webpack issue since I can't reproduce it anymore and we were using dev-tool: eval before. Apologies.

[frank-weindel]

I retract my original comment as legacy-loader has some major issues in Firefox.

[kapooostin]

But still do we have a way to load Snap with webpack, since it doesn't uses eval()?

[kapooostin]

Here is another recipe

var Snap = require( "imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js" );

[alfonsomunozpomer]

I was also hitting some issues using Webpack.

I suggest everybody that for the time being they follow @kapooostin’s suggestion. Works like a charm. Thanks!

[hybrisCole]

using this in react like

import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js';

I just added imports-loader to package.json and it works like a charm :+1:

[NicholasTuck]

Thanks everybody. I had some troubles moving this to the webpack config because I am still earning my webpack black belt. So I thought I would drop here what I did end up getting to work:

            {
                test: require.resolve('snapsvg'),
                loader: 'imports-loader?this=>window,fix=>module.exports=0'
            },

[dvdplm]

@NicholasTuck awesome, totally worked. :)

[yazonnile]

Sorry, but still all this things with legacy-loader or with imports-loader doesn`t work Still have "Cannot read property 'on' of undefined" as in first message

In the "webpack" case of course

[harryworld]

I'm using webpack to load Snap.svg for React.js application. I'm trying with the several ways above on imports-loader, what I get in Snap are just the file name, any clue? (It says Snap is not a function`)

[harryworld]

I found the answer not long afterward. It was because the mix plugins with file-loader I end up modifying wepack.config.js, excluding .svg.js pattern from file-loader, and then use a combination of @hybrisCole and @NicholasTuck

[yazonnile]

@harryworld thx. Will try!

[geelen]

Would it be possible to publish a snap.svg-commonjs.js that left the require statements for eve intact that webpack works with out of the box? Is that all that's needed?

[0x80]

Another solution

npm install snapsvg

And use this loader config:

      {
        test: require.resolve('snapsvg'),
        loader: 'imports-loader?this=>window,fix=>module.exports=0'
      }

Currently the npm version is still 0.4.0. Can it be bumped to 0.4.1 please? Seems it was published 11 months ago?

[bmcorser]

Any plans on supporting webpack sans workaround?

[ova2]

Should we build and publish the 0.4.1 version? I would like to use the latests one via NPM and WebPack.

[geelen]

I published snapsvg-cjs so you can npm install snapsvg-cjs for use with webpack.

Once this project works out of the box with webpack I'll deprecate my snapsvg-cjs

[mjisican]

Does anyone here have tried configuring Snap on a React Project?

[alfonsomunozpomer]

@mjisican,

In Expression Atlas we use Snap and React. Have a look at a component that displays a SVG anatomogram here: https://github.com/gxa/anatomogram

[mjisican]

Thanks @alfonsomunozpomer :D been doing some experiments on react on my free time, this would help me... thank you very much :D

[vellinchou]

@NicholasTuck it works for me ,thanks

[hipkiss91]

Any word on when this will be done? is the snapsvg-cjs still the best option? Also, snapsvg-cjs doesn't work for me.