CODEWITHSUNDEEP
reactjssvgxml-namespacesjavascript-namespaces
abu abu
abu abu

Reputation: 7052

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

enter image description here

Upvotes: 43

Views: 53109

Answers (6)

Ali Abbas
Ali Abbas

Reputation: 721

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"

Upvotes: 1

Sha Nix
Sha Nix

Reputation: 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:

Upvotes: -1

tomjw64
tomjw64

Reputation: 113

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

Upvotes: 8

Abdul Abdurahim
Abdul Abdurahim

Reputation: 822

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

Upvotes: 62

Abhinav Sharma
Abhinav Sharma

Reputation: 11

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

Upvotes: 1

KRUSHANU MOHAPATRA
KRUSHANU MOHAPATRA

Reputation: 592

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.

enter image description here

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

Upvotes: 3

Related Questions