{"id":22643,"library":"vite-plugin-dynamic-publicpath","title":"vite-plugin-dynamic-publicpath","description":"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.","status":"active","version":"1.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/jy0529/vite-plugin-dynamic-publicpath","tags":["javascript","vite","publicpath","dynamic publicpath"],"install":[{"cmd":"npm install vite-plugin-dynamic-publicpath","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-dynamic-publicpath","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-dynamic-publicpath","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package is ESM-only; named export.","wrong":"const useDynamicPublicPath = require('vite-plugin-dynamic-publicpath')","symbol":"useDynamicPublicPath","correct":"import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath'"},{"note":"Not a constructor; call as function with options object.","wrong":"new useDynamicPublicPath({ dynamicImportHandler: 'window.__myHandler__' })","symbol":"dynamicImportHandler option","correct":"useDynamicPublicPath({ dynamicImportHandler: 'window.__myHandler__' })"},{"note":"Specify custom property name for preload handler.","wrong":"","symbol":"dynamicImportPreload option","correct":"useDynamicPublicPath({ dynamicImportPreload: 'window.__myPreload__' })"}],"quickstart":{"code":"import { defineConfig } from 'vite';\nimport { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath';\n\nexport default defineConfig({\n  plugins: [\n    useDynamicPublicPath({\n      dynamicImportHandler: 'window.__dynamic_handler__',\n      dynamicImportPreload: 'window.__dynamic_preload__'\n    })\n  ]\n})\n\n// Then in your entry script, define the handlers:\nwindow.__dynamic_handler__ = function(importer) {\n  return 'https://cdn.example.com' + importer;\n}\nwindow.__dynamic_preload__ = function(preloads) {\n  return preloads.map(preload => 'https://cdn.example.com' + preload);\n}","lang":"typescript","description":"Set up dynamic public path in vite config and define handlers in entry script."},"warnings":[{"fix":"Ensure useDynamicPublicPath is listed after plugins like legacy in the plugins array.","message":"Plugin must be placed after any plugin that transforms imports (e.g., @vitejs/plugin-legacy) to avoid incorrect URL rewriting.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Test with complex vite setups; consider using only one import transformation plugin.","message":"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).","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Define window.__dynamicImportHandler__ (or custom) in a script that runs before any lazy-loaded chunk.","message":"Handlers must be defined before any dynamic import occurs; otherwise imports will use original public path.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Check documentation for 'assetsBase' if customizing directory; default is 'assets'.","message":"The option 'assetsBase' is marked as default 'assets' but may not be documented clearly; behavior may change.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install vite-plugin-dynamic-publicpath --save-dev' and use 'import { useDynamicPublicPath } from 'vite-plugin-dynamic-publicpath''.","cause":"Package not installed or incorrectly imported.","error":"Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'vite-plugin-dynamic-publicpath'"},{"fix":"Define window.__dynamicImportHandler__ before any import() in the entry point. Ensure plugin is in vite config plugins array.","cause":"Handlers defined after dynamic imports trigger, or plugin not applied correctly.","error":"Dynamic import handler is not being called"},{"fix":"Define handler as: window.__dynamicImportHandler__ = function(importer) { return 'your-cdn' + importer; }","cause":"Handler function not defined or overwritten.","error":"Uncaught TypeError: window.__dynamicImportHandler__ is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}