create-react-app: Compilation error occurs for "use" tag w/ xlink:href attribute

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. 

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 15 (7 by maintainers)

Most upvoted comments

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