Snap SVG with Typescript and Webpack error “Cannot read property 'on' of undefined”

问题

I have an Angular 4 app using Snap SVG and I get the dredded webpack problem "Cannot read property 'on' of undefined".

Using snapsvg-cjs seems to be the simplest way to fix this but then I lose all the nice typescript typings (answered here: Typescript library for SVG).

There is some talk of using import-loader but then I would need a web pack config and angular cli takes that away. Plus :

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

doesn't compile in typescript.

Im pretty new to all this stuff so am feeling somewhat confused - I wish I was back doing VB6 on windows again.... :). Can anyone clarify this ?

Thanks

回答1:

I had this same issue. For me, I installed snapsvg-cjs and @types/snapsvg, then imported the library as so:

import "snapsvg-cjs"

You only need to import it this way once (maybe in a main.ts file or something)

Then in the file where you want to use the library, import the types as so:

import * as SNAPSVG_TYPE from "snapsvg"
declare var Snap: typeof SNAPSVG_TYPE

This allowed me to use the typescript types like normal while still employing the webpack compatible version.

回答2:

Ok, I see what I did now. Using snapsvg-cjs just works. I get typescript support.

来源：https://stackoverflow.com/questions/47735087/snap-svg-with-typescript-and-webpack-error-cannot-read-property-on-of-undefin