Registry / devops / babel-plugin-file-loader

babel-plugin-file-loader

library2.0.0jsnpmunverified

A Babel plugin that works like Webpack's file-loader for server-side rendering (SSR) apps. It processes import/require statements for image files, copies them to an output directory, and replaces the source with a public URL. The current stable version is 2.0.0, which upgrades to Babel 7. It supports configurable naming patterns with hashing, custom public paths, output paths, and extensions. This plugin is maintained by sheerun and has 95% test coverage. Key differentiators: it does not require Webpack, works with any Node.js build pipeline, and is specifically designed for isomorphic/SSR apps where Webpack's file-loader cannot run.

devops http-networking

npm install babel-plugin-file-loader

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-FILE-

babel-plugin-file-loader

devopsjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import img from './file.png'

✗ const img = require('./file.png')

Both import and require work; require is still supported but import is preferred for ES modules.

babel-plugin-file-loader

✓ "plugins": ["file-loader"]

✗ "plugins": [["babel-plugin-file-loader", {}]]

The plugin is named 'file-loader' in .babelrc, not the full package name. Version 2.x only works with Babel 7.

with options

✓ "plugins": [["file-loader", { "publicPath": "/static", "limit": 10000 }]]

✗ "plugins": ["file-loader", { "publicPath": "/static" }]

Options must be in a nested array: [plugin, options]. A common mistake is to put options in the root plugins array.

Configure babel-plugin-file-loader in .babelrc and use import to get a public URL for an image asset.

// .babelrc { "plugins": [ [ "file-loader", { "name": "[hash].[ext]", "extensions": ["png", "jpg", "jpeg", "gif", "svg"], "publicPath": "/public", "outputPath": "/public", "context": "", "limit": 0 } ] ] } // app.js import myImage from './image.png'; console.log(myImage); // "/public/0dcbbaa7013869e351f.png"

Debug

Known issues

breakingVersion 2.0.0 drops support for Babel 6; only Babel 7+ is supported.

fix

Upgrade to Babel 7 and ensure @babel/core is installed.

affects: >=2.0.0

gotchaThe plugin does not work in browser builds; it only runs during Babel compilation (server-side/SSR).

fix

Use Webpack's file-loader or url-loader for client-side bundling; this plugin is for Node.js/SSR environments.

affects: >=1.0.0

gotchaIf outputPath is set to null, the file is not copied to disk; only the import is replaced with a public URL.

fix

If you need the file to exist on disk, do not set outputPath to null.

affects: >=1.1.0

gotchaThe placeholder [ext] includes the dot (e.g., '.png'); the plugin adds a dot automatically, so do not include a dot in patterns.

fix

Use '[hash].[ext]' not '[hash].png'.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'file-loader'

Missing babel-plugin-file-loader package or incorrect plugin name in .babelrc.

fix

Install the package: npm install babel-plugin-file-loader --save-dev. Ensure .babelrc uses "file-loader" (not "babel-plugin-file-loader") in the plugins array.

TypeError: (0 , _plugin.default) is not a function

Using Babel 6 with plugin version 2.x, which is incompatible.

fix

Upgrade to Babel 7 and @babel/core, or downgrade the plugin to version 1.x.

Unexpected token, expected ";" when using import for image

Babel is not configured to parse import statements for non-JS files (the plugin is missing).

fix

Add 'file-loader' to .babelrc plugins and ensure the extensions list includes the file type.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

@babel/corerequiredPeer dependency for Babel 7 plugin system

Agent activity

16 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/sheerun/babel-plugin-file-loader ↗

packagehttps://www.npmjs.com/package/babel-plugin-file-loader ↗