ES2015 Import Declarations at the Top Level in Firefox: Understanding the Error

When using ES2015 import declarations in Firefox, you may encounter an error that they are not allowed at the top level of a module. This can be confusing, as you would expect import statements to be placed at the top of a file.

The root of the problem lies in browser support

As the error message suggests, import declarations have specific requirements for their placement within a module. In Firefox, these declarations must be included within a script element that explicitly specifies the type="module" attribute. Here's an example of how to do it correctly:

By adding the "module" attribute to the script element, you're instructing the browser to interpret the script as a module, enabling it to load and execute import declarations.

Browser Compatibility

Import and export declarations are supported in the following browser versions (and later):

• Firefox 60
• Chrome (desktop) 65
• Chrome (android) 66
• Safari 1.1

For older versions, you may need to enable experimental flags within the browser:

• Chrome Canary 60: Experimental Web Platform flag
• Firefox 54: dom.moduleScripts.enabled setting in about:config
• Edge 15: Experimental JavaScript Features setting in about:flags