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.

[alexander-akait]

@markusdanek no one here closed the problem, problem in this package and should be fixed here

Cannot read property 'tagName' of null #362
Open	markusdanek opened this issue 2 hours ago · 1 comment

Look on the open label in top of the issue

[ghost]

@evilebottnawi Sorry I mistook the label with the other issue and saw also your comment that file-loader is using this package and that ESModule breaks it.

[gregberge]

Relative to #367, will be fixed in v5.

[nos-nart]

@gregberge after installing the latest @svgr/webpack version ("@svgr/webpack": "^5.0.1"). I still got the same problem #374

./src/assets/images/404.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/assets/images/404.svg)
TypeError: Cannot read property 'tagName' of null

[GeorgeCr]

I had the same issue when I tried to rebase and got some new changes in package.json. I ran npm install again, and after downloading some packages, I no longer had this issue.

[erikmartinjordan]

I experienced this issue and detected a semicolon (;) at the end of the svg file. Deleting the semicolon solved it.

[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';

[cparthiv]

Still facing this issue.

Starting the development server...
Failed to compile.

./src/pages/down-scroll.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/pages/down-scroll.svg)
TypeError: Cannot read property 'tagName' of null
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Compiling...
Failed to compile.

./src/pages/down-scroll.svg (./node_modules/@svgr/webpack/lib?-svgo,+titleProp,+ref!./src/pages/down-scroll.svg)
TypeError: Cannot read property 'tagName' of null
Error from chokidar (C:\node_modules): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\node_modules): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\node_modules): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

Any fixes?

[cparthiv]

I tried deleting the node modules folder, and tried to use yarn instead... Didn't work.. I also moved the JS files to the directory with the icons.
What's going on?

[zhiyingzzhou]

try this:
import { default as CloseSvg } from '@/assets/svg/bak/close.svg';
works for me

[kennycrosby]

I'm getting this after updating react scripts from ^3.4.2 to ^4.0.3. Adding an svg just as the docs say:
import { ReactComponent as LogoIcon } from './assets/logo.svg';