image-loader-next

0.1.2 verified Mon Apr 27 auth: no javascript

A package that allows loading image files (PNG, SVG, JPG, JPEG, GIF, WebP, AVIF, ICO, BMP) in Node.js, Rollup, Vite, or Vitest the same way as Next.js. Current stable version is 0.1.2. It provides a Rollup plugin and a Node.js loader. The generated modules expose src, width, height, and a default export. Compatible with Node.js 22+. Key differentiator: it mimics Next.js image handling in non-Next.js environments, enabling consistent image imports across tools.

Common errors

error Error: Cannot find module 'image-loader-next/node' ↓

cause Package not installed or wrong import path.

fix

Install the package: npm install image-loader-next. Use correct subpath: 'image-loader-next/node'.

error TypeError: nextImages is not a function ↓

cause Incorrect import (e.g., default instead of named import).

fix

Use: import { nextImages } from 'image-loader-next/rollup'

error Error: The --experimental-loader flag is required for Node.js loaders. ↓

cause Using Node.js version <22 or not using --loader correctly.

fix

Upgrade to Node.js 22+ and use node --loader image-loader-next or call register() programmatically.

Warnings

breaking Node.js 22+ required; older versions not supported. ↓

fix Upgrade Node.js to version 22 or higher.

gotcha Default export is an object with src, width, height — not a string. ↓

fix Access .src for the URL string: import img from './img.png' console.log(img.src, img.width, img.height)

gotcha Plugin uses Rollup include/exclude filters; Vite config integration requires correct import path. ↓

fix Ensure import { nextImages } from 'image-loader-next/rollup' and not from 'image-loader-next'.

gotcha Node.js loader must be registered before importing images; order matters with other loaders. ↓

fix Register the loader early in your entry file (e.g., at the top of the main module).

Install

npm install image-loader-next

yarn add image-loader-next

pnpm add image-loader-next

Imports

nextImages

wrong

import nextImages from 'image-loader-next/rollup'

correct

import { nextImages } from 'image-loader-next/rollup'

Named export from the rollup subpath.

register (Node.js loader)
```
register('image-loader-next/node', import.meta.url)
```
Use with node:module register function.
Node.js loader via --loader flag
```
node --loader image-loader-next
```

Quickstart

Shows Vite plugin setup and Node.js loader registration then image import usage.

// Vite config
import { nextImages } from 'image-loader-next/rollup'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [nextImages()]
})

// Usage in component
import logo from './logo.png'
console.log(logo.src, logo.width, logo.height)

// Node.js loader
import { register } from 'node:module'
register('image-loader-next/node', import.meta.url)
import logo from './logo.png'
console.log(logo.src, logo.width, logo.height)