babel-plugin-inline-import-data-uri

1.0.1 verified Sat Apr 25 auth: no javascript

Babel plugin that enables importing files as base64-encoded Data URIs. Version 1.0.1 (released ~2018) is the latest stable version, with no frequent releases. It hooks into Babel's transform step to replace import statements for supported extensions (default: .svg, .png) with the file content as a data URI string. Differentiators vs alternatives (e.g., Webpack's url-loader, babel-plugin-inline-import): it focuses purely on Babel transforms without bundler dependency, and outputs only Data URIs (not raw text or base64 blobs). Requires Babel 6+ and Node.js. Limited to small files due to inlining.

Common errors

error ReferenceError: require is not defined (when using in ES module context) ↓

cause Plugin uses require() internally but is loaded in an ESM Babel config (e.g., babel.config.mjs).

fix

Use CommonJS config file (.babelrc.js or babel.config.js) or dynamic import in .mjs config.

error Error: Cannot find module 'inline-import-data-uri' ↓

cause Plugin installed as devDependency but not listed in .babelrc correctly (e.g., missing npm install).

fix

Run 'npm install --save-dev babel-plugin-inline-import-data-uri' and use 'inline-import-data-uri' in plugins array.

error TypeError: (0 , _path(...).default) is not a function ↓

cause Using the plugin with an older or incompatible version of Babel (e.g., babel-core 6 vs 7).

fix

Ensure you use Babel 6 compatible version (1.0.1) or upgrade plugin.

Warnings

gotcha Only supports default imports (import logo from './file.svg'). Named or namespace imports (import {something} from '...') will not work. ↓

fix Use import default syntax: import variable from './file.svg'.

gotcha Inlined files become part of the bundle – large files will bloat output. No size limit or warning. ↓

fix Keep files small or use a bundler loader (e.g., Webpack file-loader) for larger assets.

gotcha Plugin does not work with dynamic imports (import()) or require() calls. Only static import declarations. ↓

fix Use static import syntax only.

deprecated Package has not been updated since 2018; may not work with Babel 7+ without adjustments. Dependencies (babel-core) are outdated. ↓

fix Check compatibility with Babel 7+ or consider alternatives like babel-plugin-inline-import or Webpack loaders.

Install

npm install babel-plugin-inline-import-data-uri

yarn add babel-plugin-inline-import-data-uri

pnpm add babel-plugin-inline-import-data-uri

Imports

plugin (default)
wrong
```
{
  "plugins": [["babel-plugin-inline-import-data-uri", {}]]
}
```
correct
```
{
  "plugins": ["inline-import-data-uri"]
}
```
Plugin name in .babelrc must omit 'babel-plugin-' prefix. Options are passed inside array.

Quickstart

Configures Babel to inline .svg and .png imports as base64 Data URIs.

// .babelrc
{
  "plugins": ["inline-import-data-uri"]
}

// source.js
import logo from './logo.svg';
import background from './background.png';

console.log(logo); // 'data:image/svg+xml;base64,...'
console.log(`url(${background})`); // 'url(data:image/png;base64,...)'