Error parsing SVG with @wordpress/scripts

[grappler]

Describe the bug
When running wp-scripts build with the following code gives an error.

NonErrorEmittedError: (Emitted value instead of an instance of Error) Error in parsing SVG: Non-whitespace before first tag.

import starUrl, { ReactComponent as Star } from './star.svg'
const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)

To reproduce
Steps to reproduce the behavior:

1. import a SVG file using the above example as a template
2. run the build task from wp-scripts
3. See error

Expected behavior
The build process to complete successfully

Versions

• Using @wordpress/scripts version 7.0.1

Related Gutenberg issue: #14628
Introduced in: #18243

Related slack discussion: https://wordpress.slack.com/archives/C5UNMSU4R/p1580939781306900

Reason for bug: Incompatibility between @svgr/webpack:4.3.3 and url-loader:3.0.0 which was fixed in @svgr/webpack:5.0.0 as documented in gregberge/svgr#367.

The proposed solution is to update @svgr/webpack to version 5.0 or greater.

[gziolo]

The patch is ready #20916.