Babel plugin / Inferno fails with rendering SVG

[Havunen]

Inferno babel plugin 0.2.5 or Inferno 0.4.0 is failing when there is component with SVG inside.

class Component extends Inferno.Component {
        constructor(props) {
            super(props);
         }
         render() {
            return (
               <svg class="alert-icon">
                    <use xlink:href="#error"></use> // This should link to inline svg with ID error
                </svg>
            )
         }
}

 Inferno.render(<Component />, APP_ELEMENT);

Exception is thrown:

 ModuleParseError: Module parse failed: ****\node_modules\babel-loader\index.js?{"presets":["es2015"],"plugins":["babel-plugin-syntax-jsx","babel-pl
You may need an appropriate loader to handle this file type.
|             tag: 'use',
|             attrs: {
|                 [object Object]: '#error'
|             }
|         }, '            ']

Expected result:
It should render SVG element with use element refering to error id.

React has solved it this way: http://stackoverflow.com/questions/26815738/svg-use-tag-and-reactjs

Havunen

[ghost]

@Havunen Can you try to render it without JSX and see if it throws so we now if it's the plugin causing this, or something in the core.

[trueadm]

It appears to be an issue with the core Babel JSX plugin when it encounters xlink:href="#error" (likely the colon throwing the JSX parser off). I'll investigate in more detail now.

[trueadm]

Ah, so the issues is this:

Namespace tags are not supported. JSX is not XML.

So Babel does not support namespaced tags.

https://babeljs.io/repl/#?experimental=true&evaluate=true&loose=false&spec=false&code=%3Csvg%20class%3D%22alert-icon%22%3E%0A%09%3Cuse%20xlink%3Ahref%3D%22%23error%22%3E%3C%2Fuse%3E%0A%3C%2Fsvg%3E%0A

[trueadm]

As per React:

facebook/react#2250

I'll get xlinkHref attribute added so it achieves the same thing without breaking JSX. :) @Havunen how does that sound?

[ghost]

Everything is fixed and should work out of the box now with the compiled build on the dev branch.
Found here. https://github.com/trueadm/inferno/tree/dev/dist

@trueadm If still issues, just leave me a msg on Skype. I will read it later on.

[Havunen]

Really quick reply guys!
I will try it out later today :)

[Havunen]

Great work guys! It seems to work in dev branch. Closing this issue.