Still getting error for Node SSR

[idready]

Hi, and thanks for this fix but even with the right svg.js version 2.5.1 as mentioned in the README i still get this error:

Here is the integration:

const window   = require('svgdom');
const SVG      = require('svg.js')(window);
global['SVG'] = SVG; // Polyfill missing SVG props for svgjs lib

svg.js: 2.5.2 svgdom: 0.0.15

I'm using AngularUniversal

Am i missing something?

I also used domino to create a window object and it has the method but not the window created from svg.js.

[Fuzzyma]

The code you posted works. However I neither know AngularUniversal nor domino so I am not sure what these things do. Beside that, it seems like you are using Webpack. Again I am not sure if webpack changes things.

You could try to use 3.0 of svg.js. It uses esm modules and might be better usable with webpack. The integration works as follows:

import svgdom from 'svgdom'
import {registerWindow, SVG} from '@svgdotjs/svg.js'

registerWindow(svgdom, svgdom.document)

const canvas = SVG().addTo(svgdom.document.documentElement)
canvas.rect(100, 200)
// and so on

[idready]

Thanks for your answer but i think there is a mistake in the code

SVG.invent is not a function

SVG is a function [Function: makeInstance] and it's missing the properties from extend;

This is looking like a nightmare.

[Fuzzyma]

There is no need to export one big fat object with esm modules anymore. So SVG does not hold all those stuff. It is just a function. You have to import what you need. You need extend? Import it.

However it looks like you want to use a plugin of svg.js. We are in the process of migrating the plug-ins to svg.js 3.0 but we are not done yet. Can you tell me which plugin you want to use?

[idready]

Since i'm doing SSR errors are popping and i'm fixing them as they pop, right now the property is missing and i'm afraid to tell you that i didn't see how to import extend nor invent but i saw other plugins. Still stuck.

[Fuzzyma]

Sorry, what does SSR mean? You can import all methods which were former on the SVG object (e.g. SVG.extend) like so:

import { extend } from '@svgdotjs/svg.js'

Unfortunately we kicked out the invent method. This was a big mistake and I will make sure to bring it back as a workaround so that plugins at least have the chance to work with 3.0 (if there isnt any other api used which was changed). This will happen a few days after newyear.

May I ask you at which point you are using the SVG.invent method?

[idready]

Thanks again for the info, i'm using apexcharts which depends on svg.js and right now they are using 2.6.6 of the library. It's the library that's using the method. SSR mean Server Side Rendering, good for SEO and fast page loading.

[idready]

Since you kicked out the method and i don't want to use a fork or custom repo for this lib, extending won't solve this issue, even a merge from SVG and extend. How can i add a polyfill ?

[Fuzzyma]

To your first post:

Ah OK got it. So you are bound to that version. Well - as I said before the code you posted should work. I already mentioned the parts which could lead to errors. However that's not a real answer. We have to debug that deeper. Unfortunately I can't really help you before the first of January.

To your second post:

Only SVG.invent was kicked and only in version 3. If you need to use 2.6 anyway, it's still there. So we need to make it work with 2.6. I want to help you but again I cannot do that just now.

BTW: it might be easier to discuss all this on our gitter chat. I can help you better there. Maybe I find some spare time between everything else

[Fuzzyma]

Oh, if you want a polyfill for invent, just copy it from the 2.6 version. It should work directly like this.

[idready]

Thanks for your help and happy new year if we don't cross to gitter 😄 ; i will post my answer here if i suceed before new year; i will try the polyfill, thanks.

[Fuzzyma]

I wish the same. Thank you! :)