{"id":19111,"library":"babel-plugin-named-asset-import","title":"babel-plugin-named-asset-import","description":"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.","status":"active","version":"0.3.8","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/create-react-app","tags":["javascript"],"install":[{"cmd":"npm install babel-plugin-named-asset-import","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-named-asset-import","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-named-asset-import","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for Babel plugin execution","package":"@babel/core","optional":false}],"imports":[{"note":"CommonJS only; this plugin is not an ESM package.","wrong":"import plugin from 'babel-plugin-named-asset-import'","symbol":"default","correct":"module.exports = require('babel-plugin-named-asset-import')"},{"note":"Named import of SVG as React component works only inside CRA projects with this plugin.","wrong":"const { ReactComponent } = require('./logo.svg')","symbol":"ReactComponent","correct":"import { ReactComponent } from './logo.svg'"},{"note":"Custom query params like ?as=svg are supported but not documented; may break without proper CRA version.","wrong":"import { large } from './logo.svg'","symbol":"any named export from asset","correct":"import { large } from './logo.svg?as=svg'"}],"quickstart":{"code":"// This plugin is automatically included in CRA's react-scripts\n// You don't need to install it separately.\n// To use it outside CRA, add to .babelrc:\n{\n  \"plugins\": [\n    [\"babel-plugin-named-asset-import\", {\n      \"loaderMap\": {\n        \"svg\": {\n          \"ReactComponent\": \"@svgr/webpack?-svgo,+titleProp,+ref![path]\"\n        }\n      }\n    }]\n  ]\n}\n\n// Then in your code:\nimport { ReactComponent } from './logo.svg';\nconst element = <ReactComponent />;\n\n// Or import a specific size variant:\nimport { large } from './logo.svg?as=svg';\nconsole.log(large); // string path to asset","lang":"javascript","description":"Shows basic usage with options configuration and custom loaderMap for SVG imports."},"warnings":[{"fix":"Use 'react-scripts@^4.0.0' or configure SVGR manually with webpack.","message":"Removed from react-scripts v5.0.0: CRA no longer uses this plugin. SVG imports now default to @svgr/webpack directly.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Use directly: @svgr/webpack for SVG components, asset modules for other files.","message":"Package is deprecated by CRA team; no new features planned.","severity":"deprecated","affected_versions":"all"},{"fix":"Ensure you use CRA's default webpack config or replicate loaderMap exactly.","message":"Requires exact webpack loader configuration from CRA; custom loaders may break named imports.","severity":"gotcha","affected_versions":"all"},{"fix":"Stick to 'ReactComponent' import or check CRA source code for supported queries.","message":"Named imports other than 'ReactComponent' (e.g., 'large') depend on query parameters (?as=svg) which are not officially documented.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install --save-dev babel-plugin-named-asset-import","cause":"Plugin not installed or not in node_modules","error":"Cannot find module 'babel-plugin-named-asset-import'"},{"fix":"Add the plugin to .babelrc and ensure webpack has appropriate rules (e.g., @svgr/webpack).","cause":"Webpack not configured to handle SVG imports with this plugin","error":"Module parse failed: Unexpected token (1:0) for ./logo.svg"},{"fix":"Check Babel config includes the plugin with valid loaderMap for svg.","cause":"Plugin not active or misconfigured, imports not transformed","error":"'ReactComponent' is not exported from './logo.svg'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}