SyntaxError: import declarations may only appear at top level of a module
JavascriptJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
I got this on Firefox (FF58). I fixed this with:
- It is still experimental on Firefox (from v54):
You have to set to true the variable
dom.moduleScripts.enabled
inabout:config
Source: Import page on mozilla (See Browser compatibility)
- Add
type="module"
to your script tag where you import the js file
<script type="module" src="appthatimports.js"></script>
- Import files have to be prefixed (
./
,/
,../
orhttp://
before)
import * from "./mylib.js"
For more examples, this blog post is good.