{"id":19081,"library":"babel-plugin-inline-import-data-uri","title":"babel-plugin-inline-import-data-uri","description":"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.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","babel-plugin","svg","png","base64","import","inline"],"install":[{"cmd":"npm install babel-plugin-inline-import-data-uri","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-inline-import-data-uri","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-inline-import-data-uri","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Plugin name in .babelrc must omit 'babel-plugin-' prefix. Options are passed inside array.","wrong":"{\n  \"plugins\": [[\"babel-plugin-inline-import-data-uri\", {}]]\n}","symbol":"plugin (default)","correct":"{\n  \"plugins\": [\"inline-import-data-uri\"]\n}"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\"inline-import-data-uri\"]\n}\n\n// source.js\nimport logo from './logo.svg';\nimport background from './background.png';\n\nconsole.log(logo); // 'data:image/svg+xml;base64,...'\nconsole.log(`url(${background})`); // 'url(data:image/png;base64,...)'","lang":"javascript","description":"Configures Babel to inline .svg and .png imports as base64 Data URIs."},"warnings":[{"fix":"Use import default syntax: import variable from './file.svg'.","message":"Only supports default imports (import logo from './file.svg'). Named or namespace imports (import {something} from '...') will not work.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Keep files small or use a bundler loader (e.g., Webpack file-loader) for larger assets.","message":"Inlined files become part of the bundle – large files will bloat output. No size limit or warning.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use static import syntax only.","message":"Plugin does not work with dynamic imports (import()) or require() calls. Only static import declarations.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Check compatibility with Babel 7+ or consider alternatives like babel-plugin-inline-import or Webpack loaders.","message":"Package has not been updated since 2018; may not work with Babel 7+ without adjustments. Dependencies (babel-core) are outdated.","severity":"deprecated","affected_versions":">=1.0.1"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use CommonJS config file (.babelrc.js or babel.config.js) or dynamic import in .mjs config.","cause":"Plugin uses require() internally but is loaded in an ESM Babel config (e.g., babel.config.mjs).","error":"ReferenceError: require is not defined (when using in ES module context)"},{"fix":"Run 'npm install --save-dev babel-plugin-inline-import-data-uri' and use 'inline-import-data-uri' in plugins array.","cause":"Plugin installed as devDependency but not listed in .babelrc correctly (e.g., missing npm install).","error":"Error: Cannot find module 'inline-import-data-uri'"},{"fix":"Ensure you use Babel 6 compatible version (1.0.1) or upgrade plugin.","cause":"Using the plugin with an older or incompatible version of Babel (e.g., babel-core 6 vs 7).","error":"TypeError: (0 , _path(...).default) is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}