{"id":21171,"library":"django-vite-plugin","title":"Django Vite Plugin","description":"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.","status":"active","version":"4.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/protibimbok/django-vite-plugin","tags":["javascript","django","vite","vite-plugin","typescript"],"install":[{"cmd":"npm install django-vite-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add django-vite-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add django-vite-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency, Vite core required","package":"vite","optional":false}],"imports":[{"note":"Named export; default export not available.","wrong":"import djangoVitePlugin from 'django-vite-plugin'","symbol":"djangoVitePlugin","correct":"import { djangoVitePlugin } from 'django-vite-plugin'"},{"note":"CJS require must destructure named export.","wrong":"const djangoVitePlugin = require('django-vite-plugin')","symbol":"djangoVitePlugin","correct":"const { djangoVitePlugin } = require('django-vite-plugin')"},{"note":"Type-only import to avoid bundling at runtime. Available in v4+.","wrong":"import { DjangoVitePluginOptions } from 'django-vite-plugin'","symbol":"type DjangoVitePluginOptions","correct":"import type { DjangoVitePluginOptions } from 'django-vite-plugin'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite'\nimport { djangoVitePlugin } from 'django-vite-plugin'\n\nexport default defineConfig({\n  plugins: [\n    djangoVitePlugin([\n      'home/js/app.js',\n      'home/css/style.css',\n    ])\n  ],\n  build: {\n    outDir: 'static_bundles',\n    manifest: true,\n  },\n  server: {\n    port: 5173,\n    strictPort: true,\n  },\n})","lang":"javascript","description":"Sets up Vite with Django plugin: specifies entry points, output directory, manifest, and dev server port."},"warnings":[{"fix":"Update to new signature: djangoVitePlugin(['entry1.js', 'entry2.css'], { ... })","message":"v4.0.0 changed the plugin signature from (options) to (inputs, options?). Old code using djangoVitePlugin({...}) will break.","severity":"breaking","affected_versions":">=4.0.0 <4.1.0"},{"fix":"Ensure all entry points are passed to djangoVitePlugin() array.","message":"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.","severity":"breaking","affected_versions":">=4.1.0"},{"fix":"Use 'build.outDir' in Vite config instead of plugin option 'outputDir'.","message":"The 'outputDir' option was deprecated in v4.0.0 in favor of Vite's 'build.outDir'.","severity":"deprecated","affected_versions":">=4.0.0"},{"fix":"Ensure you have '@vitejs/plugin-react' installed and configured alongside djangoVitePlugin.","message":"React HMR support requires additional configuration with 'react' plugin and correct alias setup.","severity":"gotcha","affected_versions":">=4.0.5"},{"fix":"Set 'type': 'module' in package.json or rename config to .mjs","message":"ESM-only since v4.0.2-npm; if your project uses CommonJS, you must upgrade to ESM or use dynamic import()","severity":"gotcha","affected_versions":">=4.0.2-npm"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import.meta.url to derive __dirname: const __dirname = dirname(fileURLToPath(import.meta.url)); or avoid __dirname entirely.","cause":"Using ESM (type: module) but code references __dirname which is not available in ESM.","error":"Error: __dirname is not defined in ES module scope"},{"fix":"Change to: import { djangoVitePlugin } from 'django-vite-plugin'","cause":"Default import used instead of named import.","error":"TypeError: djangoVitePlugin is not a function"},{"fix":"Run: npm install django-vite-plugin","cause":"Package not installed or not in node_modules. Also may be due to old npm cache.","error":"Error: Cannot find module 'django-vite-plugin'"},{"fix":"Run 'vite build' to generate manifest, and ensure Vite config has build.manifest: true.","cause":"Build not run before production mode or manifest path is incorrect.","error":"Error: [plugin: django-vite] No manifest found at..."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}