madebymany/sir-trevor-js

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

matinwd opened this issue · 1 comments

I got this error in firefox and tooltip does not work.

<form><textarea class="js-st-instance"></textarea></form>
    <script>
        import SirTrevor from "sir-trevor";

        const editor = new SirTrevor.Editor({
            el: document.querySelector(".js-st-instance"),
            defaultType: "Text",
            iconUrl: "build/sir-trevor-icons.svg"
        });
    </script>

i am trying to use it in laravel

The error you're getting should explain why this isn't working:
"import declarations may only appear at top level of a module"

import SirTrevor from "sir-trevor";

^ this line cannot be inline in your html document.

Ideally you would have some html that loads a seperate JS file eg: sir-trevor-editor.js

my-page.html

<form><textarea class="js-st-instance"></textarea></form>
<script src="/sir-trevor-editor.js"></script>

sir-trevor-editor.js

import SirTrevor from "sir-trevor";

const editor = new SirTrevor.Editor({
  el: document.querySelector(".js-st-instance"),
  defaultType: "Text",
  iconUrl: "build/sir-trevor-icons.svg"
});