snapsvg and requirejs, Cannot read property 'on' of undefined`

I'm using require and webpack on a project and want to use snapsvg but when I include it I get the error:

Uncaught TypeError: Cannot read property 'on' of undefined

Code is:

var Snap = require('snapsvg');
SVG = Snap('#svg');

Answers


Ah the way to do it is to add:

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

in webpack.config.js using imports-loader


To load with webpack 2.x and 3.x, install Imports Loader (npm i -D imports-loader), and add the following to your webpack config:

module: {
  rules: [
    {
      test: require.resolve('snapsvg/dist/snap.svg.js'),
      use: 'imports-loader?this=>window,fix=>module.exports=0',
    },
  ],
},
resolve: {
  alias: {
    snapsvg: 'snapsvg/dist/snap.svg.js',
  },
},

Then, in any module you’d like to require Snap, use:

import Snap from 'snapsvg';

SRC: SnapSVG GitHub


You can also use snapsvg-cjs, which is actually wrapper writter in snapsvg with common js.

Steps:

npm install snapsvg-cjs

Import in component like below:-

import "snapsvg-cjs";

declare const Snap: any;

Now you have Snap object.


Need Your Help

magento 1.9.2.1 import images using the csv

magento import magento-1.9.2.1

I am trying to import product using csv in magento 1.9.2.1. everything works fine but images is not showing in backend. I tried by uploading the images in the media/import folder and giving the pat...

Calling a stored procedure using LINQ to SQL with a Custom Entity Class

.net sql linq linq-to-sql

Am trying to get linq to call a stored procedure. I know this is usually rather simple, but in this case i am using my own Custom Entity Classes and I am at a dead end.