Registry / http-networking / vite-plugin-cdn-import

vite-plugin-cdn-import

library1.0.1jsnpmunverified

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.

http-networking devops

npm install vite-plugin-cdn-import

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-CDN-IM

vite-plugin-cdn-import

http-networkingjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import cdn from 'vite-plugin-cdn-import'

✗ const cdn = require('vite-plugin-cdn-import')

ESM-only; no CommonJS export. Must be used with Vite's ESM config.

Plugin type (optional)

✓ import type { Options } from 'vite-plugin-cdn-import'

Type import for configuration options; use with TypeScript projects.

Preset modules

✓ cdn({ modules: ['react', 'react-dom'] })

✗ cdn({ modules: [{ name: 'react' }] }) without 'var' and 'path'

Preset modules only require 'name' string; custom modules need full spec.

Configures Vite to externalize react and react-dom to CDN, showing custom module definition and prodUrl override.

// npm install vite-plugin-cdn-import --save-dev // vite.config.ts import { defineConfig } from 'vite'; import cdn from 'vite-plugin-cdn-import'; export default defineConfig({ plugins: [ cdn({ modules: [ { name: 'react', var: 'React', path: 'umd/react.production.min.js', }, { name: 'react-dom', var: 'ReactDOM', path: 'umd/react-dom.production.min.js', }, ], // optional development mode (default false) enableInDevMode: false, // optional custom CDN url template prodUrl: 'https://unpkg.com/{name}@{version}/{path}', }), ], });

Debug

Known issues

deprecatedautoComplete option is deprecated since v1.0.1. Pass required packages directly in options.modules instead.

fix

Remove autoComplete; add the package name (e.g., 'react') directly to the modules array.

affects: >=1.0.1

breakingIn v1.0.0, the plugin updated to Vite 5, dropping support for older Vite versions. Some presets were removed from autoComplete.

fix

If using Vite 4 or earlier, stick with v0.x. Update modules manually for any removed presets.

affects: >=1.0.0

gotchaPlugin does NOT work in development mode by default. Set 'enableInDevMode: true' to load from CDN during dev.

fix

Add 'enableInDevMode: true' to your plugin options if you need CDN scripts in dev.

affects: >=1.0.0

gotchaPresets (e.g., 'react') only work for known packages. For custom packages you must provide full Module object with 'var' and 'path'.

fix

Define a Module object with name, var, path (and optional css) for any package not in the preset list.

affects: *

gotchaThe 'prodUrl' default uses jsDelivr. To switch to unpkg, cdnjs, or others, you must set 'prodUrl' or override per module.

fix

Set the 'prodUrl' option to your desired CDN URL template (e.g., 'https://unpkg.com/{name}@{version}/{path}').

affects: *

Errors

Common errors & fixes

Error: The package 'vite-plugin-cdn-import' is not ESM (CommonJS) and cannot be imported via require()

Using CommonJS require() instead of ESM import in vite.config.ts.

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).

[vite] Cannot find module 'vite-plugin-cdn-import'

Package is not installed or not added to package.json.

fix

Run 'npm install vite-plugin-cdn-import --save-dev' and verify it appears in devDependencies.

Uncaught ReferenceError: React is not defined

The CDN script is not injected because the module is not in the modules list, or 'var' does not match the global variable.

fix

Ensure the package name and 'var' (e.g., 'React') are correct and the module is included in options.modules.

TypeError: Cannot read properties of undefined (reading 'map')

options.modules is undefined or not an array.

fix

Pass a 'modules' array to the plugin, e.g., cdn({ modules: ['react'] }).

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

18 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mmf-fe/vite-plugin-cdn-import ↗

packagehttps://www.npmjs.com/package/vite-plugin-cdn-import ↗