SVGR import not working

[kevinfaveri]

SVG import is not working (import as a ReactComponent):

'ReactComponent' is not exported from ''../../../../assets/star.svg' (imported as 'Star').

SVGR is included by default in CRA 4.

import { ReactComponent as StarSvg } from '../../../../assets/star.svg'

Craco config as simple as:

// craco.config.js
const CracoEsbuildPlugin = require("craco-esbuild");

module.exports = {
  plugins: [{ plugin: CracoEsbuildPlugin }],
};

[pradel]

I don't think it's possible to make SVGR work with esbuild, in CRA they are able to detect this using a babel plugin, https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L437.

As a workaround, you can import SVG using an external file:

import logo from './logo.svg';

<img src={logo} className="App-logo" alt="logo" />

[rajadain]

There is an SVGR plugin for esbuild: https://github.com/kazijawad/esbuild-plugin-svgr. Is there a way we can use that?

This seems discouraging: privatenumber/esbuild-loader#98 but perhaps you know of a workaround?

[pradel]

This seems discouraging: privatenumber/esbuild-loader#98 but perhaps you know of a workaround?

It seems that it's not possible to use it no :(

As a workaround we could make svgr an opt-in option of this package, directly use the svgr webpack loader for all the svgs. It would remove the default behavior that is copying the svg into the public dist folder but it's fine as it would be under a flag.

[rajadain]

That would be awesome!

SVGR importing is enabled by default in CRA4. Looking at the source of craco-esbuild, I couldn't figure out at what point was that built-in support removed. Are these lines responsible for it:

create-react-app-esbuild/packages/craco-esbuild/src/index.js

Lines 36 to 37 in 9c2997d

	// remove the babel loaders
	removeLoaders(webpackConfig, loaderByName('babel-loader'));

?

[pradel]

Yes, CRA uses babel to see if importing the svg is a named import (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L442). As we are replacing babel with esbuild this call is removed.

[vviikk]

Checkout my PR. I believe it's working :) Used unshift to force svgr loader higher up the food chain.

[pradel]

Hey all this package now support svgr, you can enable it with the enableSvgr option.

// craco.config.js
const CracoEsbuildPlugin = require('craco-esbuild');

module.exports = {
  plugins: [
    {
      plugin: CracoEsbuildPlugin,
      options: {
        enableSvgr: true,
      },
    },
  ],
};

Thanks @vviikk for this 🙏

[benwiley4000]

Thanks this fixed my issue! Just to emphasize for anyone who gets stuck and finds this, you need to add enableSvgr: true for this to work. I wonder if it could be a good idea to enable it by default in a future release?