vite-plugin-resolve-umd-format

1.0.0 verified Mon Apr 27 auth: no javascript

Vite plugin that forces UMD format output to use .js extension instead of .cjs, fixing Content-Type header issues. Current version 1.0.0, compatible with Vite >=4.0.0. Addresses a specific Vite v3+ behavior where UMD modules get .cjs extension and 'application/node' MIME type; this plugin renames output to .js for correct browser consumption. Differentiates from generic output manipulation by targeting UMD format only and being lightweight. Ships TypeScript types.

Common errors

error TypeError: umdFormatResolver is not a function ↓

cause Using named import instead of default import.

fix

Change to: import umdFormatResolver from 'vite-plugin-resolve-umd-format'

error Error: The module "vite-plugin-resolve-umd-format" cannot be used with require() ↓

cause Package is ESM-only and cannot be required in CommonJS environment.

fix

Use import syntax or set "type": "module" in package.json.

error [vite] Internal server error: Cannot find module 'vite-plugin-resolve-umd-format' ↓

cause Package not installed or not in node_modules.

fix

Run: npm install vite-plugin-resolve-umd-format --save-dev

error WARN: This plugin doesn't have any effect because output format is not 'umd'. ↓

cause Build output format is set to something other than 'umd'.

fix

Set build.rollupOptions.output.format to 'umd'.

Warnings

gotcha Plugin only affects UMD format; other formats (es, cjs) are unchanged. ↓

fix Ensure build output format is set to 'umd' for plugin to take effect.

deprecated Vite 3+ changed UMD output extension to .cjs; this plugin reverses that. In future Vite versions, this behavior may be configurable natively. ↓

fix Monitor Vite changelogs; if native option is added, consider removing plugin.

gotcha Plugin requires Vite >=4.0.0; may not work with older versions. ↓

fix Upgrade Vite to version 4 or later, or use an alternative workaround.

gotcha Incorrect import style (named instead of default) will cause 'undefined is not a function' error. ↓

fix Use default import: import umdFormatResolver from 'vite-plugin-resolve-umd-format'

Install

npm install vite-plugin-resolve-umd-format

yarn add vite-plugin-resolve-umd-format

pnpm add vite-plugin-resolve-umd-format

Imports

default

wrong

import { umdFormatResolver } from 'vite-plugin-resolve-umd-format'

correct

import umdFormatResolver from 'vite-plugin-resolve-umd-format'

default export; requires ESM. CommonJS require will not work because package is ESM-only.

default
wrong
```
const { default: umdFormatResolver } = require('vite-plugin-resolve-umd-format')
```
correct
```
const umdFormatResolver = require('vite-plugin-resolve-umd-format')
```
For CommonJS in Node; package is ESM but can be required due to dual CJS/ESM? Actually package.json has exports, but no 'require' field; use ESM import.

default

wrong

import * as umdFormatResolver from 'vite-plugin-resolve-umd-format'

correct

import umdFormatResolver from 'vite-plugin-resolve-umd-format'

Correct default import, not namespace import.

Quickstart

Shows basic usage: import the default export, add to plugins array, and configure UMD output.

// vite.config.js
import { defineConfig } from 'vite'
import umdFormatResolver from 'vite-plugin-resolve-umd-format'

export default defineConfig({
  plugins: [umdFormatResolver()],
  build: {
    rollupOptions: {
      output: {
        format: 'umd',
        name: 'MyLib',
        entryFileNames: 'my-lib.js'
      }
    }
  }
})