add-asset-webpack-plugin

3.1.1 verified Sat Apr 25 auth: no javascript

Dynamically add an asset (file) to the Webpack output graph. This is a lightweight, zero-dependency Webpack plugin (v3.1.1) that lets you inject a file with a given source string, either statically or via a callback receiving the compilation object. It ships TypeScript types. Key differentiator: it only creates output assets, not virtual modules — use webpack-virtual-modules if you need importable modules. Supports Webpack >=5, Node >=18, ESM only. Maintained by Sindre Sorhus.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module ↓

cause Trying to require() the ESM-only package.

fix

Use import instead, or use dynamic import: const AddAssetPlugin = (await import('add-asset-webpack-plugin')).default;

error TypeError: AddAssetPlugin is not a constructor ↓

cause Named import { AddAssetPlugin } instead of default import.

fix

Use import AddAssetPlugin from 'add-asset-webpack-plugin'.

error AddAssetPlugin is not a constructor (when using require) ↓

cause CommonJS require returns an object with a 'default' property, not the class itself.

fix

Use const { default: AddAssetPlugin } = require('add-asset-webpack-plugin'); or switch to dynamic import.

Warnings

breaking v3.0.0 is ESM-only; require() throws ERR_REQUIRE_ESM. ↓

fix Use import (ESM) or switch to dynamic import with .default.

breaking v3.0.0 requires Node.js >=18. ↓

fix Upgrade Node.js to 18+ or stay on v2.x (supports Node >=10).

breaking v2.0.0 requires Webpack >=5. ↓

fix Use Webpack 5+ or stick with v1.x (supports Webpack 4).

gotcha This plugin creates output assets, not virtual modules; they cannot be imported by other modules during compilation. ↓

fix Use webpack-virtual-modules if you need importable virtual files.

gotcha The source is written to the output directory; ensure the filePath does not collide with other output files. ↓

fix Use a unique relative path, e.g., 'assets/generated.js'.

Install

npm install add-asset-webpack-plugin

yarn add add-asset-webpack-plugin

pnpm add add-asset-webpack-plugin

Imports

AddAssetPlugin

wrong

const AddAssetPlugin = require('add-asset-webpack-plugin')

correct

import AddAssetPlugin from 'add-asset-webpack-plugin'

ESM-only since v3; require() will fail with ERR_REQUIRE_ESM.

AddAssetPlugin (type)

wrong

import { AddAssetPlugin } from 'add-asset-webpack-plugin'

correct

import type AddAssetPlugin from 'add-asset-webpack-plugin'

Type is default export; named import produces undefined.

AddAssetPlugin (default import with require)
wrong
```
const AddAssetPlugin = require('add-asset-webpack-plugin').default
```
correct
```
const AddAssetPlugin = (await import('add-asset-webpack-plugin')).default
```
If you must use dynamic import, await the import and access .default. .default on require() gives undefined.

Quickstart

Shows basic usage: instantiate plugin with file path and source string, then add to Webpack plugins array.

import AddAssetPlugin from 'add-asset-webpack-plugin';

export default {
  plugins: [
    new AddAssetPlugin('file.js', `
      console.log('This is a dynamically created file');
    `)
  ]
};