Description
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
ornpm 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
Activity
damozhang commentedon Dec 15, 2021
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/ .
fkrauthan commentedon Dec 15, 2021
@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.
wmitsuda commentedon Dec 15, 2021
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.
DaviGn commentedon Dec 17, 2021
Exactly same issue here
dansenpir commentedon Dec 24, 2021
Same here.
Tonacatecuhtli commentedon Jan 12, 2022
Same
graemeveygo commentedon Jan 13, 2022
Same here
matburnham commentedon Jan 15, 2022
I imagine this probably ultimately caused by the problem with regular import described in #11770 rather than SVGR specifically.
belayaShlyapa commentedon Feb 14, 2022
I find a similar issue on stackoverflow
I didn't minify my svg file but in my case, i changed
xmlns:bx
toxmlnsBx
andbx:shape
tobxShape
into my svg code file.Now, it works for me
stenzing commentedon Feb 27, 2022
same here, I would rather see a different fix than modifying all the svg-s after they get updated again ang again.
azizur commentedon Apr 6, 2022
Has anyone found a fix/workaround for this issue yet?
17 remaining items