Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
matinwd opened this issue Apr 22, 2020 · 1 comment
Closed

Comments

@matinwd
Copy link

matinwd commented Apr 22, 2020

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

@olvado
Copy link
Member

olvado commented Apr 22, 2020

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"
});

@olvado olvado closed this as completed Oct 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants