Cannot import snap svg into typescript

Ionic Framework ionic-v3
1

I’m having an issue getting snap svg import into typescript. I did these steps:

npm install snapsvg --save
typings install dt~snapsvg --save --global

Then tried to import the module:

import * as Snap from 'snapsvg'

I get an error saying it cannot find the snapsvg module. Any ideas?

2

Hi! I’m having the same issue. Did you find a solution?

Thanks

3

I did and I’m going to dig up my code later today.

4

Great! thanks for that

5

Looks like i just included the script on index.html and installed the snap svg typings

<script src="js/snap.svg-min.js"></script>
6

Then how did you call methods from snap svg? Did you call them in a .ts file or in of a .html file? Thank you

7

@newelement I’d like to know this too. Thanks

8

Same problem probably. I followed documentation but I am not able to get snap.svg working in my Ionic2 project.

Install:

npm install snapsvg --save
npm install @types/snapsvg --save

Use:

import * as snapsvg from 'snapsvg';
var s = snapsvg.Snap(800,600);

Error:

Uncaught TypeError: Cannot read property 'on' of undefined

I saw, that more people have problem with importing third party libraries. Am I doing something wrong or it’s common problem with Ionic2 beta version? Any advices?

9

Hi guys,

Daniel Rosenwasser, one of the author of Typescript, explained to me that I had to add those 3 lines at the end of the snap svg d.ts file, as it is not declared as a module:

declare module “snapsvg” {
export = Snap;
}

I contributed those lines to github but it looks like it’s not been released.
So:

  • Add those 3 lines as described
  • to use:

import snap = require(“snapsvg”)

I asked him the difference between import snap = require(“snapsvg”) and import * as snap from “snapsvg”;
His answer:
There is no difference for the emit. Unfortunately, Node didn’t give a very good interop story at all for ES modules. Technically, import * as snap from “snapsvg” means that ‘snap’ is not callable, because the ES6 spec says that namespace imports (the ones that are written ‘* as foo’) aren’t callable, so I’d stick with import = require.

Finally, if you use webpack, here’s how to make sure it works:

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

Hope this helps

10

@gregoryforel, I tried this and still get the error. Windows 10. VS Code. Ionic 2.0.1. snapsvg 0.5.1
Could you show the min TS and HTML and exactly where to put these lines in the typings file? Thanks

11

This combination worked for me:

Install:
npm install snapsvg --save
npm install imports-loader --save
npm install snapsvg-cjs --save

Usage in component:
import Snap from ‘snapsvg-cjs’;

1 Like