rollup-plugin-import-file

1.0.1 verified Mon Apr 27 auth: no javascript

A Rollup plugin that copies imported files of specified extensions (e.g., .wav, .doc) to an output directory and optionally adds a content hash to the filename, enabling import of non-JS assets in Rollup bundles. Version 1.0.1 is the latest stable release. It requires an explicit extension pattern and output path, making it suitable for projects that need to bundle static assets alongside JavaScript. Unlike similar plugins (e.g., @rollup/plugin-image, rollup-plugin-copy), it focuses on generic file copying with hashing and is minimal in configuration.

Common errors

error Error: Cannot find module 'rollup-plugin-import-file' ↓

cause The package is not installed or is installed as a dev dependency but not in node_modules.

fix

Run npm install --save-dev rollup-plugin-import-file or yarn add --dev rollup-plugin-import-file.

error TypeError: files is not a function ↓

cause Using named import instead of default import: `import { files } from 'rollup-plugin-import-file'`.

fix

Use default import: import files from 'rollup-plugin-import-file'.

error The requested module 'rollup-plugin-import-file' does not provide an export named 'files' ↓

cause Named import used but the package only provides a default export.

fix

Use import files from 'rollup-plugin-import-file' instead.

Warnings

gotcha Trying to import a file without specifying its extension in the `extensions` option will cause the plugin to ignore it, resulting in a module not found error. ↓

fix Ensure all imported file types are included in the `extensions` regex pattern, e.g., /.(wav|doc|png)$/.

gotcha The plugin only works with Rollup's JavaScript API. Using it with other bundlers like Webpack or esbuild will cause errors. ↓

fix Use the plugin exclusively in Rollup configuration.

gotcha The `output` option must be a relative path from the Rollup output directory. Absolute paths or paths outside the output directory may cause unexpected behavior. ↓

fix Specify a relative path like 'assets/files' or use path.resolve to ensure it is within the output directory.

Install

npm install rollup-plugin-import-file

yarn add rollup-plugin-import-file

pnpm add rollup-plugin-import-file

Imports

default (files)
wrong
```
const files = require('rollup-plugin-import-file')
```
correct
```
import files from 'rollup-plugin-import-file'
```
The package is ESM-only; CommonJS require will fail unless using dynamic import.
files
wrong
```
import { files } from 'rollup-plugin-import-file'
```
correct
```
import files from 'rollup-plugin-import-file'
```
The plugin is exported as default, not as a named export. Named import will be undefined.

PluginOptions

wrong

import { PluginOptions } from 'rollup-plugin-import-file'

correct

import type { PluginOptions } from 'rollup-plugin-import-file'

Type imports are available for TypeScript users but are not runtime values.

Quickstart

Configures Rollup to copy image imports to 'dist/assets' with content hashing, and demonstrates importing a PNG file.

// rollup.config.js
import files from 'rollup-plugin-import-file';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyBundle',
  },
  plugins: [
    files({
      output: 'dist/assets',
      extensions: /\.(png|jpg|gif|svg)$/i,
      hash: true,
    }),
  ],
};

// src/index.js
import logo from './logo.png';
console.log(logo); // Outputs: 'assets/logo-a1b2c3d4.png'