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

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.

[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!

[konradekk]

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.