svelte:head remote js module not accessible,

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.

[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.

[saml-dev]

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