module specifier in es6 import and export

module ecmascript-6 es6-modules es6-module-loader
Fred Finkle picture Fred Finkle · Jul 5, 2017 · Viewed 7.8k times · Source

I'm confused about what the module specifier in these statements refer to:

export {bar} from "foo";

import {bar} from "foo";

What does "foo" refer to? It can't be a file since it would be something like "./foo". If it's not a file, I assume it's an ID. How is the ID defined?

I'm exporting from a js file, but the import would be part of an inline html script (type="module") in the firefox browser.

The browser version (and browser settings) have been verified to work with es6 modules.

Thanks in advance.

Answer

Bergi picture Bergi · Jul 5, 2017

ES6 does not specify what the module specifier refers to.
It is indeed just that: an identifier. Nothing more.

It is left to the environment to resolve these identifiers to an actual module. A loader might interpret them as relative file paths, as global ids, as npm module names, as anything else.

In browsers, <script type="module"> took some time to specify, but it's here finally. A module specifier of "foo" is currently invalid, a browser will ignore that module as it doesn't know what to do with it. It will need something that resolves to an URL to load. Jake Archibald wrapped it up succinctly:

"Bare" import specifiers aren't currently supported. Valid module specifiers must match one of the following:

  • A full non-relative URL. As in, it doesn't throw an error when put through new URL(moduleSpecifier).
  • Starts with /.
  • Starts with ./.
  • Starts with ../.

Other specifiers are reserved for future-use, such as importing built-in modules.

Related questions

ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import

I'm new to ES6 (ECMAScript 6), and I'd like to use its module system in the browser. I read ES6 is supported by Firefox and Chrome, but I'm getting the following error using export Uncaught SyntaxError: Unexpected token import I have …

Read More
Node.js plans to support import/export ES6 (ECMAScript 2015) modules

I've been looking all over the Internet without a clear answer for this. Currently Node.js uses only CommonJS syntax to load modules, and if you really want to use the standard ECMAScript 2015 modules syntax, you either have to transpile …

Read More
Pass options to ES6 module imports

Is it possible to pass options to ES6 imports? How do you translate this: var x = require('module')(someoptions); to ES6?

Read More