rollup-plugin-esm-import-to-url

2.1.0 verified Mon Apr 27 auth: no javascript

A Rollup plugin that transforms bare import specifiers (e.g., 'lit-element') into absolute URLs for ES module output. Suitable for CDN loading or micro-frontends. Current version 2.1.0. Release pattern is ad-hoc. Differentiators: integrates with Rollup's resolve pipeline, ensures bare imports are replaced only when mapped, and throws if specifiers are also listed in Rollup's external option.

Common errors

error Error: The following imports are both in the import map and in Rollup's external list: ["lit-element"] ↓

cause Duplicate declaration: import specifier appears in both `external` and plugin's `imports`.

fix

Remove the specifier from Rollup's external option and rely on the plugin.

error Error: [plugin:esm-import-to-url] Could not resolve import 'lit-element' ↓

cause Bare import specifier is not mapped in `imports` option and not otherwise resolved.

fix

Add the specifier to imports in plugin options.

error ReferenceError: require is not defined (when using CommonJS require) ↓

cause Package is ESM-only; using `require()` in Node.js <13 or without ESM support fails.

fix

Use import syntax or ensure Node.js version supports ESM.

Warnings

breaking If a bare import specifier is also listed in Rollup's `external` option, the plugin will throw an error. ↓

fix Remove the specifier from `external` or ensure it is not duplicated.

breaking Output must be formatted as 'esm' (ES modules). Other formats like 'cjs' or 'iife' will cause incorrect behavior or errors. ↓

fix Set `output.format` to 'esm'.

deprecated Requires Node.js version >=10. Older versions may fail. ↓

fix Upgrade Node.js to v10 or later.

gotcha Plugin only transforms bare import specifiers that are mapped in the `imports` option; other bare imports remain unchanged and may fail at runtime. ↓

fix Ensure all external bare imports are explicitly mapped.

Install

npm install rollup-plugin-esm-import-to-url

yarn add rollup-plugin-esm-import-to-url

pnpm add rollup-plugin-esm-import-to-url

Imports

default

wrong

const esmImportToUrl = require('rollup-plugin-esm-import-to-url')

correct

import esmImportToUrl from 'rollup-plugin-esm-import-to-url'

Package exports a default export. CommonJS require would not work for v2+ as it's ESM-only.

esmImportToUrl

wrong

import { esmImportToUrl } from 'rollup-plugin-esm-import-to-url'

correct

import esmImportToUrl from 'rollup-plugin-esm-import-to-url'

Default export, not named. Named import will result in undefined.

Rollup plugins array entry

wrong

esmImportToUrl({ 'pkg': 'https://cdn.example.com/pkg.js' })

correct

esmImportToUrl({ imports: { 'pkg': 'https://cdn.example.com/pkg.js' } })

Options must be wrapped in object with `imports` key; incorrect to pass direct property mapping.

Quickstart

Configures Rollup to replace bare import 'lit-element' with a CDN URL in the ESM output bundle.

// rollup.config.js
import esmImportToUrl from 'rollup-plugin-esm-import-to-url';

export default {
  input: 'src/main.js',
  plugins: [
    esmImportToUrl({
      imports: {
        'lit-element': 'https://cdn.jsdelivr.net/npm/lit-element@2.4.0/lit-element.js',
      },
    }),
  ],
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
};