{"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,"search_vec":"'2':28 '5':29 'api':79 'automat':55 'break':74 'build':24 'built':63 'built-in':62 'cdn':4,18,57,82,85 'cdnjs':21 'chang':75 'common':67 'custom':32 'develop':43 'e.g':49 'etc':41 'extens':86 'extern':9,47,53 'generat':35 'generic':46 'import':5 'infrequ':71 'inject':56 'introduc':73 'javascript':80 'jsdelivr':19 'librari':68 'load':14 'lodash':40 'mode':44 'npm':11 'offer':61 'option':78 'packag':12 'plugin':3,7,48,52,83 'preset':36,65 'product':23 'react':38 'releas':69 'script/link':33,58 'specifi':10 'support':26 'tag':34,59 'type':31 'typescript':30,87 'unlik':45 'unpkg':20 'v1.0.0':72 'v1.0.1':25 'vite':2,6,27,51,81,84 'vite-plugin-cdn-import':1 'vite-plugin-extern':50 'vue':39","created_at":"2026-04-27T17:06:01.134350+00:00","updated_at":"2026-04-27T17:06:01.134350+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/mmf-fe/vite-plugin-cdn-import","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-cdn-import","openapi_spec":null,"status_page":null,"smithery":null,"categories":["http-networking","devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}