Registry / http-networking / vite-plugin-arraybuffer

vite-plugin-arraybuffer

library0.1.4jsnpmunverified

A Vite plugin that enables importing binary files (images, videos, audio, etc.) as ArrayBuffer or Uint8Array directly in your JavaScript/TypeScript code. Version 0.1.4 is the latest stable release, with no scheduled release cadence. Unlike typical asset imports that return URLs or base64 strings, this plugin gives raw binary access, making it ideal for WebSocket streams, WebAssembly preprocessing, or custom binary formats. It is specifically designed for Vite's build system and does not work with other bundlers.

http-networking

npm install vite-plugin-arraybuffer

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-ARRAYB

vite-plugin-arraybuffer

http-networkingjavascriptv0.1.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import vitePluginArraybuffer from 'vite-plugin-arraybuffer'

✗ const vitePluginArraybuffer = require('vite-plugin-arraybuffer')

ESM-only; CJS require does not work.

default (type import)

✓ import type { UserConfig } from 'vite';

The plugin doesn't export types; use Vite's UserConfig type.

(re-export in vite.config.ts)

✓ import { defineConfig } from 'vite'; import vitePluginArraybuffer from 'vite-plugin-arraybuffer'; export default defineConfig({ plugins: [vitePluginArraybuffer()] });

✗ import vitePluginArraybuffer from 'vite-plugin-arraybuffer/src/index'

Import from root package; avoid deep imports.

Configures Vite to import .bin files as ArrayBuffer and .dat files as ArrayBuffer (default) or Uint8Array using query parameters.

// vite.config.js import { defineConfig } from 'vite'; import vitePluginArraybuffer from 'vite-plugin-arraybuffer'; export default defineConfig({ plugins: [ vitePluginArraybuffer({ // Optional: include specific file extensions include: ['**/*.bin', '**/*.dat'], // Optional: exclude certain directories exclude: ['node_modules/**'], }), ], }); // In your component/script import myBuffer from './example.bin?arraybuffer'; // returns ArrayBuffer import { default as myUint8 } from './example.bin?uint8array'; // returns Uint8Array console.log(myBuffer.byteLength); console.log(myUint8.length);

Debug

Known issues

gotchaThe plugin only transforms imports with explicit query parameters (?arraybuffer or ?uint8array). Without the query, the file will be treated as a regular asset import (URL string).

fix

Always append ?arraybuffer or ?uint8array to import paths to get binary data.

affects: >=0.1.0

gotchaThe plugin does not support CommonJS (require) imports. It relies on Vite's ESM transform pipeline.

fix

Convert require statements to import statements, or use Vite's CJS compatibility mode.

affects: >=0.1.0

breakingIn versions prior to 0.1.0, the default behavior was to return ArrayBuffer without a query parameter. This changed in 0.1.0 to require explicit query.

fix

Update imports to include ?arraybuffer or ?uint8array query parameter.

affects: <0.1.0

deprecatedThe option 'outputType' in the plugin configuration is deprecated and will be removed in future versions.

fix

Use query parameters on imports instead; they override the config-based output type.

affects: 0.1.0 - 0.1.4

gotchaLarge binary files may cause memory issues when imported directly as ArrayBuffer. The plugin loads the entire file into memory.

fix

For large files, consider using fetch() with streaming or a WebWorker to avoid blocking the main thread.

affects: >=0.1.0

Errors

Common errors & fixes

Error: 'vite-plugin-arraybuffer' resolution failed: module not found

The package is not installed or the import path is incorrect.

fix

Run 'npm install vite-plugin-arraybuffer' and ensure the import is from 'vite-plugin-arraybuffer' (not './vite-plugin-arraybuffer').

TypeError: Cannot read properties of undefined (reading 'arraybuffer')

Importing a file without the query parameter and trying to use it as an ArrayBuffer.

fix

Append '?arraybuffer' to the import path, e.g., import data from './file.bin?arraybuffer'.

SyntaxError: Cannot use import statement outside a module

Using import syntax in a CommonJS file or without proper Vite setup.

fix

Ensure your file is an ES module (use type: 'module' in package.json or .mjs extension) and run via Vite.

Uncaught (in promise) RangeError: Array buffer allocation failed

Importing a file that is too large to fit in memory as a single ArrayBuffer.

fix

Use streaming or chunked loading for large files. Consider using the Web Streams API instead of direct import.

Upgrade

Version history

0.1.4latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

22 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/tachibana-shin/vite-plugin-arraybuffer ↗

packagehttps://www.npmjs.com/package/vite-plugin-arraybuffer ↗

homepagehttps://tachibana-shin.github.io/vite-plugin-arraybuffer ↗