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

Question

I am trying to use a plugin called "Simplebar" found on GitHub, GitHub SimpleBar but after downloading the scripts and looking at the simple.js script, it looks like it has an error "SyntaxError: import declarations may only appear at top level of a module"

At the top of the simplebar.js file there are some import lines of code:

import scrollbarWidth from 'scrollbarwidth'
import debounce from 'lodash.debounce'
import './simplebar.css'

If I look in my browser debugger I see an error: "SyntaxError: import declarations may only appear at top level of a module".

Has anyone tried to us this plugin.

Many thanks in advance for your time.

Solution

I got this on Firefox (FF58). I fixed this with:

1. It is still experimental on Firefox (from v54): You have to set to true the variable dom.moduleScripts.enabled in about:config

Source: Import page on mozilla (See Browser compatibility)

2. Add type="module" to your script tag where you import the js file

<script type="module" src="appthatimports.js"></script>

3. Import files have to be prefixed (./, /, ../ or http:// before)

import * from "./mylib.js"

For more examples, this blog post is good.

Comments

[Gerrit B]

What framework are you using?

[a.anev]

Tried both. Neither worked

[Kipton Barros]

The type="module" fixed this for me.

[Igor Laszlo]

I am not sure if this is the right answer because if Firefox is involved, why the sample html is working fine and Firefox does not show the same error ("SyntaxError: import declarations may only appear at top level of a module") at that page ?

[carloswm85]

It worked for me. Double check (how) the imports/exports you're using. javascript.info/import-export