vite-plugin-require weekly downloads statistics

vite-plugin-require

Let Vite projects support require("xxx") syntax. vite-plugin-require

Install and use to achieve painless support for require("xxx").

If the project is useful to you, please click on star!

• 中文文档 • English

Other Projects

The simplest and lowest-cost solution for hardware + AI: https://github.com/wangzongming/esp-ai

Community

QQ Group: 952051286

Supported Vite Versions

• √ vite2 • √ vite3 • √ vite4 • √ vite5 • √ vite6 • √ vite7 • √ vite8

Install

Usage

Supported Features

File Types

By default, the plugin transforms files matching /(.jsx?|.tsx?|.vue)$/.

| Extension | Supported |

| .js / .jsx | √ | | .ts / .tsx | √ | | .vue | √ (must be placed after @vitejs/plugin-vue) |

Files under node_modules are excluded automatically.

require() Argument Types

1. String Literal

Static path, converted to a top-level import.

2. Identifier (Variable)

The variable must be initialized with a string literal in the same file. The plugin resolves the variable to a static path at compile time.

3. String Concatenation (BinaryExpression)

Supports + concatenation of string literals, variables, and nested expressions.

4. Conditional Expression (ConditionalExpression)

Supports ternary expressions inside require().

Both branches are static paths (default translateType: "import"):

The plugin imports both assets and replaces require() with a ternary expression.

Either branch is dynamic, or translateType: "importMetaUrl":

Falls back to new URL(..., import.meta.url).href.

5. Template Literal (TemplateLiteral)

No interpolation — treated as a static path:

With interpolation — converted to runtime URL resolution:

Path Resolution

• Relative paths (./, ../) are resolved relative to the current file. • Deeply nested directories are supported. • Vite resolve.alias is supported.

Conversion Modes (translateType)

| Mode | Description |

| import (default) | Hoists static assets to top-level import statements | | importMetaUrl | Converts to new URL(path, import.meta.url).href. See Vite assets docs |

translateType: "import"

All resolvable static require() calls are replaced with top-level imports.

translateType: "importMetaUrl"

Uses import.meta.url instead of import. Supports on-demand loading — the original code is not removed at build time.

Only works when the asset variable exists before rendering:

Do not put the conditional inside src, e.g. src={xx ? require("../imgs/logo.png") : null}. See issue #28.

Limitations

| Scenario | Status |

| Variable assigned a non-literal value | ✗ Cannot resolve | | Complex variable reassignment | ✗ Only simple const x = "path" is supported | | require() with unsupported argument types | ✗ Throws Unsupported type: xxx | | require(new URL(...)) (MemberExpression) | ✗ Not implemented yet |

Options

All options are optional.

fileRegex

Files to transform. Default: /(.jsx?|.tsx?|.vue)$/

translateType

Conversion mode. Default: "import"

log

Debug logger, receives internal transform info.

Demo

Suppose there are app.jsx and imgs folder in the src directory:

Upgrade Log

https://github.com/wangzongming/vite-plugin-require/blob/master/version-log.md

Alias

vite.config.js

page.jsx

FAQ

1. vitePluginRequire is not a function

2. Unsupported type: ConditionalExpression / TemplateLiteral

Upgrade to the latest version. Both are supported since v1.3.0+.

Description from the npm listing.