babel-plugin-transform-assets

1.0.2 verified Sat Apr 25 auth: no javascript maintenance

A Babel plugin (v1.0.2, stable) that compiles asset imports (e.g., .txt, .svg) at compile time, replacing them with hashed filenames. Eliminates the need for Webpack in universal server-side code, providing a lightweight alternative to file-loader/url-loader. Works with Babel 6+. Last updated in 2017; not actively maintained.

Common errors

error The plugin was not found. Check the plugins option. ↓

cause Missing or incorrect plugin name in Babel config.

fix

Ensure 'babel-plugin-transform-assets' is installed and listed in plugins array.

error Cannot find module 'babel-plugin-transform-assets' ↓

cause Plugin not installed or node_modules missing.

fix

Run: npm install babel-plugin-transform-assets

error SyntaxError: Unexpected token (1:20) when importing a file ↓

cause Plugin not configured to handle that file extension.

fix

Add the extension to the 'extensions' array in plugin options.

Warnings

deprecated The package is no longer actively maintained; last update 2017. ↓

fix Consider using babel-plugin-assets or inline assets via Webpack/Metro bundler for modern projects.

breaking Plugin only works with Babel 6; not compatible with Babel 7+. ↓

fix Use Babel 6 or fork/update the plugin for Babel 7 compatibility.

gotcha The plugin transforms import/require statements at compile time, so dynamic imports (e.g., import()) are not supported. ↓

fix Use static import statements only; for dynamic assets, consider Webpack's file-loader.

Install

npm install babel-plugin-transform-assets

yarn add babel-plugin-transform-assets

pnpm add babel-plugin-transform-assets

Imports

default plugin

wrong

const plugin = require('babel-plugin-transform-assets').default

correct

import plugin from 'babel-plugin-transform-assets'

The plugin is a default export; use default import in ESM.

Babel config object

wrong

plugins: ['babel-plugin-transform-assets']

correct

plugins: [['babel-plugin-transform-assets', { extensions: ['svg'], name: '[name].[ext]?[hash]' }]]

Plugin typically requires options; omitting options may cause unexpected behavior.

Quickstart

Configures the plugin with file extensions and hashing pattern; shows the transformation of an SVG import.

// .babelrc
{
  "plugins": [
    ["babel-plugin-transform-assets", {
      "extensions": ["svg", "png", "jpg"],
      "name": "[name].[ext]?[sha512:hash:base64:7]"
    }]
  ]
}

// Input:
import file from './file.svg';
// Output:
var file = 'file.svg?abc1234';