Bug: [5.0] SVGs cannot be imported (not as components, but regular import)

[alamothe]

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

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

[mikegoatly]

Does this import work?

import { ReactComponent as Logo } from "./Logo.svg";

[mikegoatly]

I should add that importing { ReactComponent as x} is the approach I've always taken, based on the documentation for importing SVGs

[bwaldvogel]

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.

[ehardesty]

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.

[rodrigograca31]

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!

[alamothe]

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.

[JC03Ceige]

Same issue. Is there a possible fix yet?

[rodrigograca31]

Same issue. Is there a possible fix yet?

I provided 1 above. it might work for you. read up