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

问题

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.com/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 ?

回答1:

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

回答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