{"id":22813,"library":"vite-plugin-require","title":"vite-plugin-require","description":"A Vite plugin that enables CommonJS require() syntax in Vite projects, converting require calls to ESM imports or import.meta.url references. Version 1.2.17 is the latest stable release, supporting Vite 2 through 6. It uses a regex-based transform to replace require() calls, with options to control file scope and conversion mode. Different from alternatives like @originjs/vite-plugin-commonjs, this plugin focuses specifically on require() transforms for asset and module references. It ships TypeScript types but has a limited API surface. Last updated in 2024, the plugin has moderate community adoption and is maintained for compatibility with newer Vite versions.","status":"active","version":"1.2.17","language":"javascript","source_language":"en","source_url":"https://github.com/wangzongming/vite-plugin-require","tags":["javascript","vite","require","vite-plugin","vite-plugin-require","typescript"],"install":[{"cmd":"npm install vite-plugin-require","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-require","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-require","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency — plugin requires Vite to function","package":"vite","optional":false}],"imports":[{"note":"Package exports a default function. CommonJS require() is not recommended in ESM contexts. For Vite 4/5, use .default() as shown in docs.","wrong":"const vitePluginRequire = require('vite-plugin-require')","symbol":"vitePluginRequire","correct":"import vitePluginRequire from 'vite-plugin-require'"},{"note":"On Vite 4/5, the correct usage is vitePluginRequire.default() due to ESM/CJS interop. Check your Vite version to determine which pattern to use.","wrong":"vitePluginRequire()","symbol":"default","correct":"vitePluginRequire.default()"},{"note":"The package has no named exports; only a default export is available. Use dynamic import or default import.","wrong":"import { vitePluginRequire } from 'vite-plugin-require'","symbol":"vitePluginRequire (with type import)","correct":"import type { Plugin } from 'vite'; const vitePluginRequire = (): Plugin => import('vite-plugin-require').then(m => m.default())"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport vitePluginRequire from 'vite-plugin-require';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    // Must be after vue() plugin\n    vitePluginRequire({\n      fileRegex: /(.jsx?|.tsx?|.vue)$/,\n      translateType: 'import' // 'import' or 'importMetaUrl'\n    })\n  ]\n});\n// In any .vue, .jsx, .tsx file:\nconst img = require('./imgs/logo.png'); // Converts to import\nconsole.log(img);\n\n// For Vite 4/5, use:\n// import vitePluginRequire from 'vite-plugin-require';\n// and in config: vitePluginRequire.default()","lang":"javascript","description":"Configures Vite to use require() by adding the plugin after vue() and passing optional regex and translateType options."},"warnings":[{"fix":"Move require() variable declarations to top of file and avoid string templates like `${path}`.","message":"Variables used in require() must be declared at the top of the file and cannot use template literals.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use vitePluginRequire.default() in your config for Vite 4/5. Check documentation for exact version compatibility.","message":"Vite 4 and 5 require using .default() method on the imported function, not direct invocation.","severity":"breaking","affected_versions":">=1.1.0"},{"fix":"Reorder plugins so vitePluginRequire() comes after vue(), react(), etc.","message":"Plugin must be placed after the Vue plugin (or React/other framework plugins) to work correctly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use translateType: 'importMetaUrl' only when you need to conditionally keep require() in development, and be aware that the original source remains.","message":"When translateType is 'importMetaUrl', require() code is not deleted; conditional require() works but dynamic imports may not behave as expected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use absolute paths (starting from project root) or ensure paths are correct relative to project root.","message":"The entire project root is the root directory for require() resolution. Relative paths are resolved from the project root, not the file location.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install vite-plugin-require` or `yarn add vite-plugin-require`.","cause":"Package not installed or incorrect import path","error":"Error: Cannot find module 'vite-plugin-require'"},{"fix":"Replace vitePluginRequire() with vitePluginRequire.default() in your Vite config for Vite 4/5.","cause":"Using the plugin incorrectly on Vite 4/5 where .default() is required","error":"TypeError: vitePluginRequire is not a function"},{"fix":"Ensure require() arguments are simple string literals or top-level variables. No template literals or complex expressions.","cause":"Using template literals or dynamic expressions in require() that cannot be statically analyzed","error":"[vite] Internal server error: Transform failed with 1 error: The assignment to `require` is not a valid call."},{"fix":"Ensure the required module has a default export or use dynamic import() instead.","cause":"Trying to use require() with a file that is an ES module without default export","error":"Error: require() of ES Module not supported"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}