How to turn on the 'throwIfNamespace' flag in React.js

Question

I have some code like below in my component.

<svg id="SvgjsSvg3254" width="318" height="152" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent none repeat scroll 0% 0%;">

I am getting error like below

Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can turn on the 'throwIfNamespace' flag to bypass this warning.

How can I turn on the throwIfNamespace flag ?

Phelloderm

i used for an attribute like xmlns:xlink try using xmlnsXlink while exporting svg as react component. – Seller

Answer 1

You are getting the error because of this xmlns:xlink syntax, React does not know how to compile this. Use camel case notation, i.e. xmlnsXlink.

Try this:

<svg id="SvgjsSvg3254" width="318" height="152" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsSvgjs="http://svgjs.dev/svgjs" class="apexcharts-svg" xmlnsData="ApexChartsNS" transform="translate(0, 0)" style="background: transparent none repeat scroll 0% 0%;">

Retortion

This is brilliant! Appreciated such a simple solution! I had to replace xlink:href to xlinkHref as well. – Ailina

This doesn't answer the question, and also is not helpful if using provided SVG that you do not control. – Chamorro

Is there a tool for converting svg that is not camel case into camel case? – Olecranon

Didn't work for me on Next.js 13. – Treacle

For React, this should be the accepted answer. – Hypotonic

Answer 2

throwIfNamespace is an option of @babel/preset-react, or more specifically, @babel/plugin-transform-react-jsx. See this page on the babeljs site for an example configuration file that sets throwIfNamespace to false as well as more information regarding the option.

An example here for convenience with the following file:

index.js

<element ns:attr />

.babelrc with default throwIfNamespace (true)

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx"
    ]
  ]
}

yields similar to what you see:

$ npx babel index.js 
SyntaxError: /tmp/throw-if-namespace/index.js: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
> 1 | <element ns:attr />

.babelrc with throwIfNamespace set to false

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx", {
        "throwIfNamespace": false
      }
    ]
  ]
}

yields no error

$ npx babel index.js 
/*#__PURE__*/
React.createElement("element", {
  "ns:attr": true
});

Ruphina

I don't know what I'm doing wrong, but this is literally not working for me. Not sure if this is the case for anyone else. – Solitary

Two things seem to have changed since this answer was originally written: 1) the babel installed by npx by default is now out-of-date. See @babel/cli docs: babeljs.io/docs/babel-cli 2) it seems that @babel/plugin-transform-react-jsx no longer works out-of-the-box and you have to spin up a project and npm install it, otherwise you'll get missing module errors. So, for this to work as written, create an empty directory and npm install @babel/core @babel/cli @babel/plugin-transform-react-jsx beforehand. After making this adjustment, the example still works for me. – Ruphina

Answer 3

I found a solution to this issue. In my case, I had to remove all the unnecessary namespace in the SVG image and it started working as a react component.

You can see the difference between the two SVG contents. Correct one is the one at the bottom in the image.

OR you can upload and parse your data through this link : here

Ref: Github Issue

Prejudicial

That's not really a fix. You just removed the XML attributes causing the bug... you still need them. – Decretal

not a valid solution as this doesnot help ,,, all svgs cannot be simplified this way – Seller

Another solution is to use camelCase ex: <svg xlinkHref="i.imgur.com/w7GCRPb.png" /> Ref: github.com/facebook/react/issues/4908 – Prejudicial

Answer 4

Use the attributes properly:

• instead of class write className

• in style use camel notation

• and add the style in the brackets

  className={`name`}
      style={{
                  stroke: "none",
                  strokeWidth: 4,
                  strokeDasharray: "none",
                  strokeLinecap: "butt",
                  strokeLinejoin: "miter",
                  strokeMiterlimit: 10,
                  fill: "#99CC33",
                  fillRule: "nonzero",
                  opacity: 1,
                }}
  

Quarterphase

Answer 5

Change all the notations to camelCase

xmlns:x="ns_extend;" xmlns:i="ns_ai;" xmlns:graph="ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

to

xmlnsX="ns_extend;" xmlnsI="ns_ai;" xmlnsGraph="ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"

Veto

Answer 6

Used some animation from CodePen and had the same problem. Like suggested before, i turned the xml parts into camelCase and had to put style in curly brackets.

Image of not working and fixed code:

Eponymous

Please add further details to expand on your answer, such as working code or documentation citations. – Catena

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. – Cystocele

Ohh sorry for that. I had the same Error when i used and svg from CodePen. I didn't answer the question, but i gave a solution on how to get rid of the error. – Eponymous