Registry / web-framework / babel-plugin-inline-import-data-uri

babel-plugin-inline-import-data-uri

library1.0.1jsnpmunverified

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.

web-framework

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

package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-INLIN

babel-plugin-inline-import-data-uri

web-frameworkjavascriptv1.0.1

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.

plugin (default)

✓ { "plugins": ["inline-import-data-uri"] }

✗ { "plugins": [["babel-plugin-inline-import-data-uri", {}]] }

Plugin name in .babelrc must omit 'babel-plugin-' prefix. Options are passed inside array.

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,...)'

Debug

Known issues

gotchaOnly 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'.

affects: >=1.0.0

gotchaInlined 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.

affects: >=1.0.0

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

fix

Use static import syntax only.

affects: >=1.0.0

deprecatedPackage 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.

affects: >=1.0.1

Errors

Common errors & fixes

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

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: Cannot find module 'inline-import-data-uri'

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.

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

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.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/babel-plugin-inline-import-data-uri ↗