Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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

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.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.