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

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.

Answer 1

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.