svg.js not working with Typescript and Stencil.js

Question

I have a basic Stencil app built with Typescript. I'm not using Angular. I'm unable to use svg.js.

Here is my full Component:

import { Component, State } from '@stencil/core';
import * as moment from 'moment';
import * as SVG from 'svg.js';

@Component({
  tag: 'astro-sandbox',
  styleUrl: 'sandbox.css'
})
export class AstroSandbox {
  componentDidLoad() {
    // console.info(SVG)
    let drawing = SVG('drawing');
  }

  render() {
    return (
      <div>
        <div id="drawing">
        </div>
      </div>
    );
  }
}

This fails with { Error: Cannot call a namespace ('SVG')...

I tried looking at SVG with console.info('SVG') and it compiles but the browser gives me the error TypeError: Cannot set property 'SVG' of undefined.

I know that my app works and I got moment.js working no problem, so there's not a TS config issue. Intellisense for svg.js in VS Code is also working.

For some reason that import does not work correctly. Try import SVG from svg.js or use require. — Fuzzyma, Feb 27 '18 at 19:33

score 1 · Answer 1 · answered Jun 14 '18 at 18:44

This is a known bug in svg.js. You can see the corresponding issue here. The problem is, that svg.js adds itself to this. In ECMAscript 262 this is undefined in this context to prevent littering the window object. For the meantime you can use the code of this PR: https://github.com/svgdotjs/svg.js/pull/867

svg.js not working with Typescript and Stencil.js

1 Answers1