{"id":22599,"library":"vite-plugin-cdn-import","title":"vite-plugin-cdn-import","description":"Vite plugin that externalizes specified npm packages and loads them from a CDN (jsDelivr, unpkg, cdnjs) in production builds. v1.0.1 supports Vite 2–5, TypeScript types, custom script/link tag generation, presets for react, vue, lodash, etc., and development mode. Unlike generic external plugins (e.g., vite-plugin-externals), it automatically injects CDN script/link tags and offers built-in presets for common libraries. Releases are infrequent; v1.0.0 introduced breaking changes to the options API.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/mmf-fe/vite-plugin-cdn-import","tags":["javascript","vite cdn plugin","vite CDN extension","typescript"],"install":[{"cmd":"npm install vite-plugin-cdn-import","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-cdn-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-cdn-import","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only; no CommonJS export. Must be used with Vite's ESM config.","wrong":"const cdn = require('vite-plugin-cdn-import')","symbol":"default","correct":"import cdn from 'vite-plugin-cdn-import'"},{"note":"Type import for configuration options; use with TypeScript projects.","wrong":"","symbol":"Plugin type (optional)","correct":"import type { Options } from 'vite-plugin-cdn-import'"},{"note":"Preset modules only require 'name' string; custom modules need full spec.","wrong":"cdn({ modules: [{ name: 'react' }] }) without 'var' and 'path'","symbol":"Preset modules","correct":"cdn({ modules: ['react', 'react-dom'] })"}],"quickstart":{"code":"// npm install vite-plugin-cdn-import --save-dev\n// vite.config.ts\nimport { defineConfig } from 'vite';\nimport cdn from 'vite-plugin-cdn-import';\n\nexport default defineConfig({\n  plugins: [\n    cdn({\n      modules: [\n        {\n          name: 'react',\n          var: 'React',\n          path: 'umd/react.production.min.js',\n        },\n        {\n          name: 'react-dom',\n          var: 'ReactDOM',\n          path: 'umd/react-dom.production.min.js',\n        },\n      ],\n      // optional development mode (default false)\n      enableInDevMode: false,\n      // optional custom CDN url template\n      prodUrl: 'https://unpkg.com/{name}@{version}/{path}',\n    }),\n  ],\n});","lang":"typescript","description":"Configures Vite to externalize react and react-dom to CDN, showing custom module definition and prodUrl override."},"warnings":[{"fix":"Remove autoComplete; add the package name (e.g., 'react') directly to the modules array.","message":"autoComplete option is deprecated since v1.0.1. Pass required packages directly in options.modules instead.","severity":"deprecated","affected_versions":">=1.0.1"},{"fix":"If using Vite 4 or earlier, stick with v0.x. Update modules manually for any removed presets.","message":"In v1.0.0, the plugin updated to Vite 5, dropping support for older Vite versions. Some presets were removed from autoComplete.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Add 'enableInDevMode: true' to your plugin options if you need CDN scripts in dev.","message":"Plugin does NOT work in development mode by default. Set 'enableInDevMode: true' to load from CDN during dev.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Define a Module object with name, var, path (and optional css) for any package not in the preset list.","message":"Presets (e.g., 'react') only work for known packages. For custom packages you must provide full Module object with 'var' and 'path'.","severity":"gotcha","affected_versions":"*"},{"fix":"Set the 'prodUrl' option to your desired CDN URL template (e.g., 'https://unpkg.com/{name}@{version}/{path}').","message":"The 'prodUrl' default uses jsDelivr. To switch to unpkg, cdnjs, or others, you must set 'prodUrl' or override per module.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use 'import cdn from 'vite-plugin-cdn-import'' and ensure vite.config.ts is treated as ESM (set type: module in package.json or rename .mjs).","cause":"Using CommonJS require() instead of ESM import in vite.config.ts.","error":"Error: The package 'vite-plugin-cdn-import' is not ESM (CommonJS) and cannot be imported via require()"},{"fix":"Run 'npm install vite-plugin-cdn-import --save-dev' and verify it appears in devDependencies.","cause":"Package is not installed or not added to package.json.","error":"[vite] Cannot find module 'vite-plugin-cdn-import'"},{"fix":"Ensure the package name and 'var' (e.g., 'React') are correct and the module is included in options.modules.","cause":"The CDN script is not injected because the module is not in the modules list, or 'var' does not match the global variable.","error":"Uncaught ReferenceError: React is not defined"},{"fix":"Pass a 'modules' array to the plugin, e.g., cdn({ modules: ['react'] }).","cause":"options.modules is undefined or not an array.","error":"TypeError: Cannot read properties of undefined (reading 'map')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}