vite-plugin-absolute-dynamic-imports

Rewrites relative import specifiers (import, export ... from, and dynamic import()) inside built JS chunks to absolute URLs prefixed with a base you provide.

Why

Vite already lets you set a base for the entry HTML and asset URLs, but chunk-to-chunk imports inside the built JS are still emitted as relative paths (./chunks/foo-abc123.js). That's fine when your build output is served from the same directory it was built into — it breaks when it isn't.

This is the common case for AEM: your vite build output lands in dist/, but gets deployed and served from a clientlib path like /etc.clientlibs/my-site/clientlibs/clientlib-site/resources/. Relative chunk imports resolve against the page the script runs on, not against dist/, so they 404 in production even though everything works with vite preview locally.

Install

npm install --save-dev vite-plugin-absolute-dynamic-imports

Usage

// vite.config.js
import { defineConfig } from 'vite'
import absoluteDynamicImports from 'vite-plugin-absolute-dynamic-imports'

const CLIENTLIB_BASE = '/etc.clientlibs/my-site/clientlibs/clientlib-site/resources/'

export default defineConfig({
  plugins: [
    absoluteDynamicImports(CLIENTLIB_BASE)
  ]
})

The plugin only runs during vite build (it sets apply: 'build' internally) — no need to conditionally include it based on command.

How it works

After Rollup/Rolldown writes the bundle (writeBundle), the plugin parses each emitted JS chunk with es-module-lexer and rewrites every import specifier that starts with . to base + <resolved path>, based on the chunk's own location in the output directory. Non-relative specifiers (bare package names, already-absolute URLs) are left untouched.

License

MIT