rollup-plugin-smart-asset

2.1.2 verified Mon Apr 27 auth: no javascript

Rollup plugin for processing assets (rebase, inline or copy) referenced from JavaScript/TypeScript code. Currently at version 2.1.2, with a stable release cadence. Key differentiators: supports three modes (rebase, inline, copy), keepImport for bundling libraries, custom hash algorithms (including MetroHash and xxHash), and full micromatch pattern support for include/exclude. Unlike rollup-plugin-url or @rollup/plugin-url, it prioritizes seamless config reuse with postcss-smart-asset and offers detailed hash options.

Common errors

error Error: The 'rollup-plugin-smart-asset' plugin is not a function ↓

cause Using named import instead of default import

fix

Replace import { smartAsset } with import smartAsset (or require with .default)

error TypeError: smartAsset is not a function ↓

cause CJS require returns an object with .default property

fix

Use const smartAsset = require('rollup-plugin-smart-asset').default

Warnings

gotcha Default export is not a function in CJS require() – must use .default ↓

fix Use require('rollup-plugin-smart-asset').default

gotcha If using 'include' or 'exclude', the 'extensions' option is ignored ↓

fix Set extensions via include/exclude patterns instead

gotcha Maximum file size for inline mode default is 14 kB (not 10 or 20) ↓

fix Set maxSize option explicitly to override

Install

npm install rollup-plugin-smart-asset

yarn add rollup-plugin-smart-asset

pnpm add rollup-plugin-smart-asset

Imports

smartAsset

wrong

import { smartAsset } from 'rollup-plugin-smart-asset'

correct

import smartAsset from 'rollup-plugin-smart-asset'

Default export only; named import will result in undefined.

smartAsset (CommonJS)

wrong

const smartAsset = require('rollup-plugin-smart-asset')

correct

const smartAsset = require('rollup-plugin-smart-asset').default

CJS users must access .default due to ESM->CJS interop.

Quickstart

Copies assets (default .svg,.gif,.png,.jpg) into 'assets/' in output dir, references them with '/static/[hash][ext]'.

import smartAsset from 'rollup-plugin-smart-asset';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    smartAsset({
      url: 'copy',
      assetsPath: 'assets',
      publicPath: '/static/',
      useHash: true,
      keepName: false,
      maxSize: 14
    })
  ]
};