CRA4 build error

[waynebrantley]

Existing working typescript based CRA 3.4.x application.

Upgrade to 4.0.0.next.98 react-scripts

when building it gives an error of:

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

This happens locally and on a clean build server.

[vonkanehoffen]

I'm also seeing this on 4.0.0

The same SVG loads fine with

import { ReactComponent as HomeIcon } from "./home.svg";

when I test with a newly created, vanilla CRA though, so I guess it must be something to do with another dependency I have in my main project

[waynebrantley]

With the 4.0.0 release, I experienced this too at first..but through hook and crook, removing node_modules folders, using yarn, etc - eventually it went away. So definitely will work and is related to other module issues.

[fsp]

The following fixed it for me:

npm install @svgr/webpack --save-dev

[aqumus]

I faced similar issue upgrading from CRA v3.4.3 to v4.0.3 where importing svg in component as

import { ReactComponent as SmileyIcon } from './smiley.svg'

was throwing error
ReactComponent is not exported from @svgr/webpack

Looks like I also had other dependencies which were pulling old version of @svgr/webpack (v2.2.0),
Added resolutions to the root monorepo package.json to make sure there's single version of @svgr/webpack (v5.5.0)

// root package.json

  "resolutions": {
    "**/@svgr/webpack": "^5.5.0"
  },

or could follow @fsp suggestion stated above

The following fixed it for me:
npm install @svgr/webpack --save-dev