JS: Module Specifer

Module Specifer

module specifier is the path or URL or name in importmap for a module.

For example, in HTML:

<script type="module" src=moduleSpecifier></script>

or in JS code:

import { f1, f2 } from moduleSpecifier;

Module Specifer Restriction

Module Specifer must start with one of:

• http
• // as HTML Protocol-Relative URL
• ./ for relative path.

🛑 warning: Module Specifer cannot start with a file name e.g. x.js

Bare Module Specifer (from importmap)

Module Specifer can simply be a module name, if you have defined importmap.

• JS: Module. importmap

Example

<!-- full url -->
<script type="module" src="https://example.org/module/xlib1.min.js"></script>

<!-- current dir. dot slash -->
<script type="module" src="./xlib1.js"></script>

<!-- subdirectory relative to current dir -->
<script type="module" src="./js_modules/xlib1.js"></script>

<!-- Protocol-Relative URL -->
<script type="module" src="//xlib1.js"></script>

<!-- just a name. from module importmap -->
<script type="module" src="math"></script>

import { f1, f2 } from "./math.js";

import { ga, gb } from "https://example.org/module/math2.min.js";

Example. Module Specifer Errors

Missing dot slash in path error

2018-03-19 in safari, this is error:

<script type="module" src="main.js"></script>

you get:

TypeError: Module specifier does not start with "/", "./", or "../".

must start with dot slash

<script type="module" src="./main.js"></script>

Missing type="module" error

2018-03-19 in safari, this is error

<script src="./main.js"></script>

you get

SyntaxError: Unexpected token '{'. import call expects exactly one argument.

must have type="module"

<script type="module" src="./main.js"></script>