TypeError: Cannot read property 'tagName' of null

See original GitHub issue

I created React app by using npx create-react-app i then run npm run eject to add @svgr/webpack follow the docs i changed webpack.config.js file to

{
   test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
     use: [{
         loader: '@svgr/webpack',
           options: {
              limit: imageInlineSizeLimit,
              name: 'static/media/[name].[hash:8].[ext]',
             }
          },
     {
          loader: 'url-loader'
     }]
},

NotFoundPage component

import React from 'react';
import { ReactComponent as NotFound } from '../assets/images/404.svg';
/** @jsx jsx */ import { jsx, css } from '@emotion/core';

export default function PageNotFound() {
    return <div css={{
          width: '100vw',
          height: '100vh',
          overflow: 'auto',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
     }}>
         <NotFound/>;
    </div>
}

It was working perfectly at the time. Day after I back run the project again and the error is shown in the command

./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

Have anyone had encountered this problem? and how to fix it? Thanks in advance!

Issue Analytics

State:
Created 4 years ago
Reactions:9
Comments:18 (4 by maintainers)

Top GitHub Comments

3reactions

gregbergecommented, Mar 22, 2020

Outdated issue, I am sorry but it looks like it does not affect enough people to be solved. Please takes time to fix it by opening a PR if you are affected.

3reactions

bmuenzenmeyercommented, Jan 16, 2020

also encountering this.

From reading the file-loader release notes, adding this works for me in webpack config:

            {
              loader: require.resolve('file-loader'),
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
+               esModule: false,
              },
            },

file-loader@5.0.2 @svgr/webpack@5.0.1