arraybuffer-loader

1.0.8 verified Sat Apr 25 auth: no javascript

A webpack loader that returns file contents as an ArrayBuffer, useful for binary file types like WebAssembly (.wasm), images, or data files. Current stable version is 1.0.8. The package has low release cadence, primarily dependency updates. Key differentiator: provides raw ArrayBuffer output, whereas similar loaders may return different buffer types. Supports modern browsers (IE>=10) and Node.js. Security fix in v1.0.6 replaced deprecated Buffer API. Works with webpack 4+ but requires special configuration for .wasm files due to built-in webpack WebAssembly support.

Common errors

error Module parse failed: Unexpected token (1:0) / You may need an appropriate loader to handle this file type. ↓

cause Webpack 4+ tries to parse .wasm as JavaScript; missing `type: 'javascript/auto'`.

fix

Add type: 'javascript/auto' to the rule for .wasm files in webpack config.

error TypeError: Cannot use 'in' operator to search for 'length' in undefined ↓

cause Output buffer is undefined because loader wasn't applied (wrong extension or missing rule).

fix

Verify the file extension matches test regex in webpack rule, or use inline syntax: require('arraybuffer!./file.dat').

error Error: Module not found: Error: Can't resolve 'arraybuffer' in '...' ↓

cause Inline loader syntax missing underscore before arraybuffer; should be 'arraybuffer!./file.dat'.

fix

Use correct inline syntax: const buffer = require('arraybuffer!./file.dat').

error WARNING in ./file.wasm / Critical dependency: require function is used in a way in which dependencies cannot be statically extracted ↓

cause Using dynamic require with .wasm file; webpack cannot statically analyze it.

fix

Use static require or import with the loader: const wasm = require('./file.wasm').

Warnings

gotcha Webpack 4+ fails to compile .wasm files with arraybuffer-loader unless type: 'javascript/auto' is set ↓

fix Add `type: 'javascript/auto'` to the rule for .wasm files.

deprecated ArrayBuffer is not directly usable in Webpack 5 without additional configuration due to asset modules ↓

fix Consider using webpack 5's asset/resource module type with raw-loader or custom loader for ArrayBuffer.

breaking Buffer.from replaces new Buffer in v1.0.6 security fix; old code using new Buffer may break ↓

fix Update to v1.0.6 or later; no code change needed as API is compatible.

Install

npm install arraybuffer-loader

yarn add arraybuffer-loader

pnpm add arraybuffer-loader

Imports

none (loader usage in webpack config)

wrong

module: { rules: [{ test: /\.wasm$/, use: ['arraybuffer-loader'] }] }

correct

// In webpack.config.js
module: { rules: [{ test: /\.wasm$/, type: 'javascript/auto', use: ['arraybuffer-loader'] }] }

For .wasm files, webpack 4+ requires `type: 'javascript/auto'` to avoid parsing issues.

inline require
wrong
```
const buffer = require('./file.dat')
```
correct
```
const buffer = require('arraybuffer!./file.dat')
```
Inline loader syntax 'arraybuffer!./file.dat' tells webpack to use arraybuffer-loader.
ESM import (not directly supported)
wrong
```
import buffer from './file.dat'
```
correct
```
import buffer from 'arraybuffer!./file.dat'
```
No default named export; use inline loader syntax in import statement.

Quickstart

Shows webpack configuration for .wasm and .dat files, with inline require usage to get ArrayBuffer, then convert to Uint8Array.

// Install: npm install --save-dev arraybuffer-loader

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'javascript/auto',
        use: ['arraybuffer-loader']
      },
      {
        test: /\.dat$/,
        use: ['arraybuffer-loader']
      }
    ]
  }
};

// src/index.js
const wasmBuffer = require('./module.wasm');
WebAssembly.instantiate(wasmBuffer).then(result => {
  console.log('WASM loaded');
});

const datArray = new Uint8Array(require('./data.dat'));
console.log('Data length:', datArray.length);