Error importing plot 0.5

New To Observable
1

I tried out the Plot library on Codepen.io and it works great. I am now trying to use the same codebase on my own site but it gives me error on the import statement -

Uncaught SyntaxError: import declarations may only appear at top level of a module

//Here is the import statement which sits at the top of my js file.
import * as Plot from “https://cdn.skypack.dev/@observablehq/plot@0.5”;

Browser is Firefox 103.0.

I tried removing this and adding the script tags to the html page but then I get an error relating to Plot not being defined.

1 Like
2

Did you specify your script to be a module? Here’s a complete webpage that oughtta work:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script type="module">
      import * as Plot from "https://cdn.skypack.dev/@observablehq/plot@0.5";
      document.body.append(
      Plot.plot({
        marks: [Plot.line([[0, 0],[1, 1]])]
      }));
    </script>
  </head>
  <body></body>
</html>

The GitHub reference is probably the authoritative place to find this kind of information.

3 Likes
3

Thank you, this does work.

1 Like