issue with using svelte-fusioncharts in sapper(framework for svelte)

[mishrasatyam]

While using it with sapper I get the below error:

/home/satyam/my-app/node_modules/fusioncharts/fusioncharts.js:13
"function"!=typeof Object.assign&&(Object.assign=function(e){"use strict";var t,r,n,a;if(null==e)throw new TypeError("Cannot convert undefined or null to object");for(t=Object(e),r=1;r<arguments.length;r++)if(null!=(n=arguments[r]))for(a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a]);return t}),Function.prototype.bind||(Function.prototype.bind=function(e){"use strict";var t,r,n,a;if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");return t=Array.prototype.slice.call(arguments,1),r=this,n=function(){},a=function(){return r.apply(this instanceof n?this:e,t.concat(Array.prototype.slice.call(arguments)))},this.prototype&&(n.prototype=this.prototype),a.prototype=new n,a}),!document.head&&(document.head=document.getElementsByTagName("head")[0]),function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define(

ReferenceError: document is not defined

[odama626]

I was able to get the library to work with sveltekit by disabling ssr, I do still occasionally get this error message though

Note: this only works on routes

<script context='module'>
// in your module definition for the page using svelte-fusioncharts
export let ssr = false;
</script>

Another way of preventing sapper or sveltekit from trying to use the library on the serverside would be to dynamically import the library on mount using the promise form of import but that kind of defeats the purpose of it being a component

import('svelte-charts').then(...)

[acidlake]

@odama626
hey thanks for the tip, i was trying to use the charts on sveltekit, added your code, but still getting some issues.
[vite] Error when evaluating SSR module /src/routes/dashboard/analitycs/index.svelte: ReferenceError: document is not defined

do you have any tip? thanks

[odama626]

that sounds like it is trying to call some fusioncharts code on the server and it's failing because "document" doesn't exist.

I just realized I forgot to mention that using the module context only works in routes, added a note to the comment

try wrapping your relevant code in a browser check

import { browser } from '$app/env'

if (browser) {
// fusionChart code
}

[acidlake]

thanks for the reply, i was trying, but still document is not defined, if i refresh the page it works, but on console still the error, which indeed seems to be running on the server

this is my code

<script context="module">
	export const ssr = false;
</script>
<script>
	import { browser } from "$app/env";
import FusionCharts from 'fusioncharts';
  import Charts from 'fusioncharts/fusioncharts.charts';
  import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
  import SvelteFC, { fcRoot } from 'svelte-fusioncharts';

if(browser){
    fcRoot(FusionCharts, Charts, FusionTheme);
  }
  let dataSource = {
        "chart": {
          "caption": "Recommended Portfolio Split",
          "subCaption": "For a net-worth of $1M",
          "showValues": "1",
          "showPercentInTooltip": "0",
          "numberPrefix": "$",
          "enableMultiSlicing": "1",
          "theme": "fusion"
        },
        "data": [{
          "label": "Equity",
          "value": "300000"
        }, {
          "label": "Debt",
          "value": "230000"
        }, {
          "label": "Bullion",
          "value": "180000"
        }, {
          "label": "Real-estate",
          "value": "270000"
        }, {
          "label": "Insurance",
          "value": "20000"
        }]
      },
      chartConfig = {
        type: 'pie2d',
        width: '600',
        height: '400',
        renderAt: 'chart-container',
        dataSource
      };
</script>
{#if browser}
<SvelteFC {...chartConfig} />
{/if}

[odama626]

yeah, it looks like you need to use the dynamic import, something like this

<script>
    import { onMount } from 'svelte';

    let MyComponent;

    onMount(async () => {
        const module = await import('my-non-ssr-component');
        MyComponent = module.default;
    });
</script>

<svelte:component this={MyComponent} foo="bar"/>

https://stackoverflow.com/a/63502144

[acidlake]

Thanks a Lot, manage to get the charts working!