svelte:head remote js module not accessible,

[viper6277]

When testing this code :

<svelte:head>
  <title>Plotly</title>
  <meta name="description" content="">
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</svelte:head>

<script>

  import { onMount } from 'svelte';

  let data = [{
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }];

  onMount(() => {
    Plotly.newPlot('myDiv', data, {}, {showSendToCloud:true});
  });

</script>

<div>
  <h1>Plotly Example</h1>
</div>

<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

I get a "Plotly is not defined" error in the console... I can add the plotly script reference to the server.js file...and then the script works and my graph is rendered.

Oddly enough, if I copy and paste this into the : https://svelte.dev/examples#hello-world page...the graph will render. ???

Running on CentOS 7, tried Firefox 60.7.2esr and Chrome 75.0.3770.90 same effect.

On Svelte 3.12.1, using Rollup v1.25.1

Not a serious issue, new to Svelte just trying to get some old tools working. It looks like Svelte is going to power my next front end project. Love the project, keep up the good work guys.

[Conduitry]

If you're not seeing this issue in the REPL, in what situation are you seeing it? How can we reproduce the error? Are you using Sapper?

[viper6277]

Hi Conduitry, thanks for the quick reply, I'm running a local node.js instance, not using Sapper. So actually on a quick copy and paste in the REPL I do see the same error "Plotly is not defined"
But the moment I add a space or new line the reference is resolved...and the graph renders.

To make matters worse...If I delete the line
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
after the graph is rendered...the graph stays...???

[Conduitry]

Oh, right, I see what's going on. The <script> tags (and everything else in <svelte:head>) are added programmatically, and no one's waiting until they are loaded. There are a few mechanisms (mostly involving adding the script tags manually, and adding an .onload handler to them) that let you wait until the browser has downloaded, parsed, and run them.

[viper6277]

Hi Conduitry, thanks for the reply... I took your suggestion I ended up changing the code to this... works like a charm... I wanted to post a working solution for others....

In fact this solution has now helped me with several other external modules...

<svelte:head>
  <title>Plotly</title>
  <meta name="description" content="">
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</svelte:head>

<script>

  import { onMount } from 'svelte';

  let data = [{
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }];

  onMount(() => {

   let script = document.createElement('script');
   script.src = "https://cdn.plot.ly/plotly-latest.min.js"
   document.head.append(script);

   script.onload = function() {
     Plotly.newPlot('myDiv', data, {}, {showSendToCloud:true});
   };

  });

</script>

<div>
  <h1>Plotly Example</h1>
</div>

<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

UPDATE !!! : I ended up changing the code again as I am using the "svelte-routing" module and the moment I navigated around it all got out of wack again... this solves my issues.

[SamLewis0602]

@viper6277 thank you for posting the solution! You've saved at least one dev a headache 😁