Django Vite Plugin

4.1.2 verified Mon Apr 27 auth: no javascript

Django plugin for Vite (v4.1.2) — integrates Vite frontend assets with Django backend. Release cadence: active, monthly releases. Key differentiators: uses Python side django-vite-plugin pip package, supports Vite 5/6/7, handles HMR, React support, and aliases. Alternative to django-vite and django-webpack-loader.

Common errors

error Error: __dirname is not defined in ES module scope ↓

cause Using ESM (type: module) but code references __dirname which is not available in ESM.

fix

Use import.meta.url to derive __dirname: const __dirname = dirname(fileURLToPath(import.meta.url)); or avoid __dirname entirely.

error TypeError: djangoVitePlugin is not a function ↓

cause Default import used instead of named import.

fix

Change to: import { djangoVitePlugin } from 'django-vite-plugin'

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

cause Package not installed or not in node_modules. Also may be due to old npm cache.

fix

Run: npm install django-vite-plugin

error Error: [plugin: django-vite] No manifest found at... ↓

cause Build not run before production mode or manifest path is incorrect.

fix

Run 'vite build' to generate manifest, and ensure Vite config has build.manifest: true.

Warnings

breaking v4.0.0 changed the plugin signature from (options) to (inputs, options?). Old code using djangoVitePlugin({...}) will break. ↓

fix Update to new signature: djangoVitePlugin(['entry1.js', 'entry2.css'], { ... })

breaking In v4.1.0, plugin no longer merges its input with vite config's input. If you relied on automatic merging, your entry points may be ignored. ↓

fix Ensure all entry points are passed to djangoVitePlugin() array.

deprecated The 'outputDir' option was deprecated in v4.0.0 in favor of Vite's 'build.outDir'. ↓

fix Use 'build.outDir' in Vite config instead of plugin option 'outputDir'.

gotcha React HMR support requires additional configuration with 'react' plugin and correct alias setup. ↓

fix Ensure you have '@vitejs/plugin-react' installed and configured alongside djangoVitePlugin.

gotcha ESM-only since v4.0.2-npm; if your project uses CommonJS, you must upgrade to ESM or use dynamic import() ↓

fix Set 'type': 'module' in package.json or rename config to .mjs

Install

npm install django-vite-plugin

yarn add django-vite-plugin

pnpm add django-vite-plugin

Imports

djangoVitePlugin

wrong

import djangoVitePlugin from 'django-vite-plugin'

correct

import { djangoVitePlugin } from 'django-vite-plugin'

Named export; default export not available.

djangoVitePlugin

wrong

const djangoVitePlugin = require('django-vite-plugin')

correct

const { djangoVitePlugin } = require('django-vite-plugin')

CJS require must destructure named export.

type DjangoVitePluginOptions

wrong

import { DjangoVitePluginOptions } from 'django-vite-plugin'

correct

import type { DjangoVitePluginOptions } from 'django-vite-plugin'

Type-only import to avoid bundling at runtime. Available in v4+.

Quickstart

Sets up Vite with Django plugin: specifies entry points, output directory, manifest, and dev server port.

// vite.config.js
import { defineConfig } from 'vite'
import { djangoVitePlugin } from 'django-vite-plugin'

export default defineConfig({
  plugins: [
    djangoVitePlugin([
      'home/js/app.js',
      'home/css/style.css',
    ])
  ],
  build: {
    outDir: 'static_bundles',
    manifest: true,
  },
  server: {
    port: 5173,
    strictPort: true,
  },
})