Uncaught (in promise) Error: No parent element to render on was provided.

[oleg-darkdev]

Hi, thanks for this adapter. It didn’t work for me, i use svelte > 3.0

<script>
  import Chart from "svelte-frappe-charts";

  let data = {
    labels: ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"],
    datasets: [
      {
        values: [10, 12, 3, 9, 8, 15, 9]
      }
    ]
  };
</script>

browser log

Uncaught (in promise) Error: No parent element to render on was provided. at e.t (index.mjs:241) at new e (index.mjs:241) at getChartByType (index.mjs:241) at new t (index.mjs:241) at onMount (index.mjs:303) at run (index.mjs:18) at Array.map (<anonymous>) at add_render_callback (index.mjs:1353) at flush (index.mjs:689) at <anonymous>

[himynameisdave]

Yeah so this is a bit of a "known issue" that I'm not sure how to get around at the moment, because I'm not 100% sure of the root cause. I know that in the Svelte REPL, as well as in the default Svelte CodeSandbox template that it is broken.

I believe the root of the issue is that the chartRef isn't set when passed to frappe-charts when the component is mounted (see this issue over there).

FWIW, I am able to get this package working in the default svelte template (which the codesandbox is based off, which is odd). Please post additional info about your environment if possible, so I can get to the bottom of this.

Thanks for filing this, sorry you ran into this problem. I'm looking into it.

[denny64]

@himynameisdave - I'm getting this error when using the Sapper template. Putting a

on the template.html file fixes it, but that causes other issues.

[rondonjon]

Hi @himynameisdave,

I had the same problem and was able to solve it by importing from the src folder of the package:

import Chart from "svelte-frappe-charts/src/components/base.svelte";

The charts are now rendering as expected. So maybe something wrong with the lib bundling?

[himynameisdave]

Hey @rondonjon -- thanks for letting me know about this workaround. That aligns with what I've noticed in my testing as well. All svelte components that I publish are loosely based on this template, which discusses how to consume components. Basically if a svelte field is present, your svelte project should just be able to consume the component directly.

[niftylettuce]

Ref: frappe/charts#199 (comment)

[himynameisdave]

I have finally found a definitive fix for this issue. I was able to resolve this issue by configuring my bundler to handle mixed CJS and ESM imports. I personally use Rollup for all Svelte apps, and this can be enabled in the @rollup/plugin-commonjs plugin via the transformMixedEsModules option. Here's a minimal rollup config which works for svelte-frappe-charts both in dev and prod builds:

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import css from 'rollup-plugin-css-only';

const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main.js',
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: 'public/build/bundle.js'
  },
  plugins: [
    svelte({
      compilerOptions: {
        dev: !production,
      },
    }),
    css({
      output: 'public/build/bundle.css',
    }),
    resolve({
      browser: true,
      dedupe: ['svelte'],
    }),
    commonjs({
      //  This is the important part:
      transformMixedEsModules: true,
    }),
  ],
};

I was only seeing this in prod builds/never in dev, and that got me thinking that there was maybe something with the bundler that could be tweaked to get things working smoothly. My best guess was that the CJS stuff (like the frappe-charts library was being hoisted and was trying to initialize before Svelte had even rendered anything to the DOM.

I hope this solves the issue for everyone, sorry for how long this issue was open. Closing this now, but happy to hear about any snags / future issues that folks run into. Enjoy your charts! 📈