SVG TypeError: Cannot read property 'tagName' of null

[ghost]

• Operating System: macOS
• Node Version: 10.16.0
• NPM Version: 6.12.0
• webpack Version: 4.41.2
• file-loader Version: 5.0.2

Expected Behavior

Load SVG icon in JSX.

Actual Behavior

./src/icons/Icon_Pay.svg (./node_modules/@svgr/webpack/lib?-svgo!./src/icons/Pay.svg) TypeError: Cannot read property 'tagName' of null

Code

// webpack.config.js
{
  loader: require.resolve('file-loader'),
  exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
  },
},
// ...
// ...
plugins: [
    [
        require.resolve('babel-plugin-named-asset-import'),
        {
            loaderMap: {
                svg: {
                    ReactComponent: '@svgr/webpack?-svgo![path]',
                },
            },
        },
    ],
],

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102.86 100"><defs><style>.cls-1{fill:#322d2c;fill-rule:evenodd;}</style></defs><title>Asset 6</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M97.1,44.21a4.83,4.83,0,0,0,0-7L79.15,19.81,29.57,68a2.19,2.19,0,0,1-3,0,2,2,0,0,1,0-3l49.58-48.2L64.53,5.6a5.17,5.17,0,0,0-7.14,0L5.76,55.79a4.84,4.84,0,0,0,0,7l2.5,2.43L57.84,17a2.19,2.19,0,0,1,3,0,2,2,0,0,1,0,2.95L11.29,68.12l27,26.28a5.06,5.06,0,0,0,3.56,1.43h0a5.06,5.06,0,0,0,3.56-1.43L97.1,44.21Zm3-9.89a8.9,8.9,0,0,1,0,12.83L50.06,95.83h22.8a2.09,2.09,0,1,1,0,4.17H30a2.09,2.09,0,1,1,0-4.17h3.74l-27-26.24h0l-4-3.91a8.91,8.91,0,0,1,0-12.84L54.35,2.65a9.56,9.56,0,0,1,13.21,0l32.57,31.67ZM51.94,59.22a2.55,2.55,0,0,1-.21,3.27L34.63,79.64a1.91,1.91,0,0,1-1.47.58,1.89,1.89,0,0,1-1.39-.77A2.56,2.56,0,0,1,32,76.18L49.08,59a1.85,1.85,0,0,1,2.86.19Zm-7.1,15.71A2.18,2.18,0,1,1,47.93,78l-7,7A2.19,2.19,0,1,1,37.78,82l7.06-7Zm8.28-5.67a2.35,2.35,0,1,1,3.33,3.33l-1,1a2.35,2.35,0,1,1-3.33-3.33l1-1ZM77,46.1l6.23-6.23-3.12-3.12L73.9,43,77,46.1Zm4.67-14,6.24,6.24a2.21,2.21,0,0,1,0,3.12l-9.35,9.35a2.23,2.23,0,0,1-1.56.65,2.2,2.2,0,0,1-1.56-.65l-6.24-6.24a2.19,2.19,0,0,1,0-3.11l9.36-9.36a2.21,2.21,0,0,1,3.11,0ZM65.22,17.14a2.36,2.36,0,0,1-1.67-4l1-1a2.35,2.35,0,1,1,3.33,3.33l-1,1a2.34,2.34,0,0,1-1.66.69Zm-43.53,55A2.35,2.35,0,1,1,25,75.45l-1,1a2.38,2.38,0,0,1-1.67.69,2.36,2.36,0,0,1-1.67-4l1-1Z"/></g></g></svg>

import React from 'react';
import { ReactComponent as PaymentAggregation } from './Icon_PaymentAggregation.svg';
export default {
    PaymentAggregation
};

How Do We Reproduce?

After updating file-loader from v4.2.0 to v5.0.2 I am getting this error.

[pcjmfranken]

Can confirm same issue happening here after upgrading file-loader from v4.2.0 to v5.0.2.

[alexander-akait]

Duplicate of gregberge/svgr#362

[ghost]

Why is this issue closed @evilebottnawi?
Checking yarn.lock does not show any information that it is using gregberge/svgr#362.
As I can only change the version of file-loader to resolve this problem, I think it should be handled here too.

[alexander-akait]

@markusdanek do you read changelog? we switch on ES modules so some other non official loaders can buggy, we can't solve this on our side, look in you stack trace in error:

/node_modules/@svgr/webpack/lib?-svgo!./src/icons/Pay.svg

You can see what problem in @svgr/webpack package

[ghost]

Yes I read the changelog and saw the breaking change with ESModule.
It still was not clear to me that this also affects other packages that file-loader is using.

[alexander-akait]

@markusdanek yes it can affect, potential buggy place https://github.com/smooth-code/svgr/blob/master/packages/webpack/src/index.js#L34

[alexander-akait]

@markusdanek you can fix it using esModule: false, but you build size will be increased because it is do impossible concatenated modules

[ramsunvtech]

Faced the same issue, resolved it by adding individual export entries in image directory like below.

/Icons
  success.svg
  error.svg
  info.svg

Actual Issue

It's been imported as direct svg file as ReactComponent like below.

import { ReactComponent as PaymentAggregation } from './Icons/success.svg';

Fix

Step 1: Added index.js to Icons directory.

/Icons
  index.js
  success.svg
  error.svg
  info.svg

Step 2: Exported as individual file in index.js

export { default as SuccessIcon } from './success.svg';
export { default as ErrorIcon } from './error.svg';
export { default as InfoIcon } from './info.svg';

Final Step 3: call them as component

import { SuccessIcon } from './Icons';