Search code examples
reactjswebpackbabeljs

what does babel-plugin-named-asset-import do

Ok I've looked everywhere and there is no documentation on this Babel module --babel-plugin-named-asset-import

can someone please explain what it is for and how it works.

Solution

  • Looks like its purpose is to import named exports from non JS/CSS assets. Currently, within the CRA, it appears to only be implemented for svg assets. The goal is to offer another way to import SVGs as React components versus the standard import as a url that needs to be applied to an img element.

    Without plugin (default import)

    import * as React from 'react';
import logo from './logo.png'; // import file as a url

function Header() {
  return <img src={logo} alt="logo" />;
}

export default Header;

    With plugin (named import)

    import * as React from 'react';
import { ReactComponent as Logo } from './logo.svg'; // import file as a React component

function Header() {
  return <Logo />;
}

export default Header;

    Update

    Going deeper, it appears that the plugin aids in importing svg files in the following ways:

    import logo from "logo.svg"; // default import
import { logoUrl } from "logo.svg"; // named import
import { ReactComponent as Logo } from "@svgr/webpack?-svgo!logo.svg"; // ReactComponent import

    The CRA specifically targets svg file formats as shown in their test suites. As to whether or not it supports other non-js files, not likely (especially since the babel plugin is only utilized once in the CRA webpack config).

    As mentioned in the svgr docs:

    SVGR can be used as a webpack loader, this way you can import your SVG directly as a React Component.

    This particular plugin aims to import any svg file as the default export.

    Please note that by default, @svgr/webpack will try to export the React Component via default export if there is no other loader handling svg files with default export.

    Whereas the CRA appears to utilize file/url loader for the default/named exports and specifically maps a ReactComponent named export to the svgr webpack plugin.