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 ?

i used for an attribute like **xmlns:xlink** try using **xmlnsXlink** while exporting svg as react component. — Ashish Yadav, May 04 '20 at 16:21

score 43 · Answer 1 · edited Mar 14 '23 at 19:50

43

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%;">

edited Mar 14 '23 at 19:50

Moritz Ringler

9,772
9
21
34

answered Mar 29 '21 at 01:35

Abdug'affor Abdurahimov

606
7
10

5

This is brilliant! Appreciated such a simple solution! I had to replace `xlink:href` to `xlinkHref` as well. – CPHPython Apr 19 '21 at 20:44
8

This doesn't answer the question, and also is not helpful if using provided SVG that you do not control. – Tony Dec 28 '21 at 20:11
Is there a tool for converting svg that is not camel case into camel case? – Mel Jan 02 '23 at 01:01
Didn't work for me on Next.js 13. – Ricardo Martins May 09 '23 at 04:22

score 8 · Answer 2 · edited Mar 14 '23 at 19:52

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
});

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. — Bwvolleyball, Jun 22 '23 at 23:46
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: https://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. — tomjw64, Jul 21 '23 at 14:08

score 2 · Answer 3 · answered Jan 09 '20 at 08:17

2

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

answered Jan 09 '20 at 08:17

KRUSHANU MOHAPATRA

552
1
6
18

1

That's not really a fix. You just removed the XML attributes causing the bug... you still need them. – doublejosh Apr 13 '20 at 21:30
not a valid solution as this doesnot help ,,, all svgs cannot be simplified this way – Ashish Yadav May 04 '20 at 16:22
2

Another solution is to use camelCase ex: Ref: https://github.com/facebook/react/issues/4908 – KRUSHANU MOHAPATRA May 20 '20 at 04:14

score 0 · Answer 4 · edited Jan 06 '22 at 00:19

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,
              }}

score -1 · Answer 5 · edited Mar 14 '23 at 19:53

-1

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:

edited Mar 14 '23 at 19:53

Moritz Ringler

9,772
9
21
34

answered Aug 30 '21 at 12:40

Sha Nix

1

Please add further details to expand on your answer, such as working code or documentation citations. – Community Aug 30 '21 at 15:23
This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. – JW Geertsma Sep 02 '21 at 11:51
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. – Sha Nix Sep 03 '21 at 08:57

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

5 Answers5

Linked