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

Create a new react application
Replace the logo.svg with the content of a complex file (e.g. masthead.svg)
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

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

@damozhang

@damozhang I've tried using that but seems like that SVG file in particular still contains namespaces that trigger that error even after using that website to minify. And in general I shouldn't have todo that in first place. I feel like there is some configuration wrong/missing.

same here, I import a svg and use it as a source to img, started getting this error after trying to upgrade to cra 5.

Exactly same issue here

Same here.

Same

Same here

I imagine this probably ultimately caused by the problem with regular import described in #11770 rather than SVGR specifically.

I find a similar issue on stackoverflow
I didn't minify my svg file but in my case, i changed xmlns:bx to xmlnsBx and bx:shape to bxShape into my svg code file.
Now, it works for me

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

Has anyone found a fix/workaround for this issue yet?

Has anyone found a fix/workaround for this issue yet?

it would be good to have some feedback from the team, it's been more than 3 months and no idea if there is some working on it, it still has the "needs triage" tag.

@fkrauthan

@fkrauthan and everyone else here, i too got this error but then found my SVG file was corrupted after setting up eslint, found there was one semicolon that got added in SVG file content. After removing it, the error got resolved.

My file is definitely not corrupted as it works fine in inkscape and online tools. Plus the older version can without any issues display it.

Hi everybody. I have same problem . after search and debug i use this method and my problem solved :
I convert my svg file to png and reconvert from png to svg and upgrade react-scripts to 5.0.1 ( react project )

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

This worked for me thankyou for providing neccessary resource links.

use xmlnsSvg instead of xmlns:svg in the svg file.

Converting your jpg or png file to SVG would solve this problem.

@fkrauthan

@fkrauthan and everyone else here, i too got this error but then found my SVG file was corrupted after setting up eslint, found there was one semicolon that got added in SVG file content. After removing it, the error got resolved.

thanks. this helped me

Converting your jpg or png file to SVG would solve this problem.

Yeah but kinda defeats the purpose of using SVG in first place.

I also don't think its some illegal character as SVG programs can show it. And re-exporting through Inkscape yielded the same result.

Same with me here, I upgraded react scripts from 4.0.3 to 5.0.0 and am getting the same error. Please let me know if any workarounds

still no solution?

Same with me here, I upgraded react scripts from 4.0.3 to 5.0.0 and am getting the same error. Please let me know if any workarounds

My working solution:
Previous I was using some svg's that were taken from AdobeXD, I noticed that I was getting this error only for these type of SVG's. So I manually converted those SVG's using figmaXD to other SVG's type. The error was gone.
Not sure this would work for everyone. But it can help few people like me

use xmlnsSvg instead of xmlns:svg in the svg file.

Thanks. This worked for me.

I use Inkscape to export my SVGs (yes, exporting them as "Plain SVG" and not "Inkscape SVG" as format) and they kept returning this error whenever I tried importing them like so:

import Test from "../../assets/test.svg?react";

export function TestApp() {
  return <div>ok<Test /></div>
}

Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
973 |          strokeDasharray: "none",
974 |          strokeOpacity: 1
975 |  ...="path147" /></g></g><metadata id="metadata64"><rdf:RDF><cc:Work rdf:about="" /></rdf:RDF></metadata></svg>;
    |                                                              ^^^^^^^
976 |  export default SvgTest;

I tried modifying the typescript & vite config files, even creating a .babelrc & vite-end.d.ts for it to have no effect.

The only thing that worked is manually removing that last tag until And of course fixing in tsconfig.app.json in compilerOptions: add "vite-plugin-svgr/client" inside types like this:

    "types": [
      "node",
      "vite/client",
+      "vite-plugin-svgr/client"
    ],

This only fixes the editor/typescript part of the problem (Editor (vscode in my case) not understanding what the ?react at the end of the file path in the import statement does and what is the result is supposed to be after)

Before:

After

Now I can continue to modify the SVG using inkscape without having to manually modify the content every time I save my file in Inkscape. I believe this was created when I tried writing a description for my SVG and gave up. I don't know why it's kept here during the conversion to a plain svg.

Navigation Menu

Repository navigation

SVGR generates invalid react component #11753

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

1 remaining item

Before:

After

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

SVGR generates invalid react component #11753

Description

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

Reproducible demo

Activity

damozhang commented on Dec 15, 2021

fkrauthan commented on Dec 15, 2021

wmitsuda commented on Dec 15, 2021

DaviGn commented on Dec 17, 2021

danpamine commented on Dec 24, 2021

Tonacatecuhtli commented on Jan 12, 2022

graemeveygo commented on Jan 13, 2022

matburnham commented on Jan 15, 2022

belayaShlyapa commented on Feb 14, 2022

stenzing commented on Feb 27, 2022

azizur commented on Apr 6, 2022

wmitsuda commented on Apr 6, 2022

1 remaining item

abinanto commented on Apr 27, 2022

fkrauthan commented on Apr 27, 2022

ekhtiari commented on Apr 29, 2022

SiddharthAgarwal25 commented on May 6, 2022

elvinhatamov commented on Aug 9, 2022

oyebanjiyusuf3 commented on Nov 20, 2022

dayoolacodes commented on Dec 14, 2022

fkrauthan commented on Dec 14, 2022

GourishettySairam commented on Sep 6, 2023

lennybeadle commented on Dec 10, 2023

GourishettySairam commented on Dec 10, 2023

AlhajiABG commented on Aug 23, 2024

1mlm commented on Jan 15, 2026

Before:

After

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions