{"id":19178,"library":"babel-plugin-transform-assets-import-to-string","title":"babel-plugin-transform-assets-import-to-string","description":"Babel plugin that transforms asset imports and requires (e.g., images, SVGs) into CDN URL strings with content-based hashing. Version 2.0.0 is the current stable release, requiring Node.js 20+ and @babel/core ^7.20.0. It supports both ESM import and CommonJS require, configurable file extensions, hash length, output directory for copying assets, and path preservation. Differentiators include isomorphic/SSR focus, TypeScript typings, and simple setup without a module bundler. Release cadence is low; the plugin has had only a few updates since its initial 1.0.0 release.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/yeojz/babel-plugin-transform-assets-import-to-string","tags":["javascript","babel","babel-plugin","import","assets","cdn","images","isomorphic","server-side-rendering","typescript"],"install":[{"cmd":"npm install babel-plugin-transform-assets-import-to-string","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-assets-import-to-string","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-assets-import-to-string","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for Babel plugin functionality","package":"@babel/core","optional":false}],"imports":[{"note":"Package ships as default export; named imports not supported. CommonJS require works but ESM recommended.","wrong":"const plugin = require('babel-plugin-transform-assets-import-to-string')","symbol":"plugin","correct":"import plugin from 'babel-plugin-transform-assets-import-to-string'"},{"note":"For TypeScript type import; use `import type` syntax to avoid runtime inclusion.","wrong":"import { BabelPluginOptions } from 'babel-plugin-transform-assets-import-to-string'","symbol":"BabelPluginOptions","correct":"import type { BabelPluginOptions } from 'babel-plugin-transform-assets-import-to-string'"},{"note":"When renaming the default import, simply assign a new name. Do not use `.default` with CommonJS.","wrong":"const assetsToCDN = require('babel-plugin-transform-assets-import-to-string').default","symbol":"plugin as assetsToCDN","correct":"import assetsToCDN from 'babel-plugin-transform-assets-import-to-string'"}],"quickstart":{"code":"// .babelrc\n{\n  \"plugins\": [\n    [\n      \"transform-assets-import-to-string\",\n      {\n        \"baseUri\": \"https://cdn.example.com/assets\",\n        \"extensions\": [\".svg\", \".png\"],\n        \"hashLength\": 8\n      }\n    ]\n  ]\n}\n\n// Input source file\nimport logo from './images/logo.svg';\nimport icon from './icons/icon.png';\nconst bg = require('./assets/bg.jpg');\n\n// Transformed output:\n// const logo = 'https://cdn.example.com/assets/logo.a1b2c3d4.svg';\n// const icon = 'https://cdn.example.com/assets/icon.e5f6g7h8.png';\n// const bg = 'https://cdn.example.com/assets/bg.jpg'; (no hash if hashLength=0)\n","lang":"typescript","description":"Demonstrates basic usage with .babelrc configuration, transforming both ES import and CommonJS require to CDN URLs with content-hashed filenames."},"warnings":[{"fix":"Upgrade Node.js to 20 or later, or pin to v1.0.1 if Node <20 is needed.","message":"Node.js >=20 required since v2.0.0; older versions incompatible.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Update @babel/core to ^7.20.0 or later.","message":"@babel/core peer dependency changed from ^7.0.0 to ^7.20.0 in v2.0.0.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Explicitly specify `extensions` option if relying on defaults.","message":"Default extensions list changed between v1 and v2? Unclear; check plugin documentation for current defaults.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Always provide `baseUri` unless you intentionally want local relative paths.","message":"Missing `baseUri` option results in transformed paths without a prefix (just filenames with hashes).","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure `outputDir` is set and Babel runs as part of build process if asset copying is needed.","message":"File copying with `outputDir` only works during Babel transformation (e.g., build step), not at runtime.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install babel-plugin-transform-assets-import-to-string --save-dev`","cause":"Plugin not installed as devDependency.","error":"Cannot find module 'babel-plugin-transform-assets-import-to-string'"},{"fix":"Ensure @babel/core is ^7.20.0 and plugin is imported correctly (as default).","cause":"Using an outdated Babel version that doesn't support default exports from plugins? Or invalid plugin config.","error":"Plugin/Preset files are not allowed to export objects, only functions."},{"fix":"Add `\"baseUri\": \"https://mycdn.com/assets\"` to plugin options.","cause":"Missing required option (though optional technically, likely a configuration oversight).","error":"baseUri option is missing or empty; paths will not be prefixed"},{"fix":"Create the output directory or ensure write permissions. Use absolute paths or adjust relative path.","cause":"outputDir specified but directory does not exist or is not writable.","error":"Error: ENOENT: no such file or directory, copyfile '...' -> '...'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}