{"id":22581,"library":"vite-plugin-arraybuffer","title":"vite-plugin-arraybuffer","description":"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.","status":"active","version":"0.1.4","language":"javascript","source_language":"en","source_url":"git://github.com/tachibana-shin/vite-plugin-arraybuffer","tags":["javascript","vite-plugin-arraybuffer","Tachibana Shin","vite","arraybuffer","import file","tachibana-shin","typescript"],"install":[{"cmd":"npm install vite-plugin-arraybuffer","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-arraybuffer","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-arraybuffer","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only; CJS require does not work.","wrong":"const vitePluginArraybuffer = require('vite-plugin-arraybuffer')","symbol":"default","correct":"import vitePluginArraybuffer from 'vite-plugin-arraybuffer'"},{"note":"The plugin doesn't export types; use Vite's UserConfig type.","wrong":null,"symbol":"default (type import)","correct":"import type { UserConfig } from 'vite';"},{"note":"Import from root package; avoid deep imports.","wrong":"import vitePluginArraybuffer from 'vite-plugin-arraybuffer/src/index'","symbol":"(re-export in vite.config.ts)","correct":"import { defineConfig } from 'vite';\nimport vitePluginArraybuffer from 'vite-plugin-arraybuffer';\nexport default defineConfig({ plugins: [vitePluginArraybuffer()] });"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite';\nimport vitePluginArraybuffer from 'vite-plugin-arraybuffer';\n\nexport default defineConfig({\n  plugins: [\n    vitePluginArraybuffer({\n      // Optional: include specific file extensions\n      include: ['**/*.bin', '**/*.dat'],\n      // Optional: exclude certain directories\n      exclude: ['node_modules/**'],\n    }),\n  ],\n});\n\n// In your component/script\nimport myBuffer from './example.bin?arraybuffer';  // returns ArrayBuffer\nimport { default as myUint8 } from './example.bin?uint8array';  // returns Uint8Array\n\nconsole.log(myBuffer.byteLength);\nconsole.log(myUint8.length);","lang":"javascript","description":"Configures Vite to import .bin files as ArrayBuffer and .dat files as ArrayBuffer (default) or Uint8Array using query parameters."},"warnings":[{"fix":"Always append ?arraybuffer or ?uint8array to import paths to get binary data.","message":"The 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).","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Convert require statements to import statements, or use Vite's CJS compatibility mode.","message":"The plugin does not support CommonJS (require) imports. It relies on Vite's ESM transform pipeline.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Update imports to include ?arraybuffer or ?uint8array query parameter.","message":"In 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.","severity":"breaking","affected_versions":"<0.1.0"},{"fix":"Use query parameters on imports instead; they override the config-based output type.","message":"The option 'outputType' in the plugin configuration is deprecated and will be removed in future versions.","severity":"deprecated","affected_versions":"0.1.0 - 0.1.4"},{"fix":"For large files, consider using fetch() with streaming or a WebWorker to avoid blocking the main thread.","message":"Large binary files may cause memory issues when imported directly as ArrayBuffer. The plugin loads the entire file into memory.","severity":"gotcha","affected_versions":">=0.1.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-arraybuffer' and ensure the import is from 'vite-plugin-arraybuffer' (not './vite-plugin-arraybuffer').","cause":"The package is not installed or the import path is incorrect.","error":"Error: 'vite-plugin-arraybuffer' resolution failed: module not found"},{"fix":"Append '?arraybuffer' to the import path, e.g., import data from './file.bin?arraybuffer'.","cause":"Importing a file without the query parameter and trying to use it as an ArrayBuffer.","error":"TypeError: Cannot read properties of undefined (reading 'arraybuffer')"},{"fix":"Ensure your file is an ES module (use type: 'module' in package.json or .mjs extension) and run via Vite.","cause":"Using import syntax in a CommonJS file or without proper Vite setup.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Use streaming or chunked loading for large files. Consider using the Web Streams API instead of direct import.","cause":"Importing a file that is too large to fit in memory as a single ArrayBuffer.","error":"Uncaught (in promise) RangeError: Array buffer allocation failed"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}