Using template strings throws an error on Safari: Invalid character '`'

[josdejong]

Using template strings in jsx files seems to be not supported by Safari because it doesn't like the backtick character '`'.

On Safari 8, the following code:

var container = document.getElementById('app');
var name = 'user';
var msg = `Hello ${name}!`;
React.render(<div>{msg}</div>, container);

Throws an error:

SyntaxError: Invalid character: '`' (line 3)

See this jsbin: http://jsbin.com/vurezi/edit?html,js,output

One solution for this is not to use in-browser transformation (which is good practice anyway). But does anybody know a workaround for this? I tried specifying charset="utf-8" in the jsx script tags but that didn't help.

[zpao]

You need to enable the other es6 transforms by adding some params to the type. type="text/jsx?harmony=true

I don't know how to trigger that on jsbin but I would suggest using Babel there anyway.

[josdejong]

Thanks for your quick reaction. I was under the impression that ES6 features like template strings where dealt with by the React transformer but if I understand it correctly that's not the case.

[syranide]

@josdejong It is, but it is not enabled by default.
Also https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

[josdejong]

Thanks @syranide. I just noticed that babel has support to transform jsx files too (http://babeljs.io/docs/usage/jsx/), and this works right out of the box using a build step. For some reason it didn't work when running the in-browser transform of babel: then html tags in react classes aren't compiled into JavaScript.