{"id":25238,"library":"es6-import","title":"es6-import","description":"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.","status":"deprecated","version":"1.6.5","language":"javascript","source_language":"en","source_url":"https://github.com/alantheprice/es6-import","tags":["javascript","es6","esnext","imports","exports"],"install":[{"cmd":"npm install es6-import","lang":"bash","label":"npm"},{"cmd":"yarn add es6-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add es6-import","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"<script src=\"https://unpkg.com/es6-import\"></script>","symbol":"default","correct":"<script src=\"https://unpkg.com/es6-import\" import=\"./appStartScript.js\"></script>"},{"note":"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'.","wrong":"<script src=\"...\" import=\"./main.js\" npm-modules=\"vue\"></script>","symbol":"(npm_modules)","correct":"<script src=\"...\" import=\"./main.js\" npm-modules='[\"vue\"]'></script>"},{"note":"Debug flag must be explicitly set to 'true' as a string. Simply adding the attribute without value does not enable debug.","wrong":"<script src=\"...\" import=\"./main.js\" debug></script>","symbol":"(debug)","correct":"<script src=\"...\" import=\"./main.js\" debug=\"true\"></script>"}],"quickstart":{"code":"// In your HTML file, add:\n<script src=\"https://unpkg.com/es6-import\" import=\"./app.js\"></script>\n\n// app.js:\nimport { greet } from './utils.js';\nconsole.log(greet('World'));\n\n// utils.js:\nexport function greet(name) { return `Hello, ${name}!`; }","lang":"javascript","description":"Demonstrates basic usage: load es6-import via script tag with 'import' attribute pointing to main ES module."},"warnings":[{"fix":"Use native ES modules with type=\"module\" in modern browsers, or use Webpack/Vite for bundling.","message":"This library is outdated and no longer maintained.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Always include the .js extension: import foo from './foo.js'.","message":"Requires file extensions in import paths.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Specify additional modules via npm-modules attribute as JSON array. Known to cause runtime errors if module not found or improperly formatted.","message":"npm module support is beta and only 'vue' is pre-allowed.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use debug=\"true\" (not just debug).","message":"Debug flag must be set as a string 'true'.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Place the es6-import script tag before any script that uses import statements.","message":"Script loading order matters; the importer will not work if placed after other scripts with imports.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"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.","cause":"Importing an npm module without specifying it in the npm-modules attribute or using an invalid path.","error":"Uncaught TypeError: Failed to resolve module specifier 'my-module'"},{"fix":"Use a different file structure that avoids circular imports, or load Vue differently (e.g., via CDN script tag with type=\"module\").","cause":"Vue (or pre-allowed npm module) caused a circular dependency resolution issue.","error":"Uncaught TypeError: The specifier 'vue' was a cyclic dependency"},{"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.","cause":"Including a script that uses ES6 export syntax outside of the es6-import managed scripts.","error":"Uncaught SyntaxError: Unexpected token 'export'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}