15

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 completely 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}
RBT
  • 24,161
  • 21
  • 159
  • 240
Vino
  • 304
  • 1
  • 3
  • 12
  • 3
    Is `functions` a file or a module? Maybe you need `import {... } from './functions'`? – Davin Tryon Feb 11 '16 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 Feb 11 '16 at 11:34
  • Is this the whole error message? Got any line numbers or so? – Bergi Feb 11 '16 at 11:35
  • I was following a simple example from http://www.hongkiat.com/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 Feb 12 '16 at 05:09

1 Answers1

11

Update summer 2017:

See http://caniuse.com/#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.org/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 .

Walle Cyril
  • 3,087
  • 4
  • 23
  • 55
  • A missing module feature in a browser would not cause the error message the OP reports. –  Apr 05 '16 at 16:47
  • 2
    I'm saying that if a browser does not support modules, it wouldn't generate that message at all. It would generate a message such as `Unexpected token import`. Therefore, the OP's problem lies elsewhere. –  Apr 05 '16 at 17:11
  • it wouldn't yes in a perfect world, but sometimes the humans that write error messages make mistakes too, this is not gcc with well tested error messages – Walle Cyril Apr 05 '16 at 18:29
  • Tried this with FF 53 on Windows and can confirm: the error message you get is indeed `SyntaxError: export declarations may only appear at top level of a module`, whereas in Chrome it's the (much more descriptive) `Unexpected token export`. Huh, weird. – noppa Jun 11 '17 at 12:58
  • @WalleCyril Hah, I'm sorry, somehow I didn't even notice that this was such an old question & answer. I don't think your old answer was outdated at all, in my comment yesterday I concurred that Firefox does give this error to indicate that there is no modules support, unlike torazaburo stated in his comment. – noppa Jun 12 '17 at 08:08
  • you can try this functionality in firefox if you change settings in about:config – Walle Cyril Jun 13 '17 at 13:49