babel-plugin-named-asset-import

0.3.8 verified Sat Apr 25 auth: no javascript

Babel plugin for Create React App that enables named imports from non-JS assets like images, SVGs, and CSS modules. Current stable version is 0.3.8. Ships as part of react-scripts, so its release cadence matches CRA major versions. It transforms named import specifiers (e.g., { ReactComponent } from 'logo.svg') into static asset paths, thus requiring CRA-specific webpack configuration to work. Unlike direct asset require() calls, this plugin allows tree-shaking friendly imports. Note: only compatible with @babel/core ^7.1.0.

Common errors

error Cannot find module 'babel-plugin-named-asset-import' ↓

cause Plugin not installed or not in node_modules

fix

npm install --save-dev babel-plugin-named-asset-import

error Module parse failed: Unexpected token (1:0) for ./logo.svg ↓

cause Webpack not configured to handle SVG imports with this plugin

fix

Add the plugin to .babelrc and ensure webpack has appropriate rules (e.g., @svgr/webpack).

error 'ReactComponent' is not exported from './logo.svg' ↓

cause Plugin not active or misconfigured, imports not transformed

fix

Check Babel config includes the plugin with valid loaderMap for svg.

Warnings

breaking Removed from react-scripts v5.0.0: CRA no longer uses this plugin. SVG imports now default to @svgr/webpack directly. ↓

fix Use 'react-scripts@^4.0.0' or configure SVGR manually with webpack.

deprecated Package is deprecated by CRA team; no new features planned. ↓

fix Use directly: @svgr/webpack for SVG components, asset modules for other files.

gotcha Requires exact webpack loader configuration from CRA; custom loaders may break named imports. ↓

fix Ensure you use CRA's default webpack config or replicate loaderMap exactly.

gotcha Named imports other than 'ReactComponent' (e.g., 'large') depend on query parameters (?as=svg) which are not officially documented. ↓

fix Stick to 'ReactComponent' import or check CRA source code for supported queries.

Install

npm install babel-plugin-named-asset-import

yarn add babel-plugin-named-asset-import

pnpm add babel-plugin-named-asset-import

Imports

default

wrong

import plugin from 'babel-plugin-named-asset-import'

correct

module.exports = require('babel-plugin-named-asset-import')

CommonJS only; this plugin is not an ESM package.

ReactComponent
wrong
```
const { ReactComponent } = require('./logo.svg')
```
correct
```
import { ReactComponent } from './logo.svg'
```
Named import of SVG as React component works only inside CRA projects with this plugin.
any named export from asset
wrong
```
import { large } from './logo.svg'
```
correct
```
import { large } from './logo.svg?as=svg'
```
Custom query params like ?as=svg are supported but not documented; may break without proper CRA version.

Quickstart

Shows basic usage with options configuration and custom loaderMap for SVG imports.

// This plugin is automatically included in CRA's react-scripts
// You don't need to install it separately.
// To use it outside CRA, add to .babelrc:
{
  "plugins": [
    ["babel-plugin-named-asset-import", {
      "loaderMap": {
        "svg": {
          "ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]"
        }
      }
    }]
  ]
}

// Then in your code:
import { ReactComponent } from './logo.svg';
const element = <ReactComponent />;

// Or import a specific size variant:
import { large } from './logo.svg?as=svg';
console.log(large); // string path to asset