On using import export in ES6, I'm getting below error:

SyntaxError: export declarations may only appear at top level

I surfed to find how to fix this, but im unable to. Can anybody explain about this. Im new to ES6, especially to import and export. (I was using StealJS pletely for this kind of stuffs) Thanks!

js files are:

app.js

import { cube, cubeRoot } from 'functions';

console.log(cube(4));
console.log(cubeRoot(125));

functions.js

// functions.js

function cube(a) {
    return a * a * a;
}

function cubeRoot(a) {
    return Math.cbrt(a);
}

export { cube, cubeRoot}

On using import export in ES6, I'm getting below error:

SyntaxError: export declarations may only appear at top level

I surfed to find how to fix this, but im unable to. Can anybody explain about this. Im new to ES6, especially to import and export. (I was using StealJS pletely for this kind of stuffs) Thanks!

js files are:

app.js

import { cube, cubeRoot } from 'functions';

console.log(cube(4));
console.log(cubeRoot(125));

functions.js

// functions.js

function cube(a) {
    return a * a * a;
}

function cubeRoot(a) {
    return Math.cbrt(a);
}

export { cube, cubeRoot}

• javascript
• ecmascript-6

• 3 Is functions a file or a module? Maybe you need import {... } from './functions'? – Davin Tryon Commented Feb 11, 2016 at 10:26
• Are you sure you don't have some stray unmatched opening brace somewhere? Is this your exact code? Can you show us the exact setup and how you're transpiling this? – Bergi Commented Feb 11, 2016 at 11:34
• Is this the whole error message? Got any line numbers or so? – Bergi Commented Feb 11, 2016 at 11:35
• I was following a simple example from hongkiat./blog/ecmascript-6 Point number 9-Modules.. Error message in console - SyntaxError: export declarations may only appear at top level export { cube, cubeRoot} functions.js (line 11, col 4) SyntaxError: import declarations may only appear at top level import { cube, cubeRoot } from 'functions'; app.js (line 3, col 4) – Vino Commented Feb 12, 2016 at 5:09

1 Answer 1

Update summer 2017:

See http://caniuse./#search=modules, new support, maybe need to change settings.

Now that things are less vague. To make a module work you have to tell the browser that it is a module (the other being script). The first way is implicit, an imported module is always a module. The second way is with type module<script src="anymodule.js" type="module"></script>

Make sure import and export are only at top level, not inside a block, not inside an if statement, not inside a loop, etc.

Also make sure to provide the full path (including .js), it should start with ./ or ../. Assumming the files are in the same folder it would be import { cube, cubeRoot } from './functions.js';

eval on a module string will not work.

Outdated answer below:

The ES2015 module import and export syntax is not supported by any browser at the time I write this answer (04/2016). The error message is miss leading because it implies that the syntax is supported, but it is not supported at all. See the first note here https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Statements/import

The reason is because the specification for module loaders is still a work in progress. See https://whatwg.github.io/loader/#status

They are tools however to polyfill or to transpile this syntax automatically like babel .