# vite-plugin-require

> can let vite projects to support require

Latest version **1.3.0** (published 2026-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-require
pnpm add vite-plugin-require
yarn add vite-plugin-require
bun add vite-plugin-require
```

## Health

**Score 50/100 (C)** — status: active.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2026-06-03 |
| First published | 2021-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 7 |
| Unpacked size | 26.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 87 |
| Author | wangzongming |
| Maintainers | wangxiongxiong |
| Keywords | vite, require, vite-plugin, vite-plugin-require |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-require
- Repository: https://github.com/wangzongming/vite-plugin-require
- Homepage: https://github.com/wangzongming/vite-plugin-require#readme
- Issues: https://github.com/wangzongming/vite-plugin-require/issues
- npm.io page: https://npm.io/package/vite-plugin-require

## Dependencies (7)

- [webpack](https://npm.io/package/webpack.md) ^4.46.0 || ^5.0.0
- [vue-loader](https://npm.io/package/vue-loader.md) ^17.4.2
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.24.5
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.24.5
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.24.5
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.24.5
- [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) ^3.4.27

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2026-06-03
- 1.2.17 — 2026-04-08
- 1.2.16 — 2026-04-08
- 1.2.15 — 2026-04-08
- 1.2.14 — 2024-05-21
- 1.1.14 — 2023-12-11
- 1.1.13 — 2023-11-30
- 1.1.12 — 2023-11-28
- 1.1.11 — 2023-09-20
- 1.1.10 — 2022-11-25
- 1.0.10 — 2022-11-22
- 1.0.9 — 2022-11-22
- 1.0.8 — 2022-11-15
- 1.0.7 — 2022-10-12
- 1.0.6 — 2022-10-12
- … 13 more at https://npm.io/package/vite-plugin-require/versions

## README

# vite-plugin-require [![npm](https://img.shields.io/npm/v/vite-plugin-require.svg)](https://www.npmjs.com/package/vite-plugin-require) [![npm](https://img.shields.io/npm/dm/vite-plugin-require.svg?style=flat)](https://www.npmjs.com/package/vite-plugin-require)

> Let Vite projects support `require("xxx")` syntax. [vite-plugin-require](https://www.npmjs.com/package/vite-plugin-require)

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

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

---
-  [中文文档](https://github.com/wangzongming/vite-plugin-require/blob/master/readme-zh.md)
-  [English](https://github.com/wangzongming/vite-plugin-require)
---

## 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

```
npm i vite-plugin-require | yarn add vite-plugin-require
```

---

## Usage

```js
import vue from '@vitejs/plugin-vue'
import vitePluginRequire from "vite-plugin-require";

export default {
	plugins: [
        vue(),

        // Must be placed after the vue plugin
		vitePluginRequire(),

        // vite4、vite5、vite6 (ESM)
        // vitePluginRequire.default()
	],
};
```

---

## 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`.

```jsx
<img src={require("./imgs/logo.png")} alt="logo" />
```

#### 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.

```jsx
const img = "./imgs/logo.png";
<img src={require(img)} alt="logo" />
```

#### 3. String Concatenation (`BinaryExpression`)

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

```jsx
const prefix = "./imgs/";
const suffix = "logo";
<img src={require(prefix + suffix + ".png")} alt="logo" />
```

#### 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.

```jsx
<img src={require(isPrimary ? "./imgs/logo-blue.svg" : "./imgs/logo.svg")} alt="logo" />
```

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

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

```jsx
<img src={require(isPrimary ? "./imgs/logo-blue.svg" : dynamicPath)} alt="logo" />
```

#### 5. Template Literal (`TemplateLiteral`)

**No interpolation** — treated as a static path:

```jsx
<img src={require(`./imgs/logo.png`)} alt="logo" />
```

**With interpolation** — converted to runtime URL resolution:

```jsx
<img src={require(`./imgs/${icon}.svg`)} alt="icon" />
// → new URL(`./imgs/${icon}.svg`, import.meta.url).href

<img src={require(`./imgs/${active ? `${name}_active` : name}.svg`)} alt="icon" />
// → new URL(`./imgs/${active ? `${name}_active` : name}.svg`, import.meta.url).href
```

### Path Resolution

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

```jsx
// src/views/Page1/index.jsx
<img src={require("../../../imgs/logo.png")} alt="logo" />
<img src={require("./imgs/logo.png")} alt="logo" />
```

```jsx
// with alias: @imgs → ./src/imgs/
<img src={require("@imgs/logo.png")} alt="logo" />
```

### 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](https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url) |

**`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:

```jsx
let imgUrl = process.env.NODE_ENV !== "development" ? require("../imgs/logo.png") : null;

return <>
    { imgUrl ? <img src={imgUrl}/> : null }
</>
```

> Do **not** put the conditional inside `src`, e.g. `src={xx ? require("../imgs/logo.png") : null}`. See [issue #28](https://github.com/wangzongming/vite-plugin-require/issues/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)$/`

```js
vitePluginRequire({ fileRegex: /(.jsx?|.tsx?|.vue)$/ })
```

#### translateType

Conversion mode. Default: `"import"`

```js
vitePluginRequire({ translateType: "import" })
vitePluginRequire({ translateType: "importMetaUrl" })
```

#### log

Debug logger, receives internal transform info.

```js
vitePluginRequire({ log: (...args) => console.log(...args) })
```

---

## Demo

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

```jsx
// app.jsx
function App() {
    const img2 = "./img/1.png";
    const img3_1 = "./img/";
    const img3_2 = "./1/";
    const icon = "home";

    return (
        <div>
            {/* Static path */}
            <img src={require("./imgs/logo.png")} alt="logo1" />

            {/* Variable */}
            <img src={require(img2)} alt="logo2" />

            {/* String concatenation */}
            <img src={require(img3_1 + img3_2 + ".png")} alt="logo3" />

            {/* Conditional expression */}
            <img src={require(isBlue ? "./imgs/logo-blue.svg" : "./imgs/logo.svg")} alt="logo4" />

            {/* Template literal */}
            <img src={require(`./imgs/${icon}.svg`)} alt="logo5" />
        </div>
    );
}
export default App;
```

---

## Upgrade Log

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

---

## Alias

vite.config.js

```js
resolve: {
  alias: [
    { find: "@imgs", replacement: path.resolve(__dirname, "./src/imgs/") },
  ],
},
```

page.jsx

```jsx
<img src={require("@imgs/logo.png")} alt="" />
```

---

## FAQ

### 1. vitePluginRequire is not a function

```js
import vitePluginRequire from "vite-plugin-require";

export default {
	plugins: [
        vitePluginRequire.default()
	],
};
```

### 2. Unsupported type: ConditionalExpression / TemplateLiteral

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

---
_Source: https://npm.io/package/vite-plugin-require · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._