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 ?

Answer 1

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

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

Answer 3

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

Answer 4

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:

Answer 5

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