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

Javascript

Javascript 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:

  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)

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

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

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

import * from "./mylib.js"

For more examples, this blog post is good.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDCJonesView Question on Stackoverflow
Solution 1 - JavascriptEric M.View Answer on Stackoverflow