es6-import

1.6.5 verified Fri May 01 auth: no javascript deprecated

A client-side library (v1.6.5) that enables ES6 import/export syntax in the browser without a server-side transpiler. It uses a custom script loader to fetch and resolve modules, supporting .vue files and basic npm module loading (beta). Unlike tools like Babel or Webpack, it avoids build steps, making it ideal for rapid prototypes or in-browser editors. However, it is not suitable for production due to lack of tree-shaking and minification. Release cadence is sporadic; last update in 2020. Key differentiators: zero configuration, works with modern browser ES6 support, and minimal overhead for small projects.

Common errors

error Uncaught TypeError: Failed to resolve module specifier 'my-module' ↓

cause Importing an npm module without specifying it in the npm-modules attribute or using an invalid path.

fix

Add the module to npm-modules attribute as a JSON array, e.g., npm-modules='["my-module"]', and ensure the module is available on unpkg.

error Uncaught TypeError: The specifier 'vue' was a cyclic dependency ↓

cause Vue (or pre-allowed npm module) caused a circular dependency resolution issue.

fix

Use a different file structure that avoids circular imports, or load Vue differently (e.g., via CDN script tag with type="module").

error Uncaught SyntaxError: Unexpected token 'export' ↓

cause Including a script that uses ES6 export syntax outside of the es6-import managed scripts.

fix

Remove any script tags with type="module" or ensure export statements are only in files loaded via the es6-import script tag with import attribute.

Warnings

deprecated This library is outdated and no longer maintained. ↓

fix Use native ES modules with type="module" in modern browsers, or use Webpack/Vite for bundling.

gotcha Requires file extensions in import paths. ↓

fix Always include the .js extension: import foo from './foo.js'.

gotcha npm module support is beta and only 'vue' is pre-allowed. ↓

fix Specify additional modules via npm-modules attribute as JSON array. Known to cause runtime errors if module not found or improperly formatted.

gotcha Debug flag must be set as a string 'true'. ↓

fix Use debug="true" (not just debug).

gotcha Script loading order matters; the importer will not work if placed after other scripts with imports. ↓

fix Place the es6-import script tag before any script that uses import statements.

Install

npm install es6-import

yarn add es6-import

pnpm add es6-import

Imports

default
wrong
```
<script src="https://unpkg.com/es6-import"></script>
```
correct
```
<script src="https://unpkg.com/es6-import" import="./appStartScript.js"></script>
```
The library is loaded via a script tag with an 'import' attribute. No JavaScript import statement is used; it's a client-side loader that uses the custom attribute. The 'import' attribute must point to the main script.
(npm_modules)
wrong
```
<script src="..." import="./main.js" npm-modules="vue"></script>
```
correct
```
<script src="..." import="./main.js" npm-modules='["vue"]'></script>
```
The npm-modules attribute expects a valid JSON array of strings. Common mistake: providing a plain string instead of JSON. The only allowed default module is 'vue'.
(debug)
wrong
```
<script src="..." import="./main.js" debug></script>
```
correct
```
<script src="..." import="./main.js" debug="true"></script>
```
Debug flag must be explicitly set to 'true' as a string. Simply adding the attribute without value does not enable debug.

Quickstart

Demonstrates basic usage: load es6-import via script tag with 'import' attribute pointing to main ES module.

// In your HTML file, add:
<script src="https://unpkg.com/es6-import" import="./app.js"></script>

// app.js:
import { greet } from './utils.js';
console.log(greet('World'));

// utils.js:
export function greet(name) { return `Hello, ${name}!`; }