Registry / http-networking / babel-plugin-named-asset-import

babel-plugin-named-asset-import

library0.3.8jsnpmunverified

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.

http-networking serialization

npm install babel-plugin-named-asset-import

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-NAMED

babel-plugin-named-asset-import

http-networkingjavascriptv0.3.8

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.

default

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

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

CommonJS only; this plugin is not an ESM package.

ReactComponent

✓ import { ReactComponent } from './logo.svg'

✗ const { ReactComponent } = require('./logo.svg')

Named import of SVG as React component works only inside CRA projects with this plugin.

any named export from asset

✓ import { large } from './logo.svg?as=svg'

✗ import { large } from './logo.svg'

Custom query params like ?as=svg are supported but not documented; may break without proper CRA version.

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

Debug

Known issues

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

affects: >=5.0.0

deprecatedPackage is deprecated by CRA team; no new features planned.

fix

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

affects: all

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

affects: all

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

affects: all

Errors

Common errors & fixes

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

Plugin not installed or not in node_modules

fix

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

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

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

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

Plugin not active or misconfigured, imports not transformed

fix

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

Upgrade

Version history

0.3.8latest on npm

Audit

Dependencies

@babel/corerequiredPeer dependency required for Babel plugin execution

Agent activity

17 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/facebook/create-react-app ↗

packagehttps://www.npmjs.com/package/babel-plugin-named-asset-import ↗

homepagehttps://create-react-app.dev/ ↗