rollup-plugin-import-assets

1.1.1 verified Mon Apr 27 auth: no javascript

A Rollup plugin (version 1.1.1) that allows importing image and other asset files directly in JavaScript, returning the public URL or path. It copies assets to the output directory, supports hashing for cache busting, and works with Rollup >=1.9.0. Unlike similar plugins, it is lightweight and focuses on basic asset import and emission without complex transformations.

Common errors

error Cannot find module 'rollup-plugin-import-assets' ↓

cause Package not installed or mismatched Node.js version (requires ESM support).

fix

Run 'npm install rollup-plugin-import-assets' and ensure package.json has 'type': 'module' or use .mjs extension for config.

error TypeError: importAssets is not a function ↓

cause Incorrect import: using named import { importAssets } instead of default import.

fix

Use 'import importAssets from 'rollup-plugin-import-assets'' or 'import { default as importAssets } from 'rollup-plugin-import-assets''.

error The plugin 'importAssets' assigned a different code path to an asset. ↓

cause Asset matched multiple include patterns? Actually, this error appears when including the same file via multiple expressions; not typical.

fix

Ensure each asset matches exactly one include pattern or use exclude to avoid duplicates.

Warnings

breaking Plugin is ESM-only and cannot be used with require() in CommonJS projects. ↓

fix Use ES module syntax (import) or switch to a plugin that supports CJS.

gotcha Include patterns must be RegExp objects, not strings or globs. ↓

fix Use RegExp literals or RegExp objects, e.g., [/\.jpg$/i]

gotcha If emitAssets is false, the imported asset will only return a path string but the file won't be copied. ↓

fix Set emitAssets: true if you need the file in the output directory.

gotcha File hashing uses the asset content, but hash algorithm is not configurable; may cause collisions for identical files. ↓

fix Use a different plugin if custom hashing or content addressing is needed.

Install

npm install rollup-plugin-import-assets

yarn add rollup-plugin-import-assets

pnpm add rollup-plugin-import-assets

Imports

default

wrong

const importAssets = require('rollup-plugin-import-assets')

correct

import importAssets from 'rollup-plugin-import-assets'

ESM default import; CommonJS require will fail because the package is ESM-only.

importAssets

wrong

import { importAssets } from 'rollup-plugin-import-assets'

correct

import { default as importAssets } from 'rollup-plugin-import-assets'

This package only exports a default function, not a named export. Named import will result in undefined.

config object

wrong

importAssets({ include: '...', emitAssets: 'true' })

correct

importAssets({ include: [/.../], emitAssets: true })

include must be an array of RegExp, emitAssets is boolean, not string.

Quickstart

Shows basic setup: install, config with asset inclusion, emission to output dir, and usage in code.

// Install: npm install --save-dev rollup rollup-plugin-import-assets
// rollup.config.js
import importAssets from 'rollup-plugin-import-assets';

export default {
  input: 'src/main.js',
  output: {
    dir: 'public',
    format: 'esm'
  },
  plugins: [
    importAssets({
      include: [/\.(gif|jpg|png|svg)$/i],
      emitAssets: true,
      fileNames: 'assets/[name]-[hash].[ext]',
      publicPath: '/static/'
    })
  ]
};

// src/main.js
import logo from './img/logo.png';
const img = `<img src="${logo}" />`;