{"id":18965,"library":"arraybuffer-loader","title":"arraybuffer-loader","description":"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.","status":"active","version":"1.0.8","language":"javascript","source_language":"en","source_url":"https://github.com/pine/arraybuffer-loader","tags":["javascript"],"install":[{"cmd":"npm install arraybuffer-loader","lang":"bash","label":"npm"},{"cmd":"yarn add arraybuffer-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add arraybuffer-loader","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"For .wasm files, webpack 4+ requires `type: 'javascript/auto'` to avoid parsing issues.","wrong":"module: { rules: [{ test: /\\.wasm$/, use: ['arraybuffer-loader'] }] }","symbol":"none (loader usage in webpack config)","correct":"// In webpack.config.js\nmodule: { rules: [{ test: /\\.wasm$/, type: 'javascript/auto', use: ['arraybuffer-loader'] }] }"},{"note":"Inline loader syntax 'arraybuffer!./file.dat' tells webpack to use arraybuffer-loader.","wrong":"const buffer = require('./file.dat')","symbol":"inline require","correct":"const buffer = require('arraybuffer!./file.dat')"},{"note":"No default named export; use inline loader syntax in import statement.","wrong":"import buffer from './file.dat'","symbol":"ESM import (not directly supported)","correct":"import buffer from 'arraybuffer!./file.dat'"}],"quickstart":{"code":"// Install: npm install --save-dev arraybuffer-loader\n\n// webpack.config.js\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: __dirname + '/dist'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.wasm$/,\n        type: 'javascript/auto',\n        use: ['arraybuffer-loader']\n      },\n      {\n        test: /\\.dat$/,\n        use: ['arraybuffer-loader']\n      }\n    ]\n  }\n};\n\n// src/index.js\nconst wasmBuffer = require('./module.wasm');\nWebAssembly.instantiate(wasmBuffer).then(result => {\n  console.log('WASM loaded');\n});\n\nconst datArray = new Uint8Array(require('./data.dat'));\nconsole.log('Data length:', datArray.length);","lang":"javascript","description":"Shows webpack configuration for .wasm and .dat files, with inline require usage to get ArrayBuffer, then convert to Uint8Array."},"warnings":[{"fix":"Add `type: 'javascript/auto'` to the rule for .wasm files.","message":"Webpack 4+ fails to compile .wasm files with arraybuffer-loader unless type: 'javascript/auto' is set","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider using webpack 5's asset/resource module type with raw-loader or custom loader for ArrayBuffer.","message":"ArrayBuffer is not directly usable in Webpack 5 without additional configuration due to asset modules","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Update to v1.0.6 or later; no code change needed as API is compatible.","message":"Buffer.from replaces new Buffer in v1.0.6 security fix; old code using new Buffer may break","severity":"breaking","affected_versions":"<1.0.6"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add `type: 'javascript/auto'` to the rule for .wasm files in webpack config.","cause":"Webpack 4+ tries to parse .wasm as JavaScript; missing `type: 'javascript/auto'`.","error":"Module parse failed: Unexpected token (1:0) / You may need an appropriate loader to handle this file type."},{"fix":"Verify the file extension matches `test` regex in webpack rule, or use inline syntax: `require('arraybuffer!./file.dat')`.","cause":"Output buffer is undefined because loader wasn't applied (wrong extension or missing rule).","error":"TypeError: Cannot use 'in' operator to search for 'length' in undefined"},{"fix":"Use correct inline syntax: `const buffer = require('arraybuffer!./file.dat')`.","cause":"Inline loader syntax missing underscore before arraybuffer; should be 'arraybuffer!./file.dat'.","error":"Error: Module not found: Error: Can't resolve 'arraybuffer' in '...'"},{"fix":"Use static require or import with the loader: `const wasm = require('./file.wasm')`.","cause":"Using dynamic require with .wasm file; webpack cannot statically analyze it.","error":"WARNING in ./file.wasm / Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}