module specifier in es6 import and export

Question

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 1

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.