SVGR generates invalid react component

Describe the bug

I’ve just upgraded to react-scripts 5.0 but my simple import of a Logo svg fails with the error:

ERROR in ./src/components/layout/logo.svg
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

I wasn’t even planning to use the module and instead just use an img tag with the SVG as source (similar to what the sample application does).

Did you try recovering your dependencies?

This does not seem to be a dependency issue.

Which terms did you search for in User Guide?

I’ve tried to search for SVG, files as well as creating a new getting started to compare the projects. The only thing I can see is that the sample SVG is a lot simpler then the Logo I am trying to use.

Environment

Environment Info:

  current version of create-react-app: 5.0.0
  running from C:\Users\fkrauthan\AppData\Local\Yarn\Data\global\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
  Binaries:
    Node: 17.2.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.1.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.93
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.53)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 5.0.0 => 5.0.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Create a new react application
2. Replace the logo.svg with the content of a complex file (e.g. masthead.svg)
3. Try to run yarn run start or npm run start

Expected behavior

Ether a way that I can disable the component generation (in case I don’t need it) or a valid component that actually compiles with the react-scripts provided build setup/

Actual behavior

Code is not compiling as soon as I import the SVG with the error:

ERROR in ./src/components/layout/logo.svg
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

Reproducible demo

The setup to reproduce is pretty simple. See above for instructions. But here is a project as well test_app.zip

[stenzing]

same here, I would rather see a different fix than modifying all the svg-s after they get updated again ang again.

[damozhang]

I got same issue.

I used xmlnsXlink to replace xmlns:xlink, which works on some svg files. My final solution is that I minify svg files. You can try it on https://www.svgminify.com/ .