create-react-app
create-react-app copied to clipboard
facebook
Bug: [5.0] SVGs cannot be imported (not as components, but regular import)
Describe the bug
When importing a SVG in a regular manner (not as a component):
import Logo from './logo.svg'
There is an error upon yarn start:
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.
This seems like a regression from CRA 4 which didn't have this problem. I understand the error is relevant if I tried to import it as a component, but that's not what's happening here.
Did you try recovering your dependencies?
yes
Which terms did you search for in User Guide?
SyntaxError: unknown: Namespace tags are not supported by default
Environment
Environment Info:
current version of create-react-app: 4.0.3
running from /Users/alamothe/.config/yarn/global/node_modules/create-react-app
System:
OS: macOS 11.6.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 14.18.2 - /usr/local/opt/node@14/bin/node
Yarn: 3.2.0-rc.7 - /usr/local/bin/yarn
npm: 6.14.15 - /usr/local/opt/node@14/bin/npm
Browsers:
Chrome: 96.0.4664.110
Edge: 96.0.1054.53
Firefox: 94.0.2
Safari: 15.1
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: 4.0.3
- Import SVG file
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW 2021 (64-Bit) -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="725px" height="144px" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 311.23 61.63"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path fill="blue" fill-rule="nonzero" d="M148.94 61.63c-4.76,0 -9.08,-1.93 -12.2,-5.06 -3.13,-3.12 -5.06,-7.43 -5.06,-12.2l0 0 0 -17.03 -5.53 0c-1.82,0 -3.3,-1.48 -3.3,-3.29 0,-1.82 1.48,-3.29 3.3,-3.29l5.53 0 0 -17.47c0,-1.82 1.47,-3.29 3.29,-3.29 1.82,0 3.29,1.47 3.29,3.29l0 17.47 5.54 0 0 6.58 -5.54 0 0 17.03 0 0.01c0.01,2.94 1.2,5.61 3.13,7.54 1.93,1.93 4.6,3.13 7.55,3.13l0 6.58zm-30.06 -6.03c-1.91,1.92 -4.19,3.43 -6.68,4.46 -2.49,1.03 -5.15,1.57 -7.86,1.57 -5.69,0 -10.83,-2.3 -14.55,-6.03 -2.93,-2.92 -4.98,-6.73 -5.72,-10.98l-27.83 0c0.64,2.43 1.91,4.61 3.64,6.33 2.53,2.53 6.03,4.1 9.89,4.1 1.87,0 3.7,-0.37 5.37,-1.06 1.66,-0.69 3.2,-1.71 4.52,-3.04l4.66 4.65c-1.92,1.92 -4.2,3.43 -6.69,4.46 -2.48,1.03 -5.15,1.57 -7.86,1.57 -5.68,0 -10.82,-2.3 -14.55,-6.03 -3.62,-3.62 -5.9,-8.59 -6.02,-14.08 0,-0.07 0,-0.13 0,-0.19 0,-0.05 0,-0.09 0,-0.14 0,-0.04 0,-0.09 0,-0.13l0 0c0.07,-5.58 2.36,-10.61 6.02,-14.28 3.73,-3.72 8.87,-6.02 14.55,-6.02 5.68,0 10.82,2.3 14.55,6.02 1.02,1.03 1.94,2.16 2.73,3.38 0.79,-1.22 1.71,-2.35 2.74,-3.38 3.72,-3.72 8.86,-6.02 14.55,-6.02 5.68,0 10.82,2.3 14.54,6.02 3.73,3.73 6.03,8.87 6.03,14.55 0,1.82 -1.47,3.29 -3.29,3.29l-30.82 0c0.64,2.43 1.92,4.61 3.64,6.33 2.53,2.53 6.03,4.1 9.9,4.1 1.87,0 3.69,-0.37 5.36,-1.06 1.66,-0.69 3.21,-1.71 4.53,-3.04l4.65 4.65zm-14.54 -17.56l13.6 0c-0.61,-2.54 -1.92,-4.82 -3.71,-6.6 -2.53,-2.54 -6.03,-4.1 -9.89,-4.1 -3.87,0 -7.37,1.56 -9.9,4.1 -1.79,1.78 -3.09,4.06 -3.71,6.6l13.61 0zm-34.57 0l13.6 0c-0.61,-2.54 -1.92,-4.82 -3.71,-6.6 -2.53,-2.54 -6.03,-4.1 -9.89,-4.1 -3.86,0 -7.36,1.56 -9.89,4.1 -1.79,1.78 -3.1,4.06 -3.71,6.6l13.6 0zm-60.94 -10.7l-5.54 0c-1.82,0 -3.29,-1.48 -3.29,-3.29 0,-1.82 1.47,-3.29 3.29,-3.29l5.54 0 0 -3.5 0 0c0,-4.76 1.93,-9.08 5.05,-12.2 3.13,-3.13 7.44,-5.06 12.21,-5.06l0 6.58c-2.95,0 -5.62,1.2 -7.55,3.13 -1.93,1.93 -3.13,4.6 -3.13,7.54l0 0.01 0 3.5 5.54 0 0 6.58 -5.54 0 0 31c0,1.82 -1.47,3.29 -3.29,3.29 -1.82,0 -3.29,-1.47 -3.29,-3.29l0 -31zm23.02 -24.05c0,-1.82 1.48,-3.29 3.29,-3.29 1.82,0 3.29,1.47 3.29,3.29l0 41.08 0 0.01c0.01,2.94 1.2,5.61 3.13,7.54 1.93,1.93 4.6,3.13 7.55,3.13l0 6.58c-4.76,0 -9.08,-1.93 -12.2,-5.06 -3.13,-3.12 -5.06,-7.43 -5.06,-12.2l0 0 0 -41.08z"/>
<path fill="#001737" fill-rule="nonzero" d="M170.59 15.87c3.01,0 5.66,0.67 7.94,2 2.29,1.34 4.08,3.07 5.37,5.2 0.27,0.42 0.4,0.88 0.4,1.37 0,0.73 -0.34,1.3 -1.03,1.72 -0.3,0.15 -0.65,0.23 -1.03,0.23 -0.41,0 -0.81,-0.11 -1.17,-0.32 -0.36,-0.21 -0.65,-0.5 -0.88,-0.88 -2.14,-3.36 -5.35,-5.05 -9.66,-5.09 -3.08,0 -5.52,0.65 -7.31,1.94 -1.79,1.3 -2.68,3.15 -2.68,5.55 0,4.45 3.6,7.15 10.79,8.11 4.73,0.68 8.25,2.13 10.57,4.34 2.32,2.21 3.49,5.12 3.49,8.74 0,2.66 -0.65,4.97 -1.95,6.91 -1.29,1.94 -3.06,3.42 -5.31,4.43 -2.25,1.01 -4.76,1.51 -7.54,1.51 -3.62,0 -6.83,-0.77 -9.62,-2.31 -2.8,-1.54 -4.81,-3.63 -6.03,-6.26 -0.15,-0.26 -0.23,-0.57 -0.23,-0.91 0,-0.53 0.2,-0.98 0.6,-1.34 0.4,-0.37 0.94,-0.55 1.63,-0.55 0.45,0 0.88,0.13 1.28,0.37 0.4,0.25 0.7,0.6 0.89,1.06 0.87,1.71 2.33,3.1 4.37,4.14 2.04,1.05 4.41,1.57 7.11,1.57 3.12,0 5.64,-0.75 7.54,-2.25 1.91,-1.51 2.86,-3.61 2.86,-6.32 0,-2.39 -0.89,-4.41 -2.66,-6.05 -1.77,-1.64 -4.43,-2.69 -7.97,-3.14 -4.42,-0.54 -7.89,-1.92 -10.42,-4.14 -2.54,-2.23 -3.8,-4.96 -3.8,-8.2 0,-2.29 0.62,-4.29 1.85,-6.03 1.24,-1.73 2.96,-3.06 5.15,-4 2.19,-0.93 4.67,-1.4 7.45,-1.4zm52.04 0.58c0.57,0 1.04,0.2 1.4,0.6 0.36,0.39 0.54,0.88 0.54,1.45 0,0.54 -0.13,1.01 -0.4,1.43l-15.59 24.62 0 14.28c0,0.61 -0.21,1.13 -0.63,1.57 -0.42,0.44 -0.95,0.66 -1.6,0.66 -0.61,0 -1.13,-0.22 -1.57,-0.66 -0.44,-0.44 -0.66,-0.96 -0.66,-1.57l0 -14.28 -15.54 -24.62c-0.3,-0.49 -0.45,-0.97 -0.45,-1.43 0,-0.57 0.21,-1.06 0.63,-1.45 0.41,-0.4 0.93,-0.6 1.54,-0.6 0.42,0 0.77,0.08 1.06,0.25 0.28,0.17 0.56,0.45 0.82,0.83l14.23 22.91 14.16 -22.79c0.31,-0.42 0.61,-0.73 0.92,-0.92 0.3,-0.19 0.68,-0.28 1.14,-0.28zm40.33 2.22c0,-0.64 0.22,-1.18 0.66,-1.6 0.43,-0.42 0.96,-0.62 1.57,-0.62 0.65,0 1.18,0.2 1.6,0.62 0.42,0.42 0.63,0.96 0.63,1.6l0 40.16c0,0.61 -0.21,1.13 -0.63,1.57 -0.42,0.44 -0.95,0.66 -1.6,0.66 -0.76,0 -1.32,-0.25 -1.66,-0.74l-27.36 -35.88 0 34.39c0,0.61 -0.21,1.13 -0.63,1.57 -0.42,0.44 -0.95,0.66 -1.6,0.66 -0.65,0 -1.18,-0.21 -1.6,-0.63 -0.42,-0.42 -0.63,-0.95 -0.63,-1.6l0 -40.16c0,-0.64 0.21,-1.18 0.63,-1.6 0.42,-0.42 0.95,-0.62 1.6,-0.62 0.69,0 1.26,0.26 1.71,0.8l27.31 35.87 0 -34.45zm33.65 -2.8c2.74,0 5.23,0.4 7.48,1.2 2.25,0.8 4.42,2.08 6.51,3.83 0.42,0.31 0.63,0.74 0.63,1.32 0,0.3 -0.08,0.58 -0.23,0.82 -0.15,0.25 -0.36,0.43 -0.63,0.55 -0.07,0.26 -0.24,0.47 -0.51,0.62 -0.27,0.16 -0.55,0.23 -0.86,0.23 -0.57,0 -1.04,-0.17 -1.43,-0.51 -1.48,-1.33 -3.1,-2.31 -4.85,-2.91 -1.75,-0.61 -3.79,-0.92 -6.11,-0.92 -3.2,0 -6.17,0.85 -8.91,2.54 -2.75,1.7 -4.93,3.97 -6.55,6.83 -1.61,2.86 -2.42,5.94 -2.42,9.25 0,3.39 0.8,6.52 2.4,9.37 1.6,2.86 3.77,5.12 6.51,6.8 2.74,1.68 5.73,2.51 8.97,2.51 4.15,0 7.9,-1.33 11.25,-4 0.42,-0.3 0.84,-0.45 1.26,-0.45 0.57,0 1.06,0.2 1.48,0.6 0.42,0.4 0.63,0.92 0.63,1.57 0,0.61 -0.21,1.14 -0.63,1.6 -3.58,3.27 -8.24,4.91 -13.99,4.91 -4.04,0 -7.75,-1.03 -11.14,-3.08 -3.39,-2.06 -6.09,-4.84 -8.09,-8.34 -1.99,-3.51 -2.99,-7.33 -2.99,-11.49 0,-4.11 0.99,-7.92 2.97,-11.42 1.98,-3.5 4.66,-6.28 8.05,-8.34 3.39,-2.06 7.12,-3.09 11.2,-3.09z"/>
</g>
</svg>
The expected behavior
Lie in CRA4, there shouldn't be an error.
Does this import work?
import { ReactComponent as Logo } from "./Logo.svg";
I should add that importing { ReactComponent as x} is the approach I've always taken, based on the documentation for importing SVGs
The same error happens for me even when importing with { ReactComponent as x}.
I’ve tried to minimize my SVG file with scour but the import still fails.
I am also unable to use an SVG import with { ReactComponent as x } or a regular direct import.
My SVG contains CDATA which resulted in this error:
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js): Error: Expected node, got
followed by a large block of CDATA.
Removing the CDATA block from the SVG file resulted in the same error @alamothe reported.
I was using one of the unDraw SVGs and got this error.
But I noticed that I modified it using Inkscape and the modified version wasn't working but the original version downloaded from the site worked.
So I took a look at the files and saw that the original one was way more compressed/compact so I decided to take the one that wasn't working and compress it and see if that worked. It works!
Potential solution:
Compress your SVGs using this site
It worked for me. After compressing it using the site (default settings) I stopped having this error. And saved a few bytes!
:+1: if it works for you!
Guys, if possible let's keep this bug for regular import:
import Logo from './logo.svg'
This is quite different than importing as a component (both have different trade-offs).
For regular import, CRA shouldn't be trying to make it as a component in the first place, it is to be used inside img tag.
Same issue. Is there a possible fix yet?
I provided 1 above. it might work for you. read up
Same issue. Is there a possible fix yet?
I used svgo as a node CLI workaround.
Did the trick for me. YMMV.
Same issue. Is there a possible fix yet?
I provided 1 above. it might work for you. read up
Thanks, it worked like a charm!
Quickest way to temporarily workaround this bug is to reconfigure the import itself in the fly taking advantage of webpack being used under the hood.
I won’t go into detail of the technique; please refer for webpack config docs for the details and possible other variants of the change. (You could go even for something more wholesome like CRA overrides based on this etc.)
🏃♂️ TL;DR (example)
Instead of
import Logo from "./logo.svg";you should just use
import Logo from "!file-loader!./logo.svg";(’till the bug is resolved).
⚠ Warning (Jest)
See @mykter answer below for solving possible issues with Jest.
None of the solutions above worked for me. I am using animated SVG's which may be a different issue all together.
I fixed this issue by modifying the naming scheme of the attributes within the svg file to camel case. For example:
-
xmlns:xlinkbecomesxmlnsXlink -
xml:spacebecomesxmlSpace - etc.
After resolving this syntax error, the importing { ReactComponent as x} approach mentioned above successfully rendered the svg. For reference, the fix can be found originally on this StackOverflow answer.
I was using one of the unDraw SVGs and got this error.
But I noticed that I modified it using Inkscape and the modified version wasn't working but the original version downloaded from the site worked.
So I took a look at the files and saw that the original one was way more compressed/compact so I decided to take the one that wasn't working and compress it and see if that worked. It works!
Potential solution:
Compress your SVGs using this site
It worked for me. After compressing it using the site (default settings) I stopped having this error. And saved a few bytes!
👍 if it works for you!
Same issue, work for me ! Thanks
I was using one of the unDraw SVGs and got this error. But I noticed that I modified it using Inkscape and the modified version wasn't working but the original version downloaded from the site worked. So I took a look at the files and saw that the original one was way more compressed/compact so I decided to take the one that wasn't working and compress it and see if that worked. It works!
Potential solution:
Compress your SVGs using this site It worked for me. After compressing it using the site (default settings) I stopped having this error. And saved a few bytes! 👍 if it works for you!
Same issue, work for me ! Thanks
This worked perfectly for me!! Thank you!!
Is it a viable solution to manually change the content of the SVG files?
I have over 100 SVGs in my assets folder. Changing them one by one is not an option in my case.
Is it a viable solution to manually change the content of the SVG files? I have over 100 SVGs in my
assetsfolder. Changing them one by one is not an option in my case.
svgo runs from the command line. It will process multiple files. It's not a solution, but a viable workaround.
SVGO didn't worked for me, but the import with file-loader did the trick
I accidentally excluded the react-app-env.d.ts file from my repo. Adding it back solved my issues with svg files.
For those trying svgo solution try run svgo -r . from root of your project.
If you're using the import Logo from "!file-loader!./logo.svg"; workaround and are using Jest for tests, you might get an error like:
Cannot find module '!file-loader!./logo.svg' from ...
To avoid this you can mock out static assets in your tests as described here: https://jestjs.io/docs/webpack
The maintainer can probably allow us to configure this behavior by turning it on and off using environment variables. https://create-react-app.dev/docs/advanced-configuration/ Please allow us to configure this.
Quickest way to temporarily workaround this bug is to reconfigure the import itself in the fly taking advantage of webpack being used under the hood.
I won’t go into detail of the technique; please refer for webpack config docs for the details and possible other variants of the change. (You could go even for something more wholesome like CRA overrides based on this etc.)
🏃♂️ TL;DR (example) Instead of
import Logo from "./logo.svg";you should just use
import Logo from "!file-loader!./logo.svg";(’till the bug is resolved).
⚠ Warning (Jest) See @mykter answer below for solving possible issues with Jest.
Doesn't work!
Unexpected '!' in '!file-loader!../../assets/header.svg'. Do not use import syntax to configure webpack loaders
Also when running tests:
Cannot find module '!file-loader!../../assets/header.svg' from 'src/main.ts'
@fix-me for the first issue you can suppress the ESLint error with a comment like // eslint-disable-next-line prior to the import.
For the test issue, see the link in the text you quoted: https://github.com/facebook/create-react-app/issues/11770#issuecomment-1068117768
I can t believe people are still looking for inappropriate workarounds for this bug. This needs to be fixed and while a fix is done you can downgrade react scripts for a while.
There are two solutions: A: Rollback to react-scripts 4.0.3 and react-error-overlay 6.0.9 B: Switch to Nextjs tooling, https://colinhacks.com/essays/building-a-spa-with-nextjs https://nextjs.org/docs/advanced-features/static-html-export
There are two solutions: A: Rollback to react-scripts 4.0.3 and react-error-overlay 6.0.9 B: Switch to Nextjs tooling, https://colinhacks.com/essays/building-a-spa-with-nextjs
These are not really solutions, since the no longer maintained version is not passing WhiteSource anymore and Azure is moving forward dropping support for node < 14 soon. Switching to another framework for a 100k lines of code thing is also not an option, sry.
There are two solutions: A: Rollback to react-scripts 4.0.3 and react-error-overlay 6.0.9 B: Switch to Nextjs tooling, https://colinhacks.com/essays/building-a-spa-with-nextjs
These are not really solutions, since the no longer maintained version is not passing WhiteSource anymore and Azure is moving forward dropping support for node < 14 soon. Switching to another framework for a 100k lines of code thing is also not an option, sry.
The second solution doesn't change the code, you can add an spa entrypoint to nextjs and it will treat it like a pure spa.