Compilation error occurs for "use" tag w/ xlink:href attribute

[RoarkeRandall]

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

I'm using the latest yarn version, yes it is reproducible.

Description

Using <use xlink:href="#icon-1"></use> (inside an svg tag) in a jsx render function will cause a an error. This is likely an error in the transpiler but I'm not sure how to verify it. It is not able to handle the colon in xlink:href.

Expected behavior

A use tag should be rendered

Actual behavior

I get the following error:

Module build failed: TypeError: name.toLowerCase is not a function
    at Array.forEach (native)
 @ ./src/containers/App/App.js 40:22-67```

### Environment

Run these commands in the project folder and fill in their results:

1. `npm ls react-scripts` : react-scripts@0.9.0
2. `node -v`: v7.6.0
3. `npm -v`: 4.1.2

Then, specify:

1. Operating system: Mac OS X 10.11.6
2. Browser and version: Chrome Version 56.0.2924.87 (64-bit)

Sorry I'm not able to make a repro of it, I'm not familiar with the svg tag. If I get some time tomorrow I'll look into it and make one. 

[Timer]

You need to use xlinkHref, not xlink:href. 😄

[RoarkeRandall]

Good call, lol. Also, lol @ my formatting.

[Timer]

Is

Module build failed: TypeError: name.toLowerCase is not a function
    at Array.forEach (native)
 @ ./src/containers/App/App.js 40:22-67

the error produced when an error like this is made? That seems quite confusing ... Did you happen to copy the wrong thing? Might be a bug in our webpack message formatting.

[RoarkeRandall]

Yes, that error message was copy pasted correctly. By changing xlink:href to xlinkHref the error went away.

[Timer]

I'm going to reopen this so we can take another look at it.

[Timer]

I can't get this to act up for me.

Joes-MacBook-Pro:create-react-app joe$ yarn build
yarn build v0.22.0
$ node packages/react-scripts/scripts/build.js
Creating an optimized production build...
Failed to compile.

Module build failed: SyntaxError: Namespace tags are not supported. ReactJSX is not XML.

  11 |           <h2>Welcome to React</h2>
  12 |           <svg>
> 13 |             <use xlink:href="#icon-1"></use>
     |                  ^
  14 |           </svg>
  15 |         </div>
  16 |         <p className="App-intro">


error Command failed with exit code 1.
Joes-MacBook-Pro:create-react-app joe$

If you could please detail how you got this error to happen, please let me know!

[jooj123]

I have run into this strange error message as well

Seems it happens when you have custom attributes in your svg or use elements, eg:

<svg martin:docname="blah">
        ...
</svg>

Probably should come up with a more meaningful error message as it was a bit painful to track all the offending attributes

[gaearon]

React doesn’t support namespaced JSX.
Was the error message not descriptive?

[jooj123]

Yeah the error message wasn't descriptive - same as the above error @RoarkeRandall had:

Module build failed: TypeError: name.toLowerCase is not a function
    at Array.forEach (native)
 @ ./src/containers/App/App.js 40:22-67

Not a big deal i guess - but thought I would flag it

[sheelah]

+1! But glad to have found the fix here.