vite-plugin-cdn2

1.1.0 verified Mon Apr 27 auth: no javascript

A Vite plugin that replaces imported modules with CDN-hosted scripts and links during build. Current stable version is 1.1.0 (released 2024). Lightweight alternative to vite-plugin-cdn-import with TypeScript types, supports custom CDN resolvers, and works with Vue/JSX/TS. Actively maintained with frequent patch releases.

Common errors

error Error: Cannot find module 'vite-plugin-cdn2' ↓

cause Package not installed or typo (missing '2').

fix

Run 'npm install vite-plugin-cdn2 -D' and import correctly.

error TypeError: cdn is not a function ↓

cause Default import used instead of named import.

fix

Use 'import { cdn } from 'vite-plugin-cdn2''.

error Uncaught SyntaxError: The requested module 'vite-plugin-cdn2' does not provide an export named 'default' ↓

cause Default import used when only named export exists.

fix

Change import to named: 'import { cdn } from ...'.

error Error: [vite] Internal server error: Cannot read properties of undefined (reading 'transform') ↓

cause Plugin applied incorrectly (likely missing 'apply' or placed after Vite built-in plugins).

fix

Ensure plugin is placed before built-in plugins and 'apply' is set correctly.

Warnings

breaking Plugin renamed from 'vite-plugin-cdn' to 'vite-plugin-cdn2'. Old package is deprecated. ↓

fix Use 'vite-plugin-cdn2' package and update imports.

gotcha Plugin only applies during build by default (apply: 'build'). Does not work in dev mode. ↓

fix Set 'apply: 'serve'' to use during development if needed.

deprecated The 'external' plugin option exposed in v0.13.0 is deprecated in v1.0.0+ and will be removed. ↓

fix Use the 'cdn' plugin with 'modules' option instead.

gotcha Module resolution fails in monorepo setups if the module's package.json is not hoisted. ↓

fix Upgrade to >=0.13.0 which includes fix for monorepo.

breaking Starting from v1.0.0, the plugin is ESM-only. CJS projects cannot import it. ↓

fix Switch project to ESM or use dynamic import().

Install

npm install vite-plugin-cdn2

yarn add vite-plugin-cdn2

pnpm add vite-plugin-cdn2

Imports

cdn

wrong

const cdn = require('vite-plugin-cdn2')

correct

import { cdn } from 'vite-plugin-cdn2'

ESM-only; CommonJS require will fail.

default

wrong

import cdn from 'vite-plugin-cdn2'

correct

import { cdn } from 'vite-plugin-cdn2'

No default export; only named export 'cdn'.

type IModule

wrong

import { IModule } from 'vite-plugin-cdn2'

correct

import type { IModule } from 'vite-plugin-cdn2'

IModule is a type; use 'import type' to avoid runtime inclusion.

Quickstart

Shows how to replace Vue and React modules with CDN links in Vite config.

// vite.config.ts
import { defineConfig } from 'vite';
import { cdn } from 'vite-plugin-cdn2';

export default defineConfig({
  plugins: [
    cdn({
      modules: [
        { name: 'vue', var: 'Vue', path: 'https://unpkg.com/vue@3/dist/vue.global.prod.js' },
        'react'
      ]
    })
  ]
});