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!

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.

I fixed this issue by modifying the naming scheme of the attributes within the svg file to camel case. For example:

• xmlns:xlink becomes xmlnsXlink
• xml:space becomes xmlSpace
• 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.

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.

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.

Does this import work?

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

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.

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

None of the solutions above worked for me. I am using animated SVG’s which may be a different issue all together.

Same issue. Is there a possible fix yet?

I used svgo as a node CLI workaround.

Did the trick for me. YMMV.

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!

+1 if it works for you!

Thanks, It was helpful

Possible solution in the way: #12646. Kudos to @lucabattistini! 🙇‍♂️

For me, i had issue with animating svgs, that i was importing and using like this

import MastHeadSVG from './assets/MastHead.svg'

export const MastHead = () => {
  return (
    <Root>
      <object type='image/svg+xml' data={MastHeadSVG}>
        Masthead animation
      </object>
    </Root>
  )
}

What worked was to have a yarn resolution for @svgr.webpack at version 6.2.1. Reason is that react-scripts is using version 5.*.* and some aspects of the animation were not supported from what i gathered

in package.json

  "resolutions": {
    "@svgr/webpack": "6.2.1"
  },

You need to remove node_modules and re-install again

Hope that helps someone

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.

Thank you! Everyone’s talking about modifying the SVG itself which to “fix the problem” rather than talking about why we need to do this now? I don’t want to have to manage my SVGs as JSX documents!

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.

@SimpleCookie Unfortunately I think the best option might be workaround number 3, which is to migrate away from CRA.

With the end of life here, this bug may never see a fix; instead getting entombed with the dead project.

This is the solution we took. We migrated from CRA. I’m happy with the result.

This is still an issue for me. I’m trying to upgrade from CRA 4 -> 5 but encountering this problem. Yes I know 2 known workarounds is:

1. compress it by removing the namespaces using camelCase
2. using the !file-loader!./img.svg

But in my case, I am receiving my SVG from my company’s private npm repository so I’m unable to modify the SVG. I am also unable to solve it using the 2nd option with the file-loader, because who knows, it just don’t seem to work on npm modules I guess?

I wish this bug would be resolved. Using workarounds don’t feel like a solution. Namespaces are a part of the SVG-specification so I believe it should be supported.

How can I help?

<svg enable-background=“new 0 0 32 32” height=“32px” id=“Layer_1” version=“1.0” viewBox=“0 0 32 32” width=“32px” xml:space=“preserve” // xmlSpace=“preserve” – just remove colon and write in camelCase xmlns=“http://www.w3.org/2000/svg” // xmlns:xlink=“http://www.w3.org/1999/xlink” // xmlnsXlink=“http://www.w3.org/1999/xlink” – – just remove colon and write in camelCase > <g> // Svg Code </g> </svg>

This worked for me. 😁 Before

After

@Bat-Sheva-Sh very off-topic for this thread, but setting state will cause a re-render. As you set state every single render, every render will trigger a re-render, causing your infinite loop. Maybe only update your state values if they are out of date.

Are there any news regarding this issue with react-scripts > 4.0.3 ?

I use several SVGs and animated SVGs, for me is enough to import them as an img (not as a reactComponent).

Thanks in advance. Luis

@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 accidentally excluded the react-app-env.d.ts file from my repo. Adding it back solved my issues with svg files.

if you use Inkscape, an alternative to running the svg through a compressor is to save it as an “optimised svg”: this worked for me.

enable svgo, work for me

@SimpleCookie Unfortunately I think the best option might be workaround number 3, which is to migrate away from CRA.

With the end of life here, this bug may never see a fix; instead getting entombed with the dead project.

For react-native app, https://github.com/kristerkari/react-native-svg-transformer solve it

so what actually should i change/ drop?

<div> <login/> </div>

again…

this is the return in was droped

return ( <div> <Login /> </div> );

what is wrong in this code-
it gives an error of ### react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

`import logo from ‘./logo.svg’; import ‘./App.css’; import Login from ‘./components/Login’; import Enroll from ‘./components/Enroll’; import Home from ‘./components/Home’; import react, { useState } from ‘react’;

function App() { const [isLogin, setIsLogin] = useState(false); const [isEnroll, setIsEnroll] = useState(false); const [isOld, setIsOld] = useState(“”); const [isOld2, setIsOld2] = useState(“”);

setIsOld(localStorage.getItem(‘password’))//if you have anything in local
setIsOld2(localStorage.getItem(‘name’))

return ( <div> <Login /> </div> ); }

export default App;`

Any word on #12646 getting merged and 5.0.2 being released. This is really too bad because I would really like to upgrade to 5 but this is breaking my workflow. I agree with @JoshMcCullough above!

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.

Thank you! Everyone’s talking about modifying the SVG itself which to “fix the problem” rather than talking about why we need to do this now? I don’t want to have to manage my SVGs as JSX documents!

Looking at this repo activity it seems this project is abandoned. Too bad no public statement is made and that gives people hopes about a solution.

I’ve successfully migrated from CRA to vite months ago, it went smoothly and everything works nice. Made it in one afternoon. I recommend doing the same.

Yes, thanks @wmitsuda, I also migrated to Vite. It’s great!

Any word on #12646 getting merged and 5.0.2 being released. This is really too bad because I would really like to upgrade to 5 but this is breaking my workflow.

I agree with @JoshMcCullough above!

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.

Thank you! Everyone’s talking about modifying the SVG itself which to “fix the problem” rather than talking about why we need to do this now? I don’t want to have to manage my SVGs as JSX documents!

Looking at this repo activity it seems this project is abandoned. Too bad no public statement is made and that gives people hopes about a solution.

I’ve successfully migrated from CRA to vite months ago, it went smoothly and everything works nice. Made it in one afternoon. I recommend doing the same.

Not sure if it’s relevant as I do not use create-react-app, but I came across this problem earlier and solved it.

In short, my setup uses webpack and is configured to load SVGs with `@svgr/webpack’ (default settings).

This morning, I made some tests with the svgo CLI. In that purpose, I have created a svgo.config.js file in my home directory.

From then, building my react app fails with the Namespace tags are not supported by default. error.

The point is @svgr/webpack uses the config file from my home directory instead of its own svgo config.

My ~/svgo.config.js file was like

module.exports = {
  plugins: [
  ],
};

Renaming my svgo.config.js file to my_svgo.config.js solved the problem.

it didn’t work for me

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

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'

https://www.svgminify.com/ works for me too!

For those trying svgo solution try run svgo -r . from root of your project.

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?