vite-plugin-dynamic-publicpath

1.1.2 verified Mon Apr 27 auth: no javascript

Vite plugin that enables dynamic runtime public path for assets and chunks, similar to webpack's __webpack_public_path__. Version 1.1.2 is current. Works by wrapping dynamic imports with a custom handler that can rewrite import URLs at runtime. Notable as one of few Vite-specific solutions for dynamic public paths; relies on modifying Vite's build output and requires careful ordering with legacy plugin. Suitable for multi-CDN or dynamic base path scenarios.

Common errors

error Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'vite-plugin-dynamic-publicpath' ↓

cause Package not installed or incorrectly imported.

fix

Run 'npm install vite-plugin-dynamic-publicpath --save-dev' and use 'import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath''.

error Dynamic import handler is not being called ↓

cause Handlers defined after dynamic imports trigger, or plugin not applied correctly.

fix

Define window.__dynamicImportHandler__ before any import() in the entry point. Ensure plugin is in vite config plugins array.

error Uncaught TypeError: window.__dynamicImportHandler__ is not a function ↓

cause Handler function not defined or overwritten.

fix

Define handler as: window.__dynamicImportHandler__ = function(importer) { return 'your-cdn' + importer; }

Warnings

gotcha Plugin must be placed after any plugin that transforms imports (e.g., @vitejs/plugin-legacy) to avoid incorrect URL rewriting. ↓

fix Ensure useDynamicPublicPath is listed after plugins like legacy in the plugins array.

breaking The plugin modifies dynamic import() calls; it may not work correctly with other plugins that also transform imports (e.g., Vite's built-in optimizer). ↓

fix Test with complex vite setups; consider using only one import transformation plugin.

gotcha Handlers must be defined before any dynamic import occurs; otherwise imports will use original public path. ↓

fix Define window.__dynamicImportHandler__ (or custom) in a script that runs before any lazy-loaded chunk.

deprecated The option 'assetsBase' is marked as default 'assets' but may not be documented clearly; behavior may change. ↓

fix Check documentation for 'assetsBase' if customizing directory; default is 'assets'.

Install

npm install vite-plugin-dynamic-publicpath

yarn add vite-plugin-dynamic-publicpath

pnpm add vite-plugin-dynamic-publicpath

Imports

useDynamicPublicPath

wrong

const useDynamicPublicPath = require('vite-plugin-dynamic-publicpath')

correct

import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'

Package is ESM-only; named export.

dynamicImportHandler option

wrong

new useDynamicPublicPath({ dynamicImportHandler: 'window.__myHandler__' })

correct

useDynamicPublicPath({ dynamicImportHandler: 'window.__myHandler__' })

Not a constructor; call as function with options object.

dynamicImportPreload option
```
useDynamicPublicPath({ dynamicImportPreload: 'window.__myPreload__' })
```
Specify custom property name for preload handler.

Quickstart

Set up dynamic public path in vite config and define handlers in entry script.

import { defineConfig } from 'vite';
import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath';

export default defineConfig({
  plugins: [
    useDynamicPublicPath({
      dynamicImportHandler: 'window.__dynamic_handler__',
      dynamicImportPreload: 'window.__dynamic_preload__'
    })
  ]
})

// Then in your entry script, define the handlers:
window.__dynamic_handler__ = function(importer) {
  return 'https://cdn.example.com' + importer;
}
window.__dynamic_preload__ = function(preloads) {
  return preloads.map(preload => 'https://cdn.example.com' + preload);
}