Can't find variable: Reflect, using karma and React

[jednano]

I can't use es6ify as a browserify transform in karma, because every time I var React = require('react') I get the following error:

PhantomJS 1.9.8 (Linux) ERROR ReferenceError: Can't find variable: Reflect at /tmp/1645300b04d0678d0d53075229712f4fbfb3fed6.browserify:2265:0 <- /vagrant /node_modules/react/lib/React.js:185:0

Upon inspection, React.js, line 185 is the final newline of the file, after the module.exports = React. In fact, I can't find Reflect anywhere in React.js.

Has anybody successfully paired es6ify with karma and React?

[domenic]

PhantomJS is in general not compatible with Traceur. What about in a real browser?

[jednano]

Can't really verify that in my current vagrant environment, but what you say makes sense. I don't use the Traceur features in my source, but since React does, I tried b.add(es6ify.runtime) and I just get a different, but similar, error. I think I'll give up this effort for now.

[dmaj7no5th]

Same problem here, trying to combine browserify + es6ify + react + karma. Just tried in Chrome as well as PhantomJS -- hitting the same error in both.

[jednano]

Reopening since @dmaj7no5th has verified this happens in Chrome also. Looks like I'm not the only one trying this combination.

[domenic]

Can we get a minimal repo we can clone to reproduce the problem? Since there are so many moving parts in your setup duplicating it sounds hard. It should ideally be as minimal as possible to eliminate other factors.

[jednano]

Sure. See https://github.com/jedmao/karma-browserify-test/commit/575717ad16f952ce5d2bf083215e7ae94b769ca3

I can now verify that Chrome presents the same issue; albeit, a slightly different error:

/.../GitHub/karma-browserify-test (master u=)
10:33 $npm test

> karma-browserify-test@0.0.0 test Z:\Documents\GitHub\karma-browserify-test
> karma start --single-run

INFO [karma]: Karma v0.12.25 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [launcher]: Starting browser Chrome
INFO [Chrome 39.0.2171 (Windows 8.1)]: Connected on socket FUoN8hYW00Zrv_u-8vN6
with id 44961129
INFO [PhantomJS 1.9.8 (Windows 8)]: Connected on socket zPOa93SESryYQqT98vN7 wit
h id 2024503
INFO [framework.browserify]: 1626187 bytes written (5.14 seconds)
INFO [framework.browserify]: bundle built
PhantomJS 1.9.8 (Windows 8) ERROR
  ReferenceError: Can't find variable: Reflect
  at C:/Users/Jed/AppData/Local/Temp/937cc1d6229be67c5a891296ba85089553ff9e8f.br
owserify?604edf1d4602043afa29675a282f9853a0fe6ff4:2177

Chrome 39.0.2171 (Windows 8.1) ERROR
  Uncaught ReferenceError: Reflect is not defined
  at C:/Users/Jed/AppData/Local/Temp/937cc1d6229be67c5a891296ba85089553ff9e8f.br
owserify?604edf1d4602043afa29675a282f9853a0fe6ff4:2177

npm ERR! Test failed.  See above for more details.
npm ERR! not ok code 0

[cultofmetatron]

I ran into a similar issue running reactify and es6ify on chrome. Somethig about using this.state inside a function that I write using the fat arrow syntax just causes my code to shit the bed and throw up the Reflect is undefined error.

for instance,

var React = require('react');

var Pixel = React.createClass({

  getInitialState: function() {
    return {
      red:  this.props.red || 0,
      green: this.props.green || 0,
      blue:  this.props.blue || 0,
      alpha:  this.props.alpha || 1,
      size: this.props.size || 5
    };
  },

  computeColor: function() {
    return 'rgba(' + [ this.state.red, this.state.green, this.state.blue, this.state.alpha ].join(', ') + ')';
  },

  render: function() {
    var colorVal = this.computeColor();
    console.log(((x) => {return "hello"})())

    //var colorVal =  'rgba(255, 0, 0, 1)';
    console.log(colorVal, this.state)
    var divstyle = {
      backgroundColor: colorVal,
      width: '' + this.state.size + 'px',
      height: '' + this.state.size + 'px'
    }
    return <div style={divstyle}></div>
  }

});

module.exports = Pixel;

works, but replace the function() { ... } with () => { ... }

var React = require('react');

var Pixel = React.createClass({

  getInitialState: () => {
    return {
      red:  this.props.red || 0,
      green: this.props.green || 0,
      blue:  this.props.blue || 0,
      alpha:  this.props.alpha || 1,
      size: this.props.size || 5
    };
  },

  computeColor: () => {
    return 'rgba(' + [ this.state.red, this.state.green, this.state.blue, this.state.alpha ].join(', ') + ')';
  },

  render: () => {
    var colorVal = this.computeColor();
    console.log(((x) => {return "hello"})())

    //var colorVal =  'rgba(255, 0, 0, 1)';
    console.log(colorVal, this.state)
    var divstyle = {
      backgroundColor: colorVal,
      width: '' + this.state.size + 'px',
      height: '' + this.state.size + 'px'
    }
    return <div style={divstyle}></div>
  }

});

module.exports = Pixel;

and I get that very same error!

[nekman]

Not sure this has anything to do with your problem, but I had the same problem ReferenceError: Can't find variable: Reflect when using browserify + es6ify + karma.

It now works after changing (the deprecated) karma-plugin "karma-bro" to "karma-browserify".

[JoshuaKGoldberg]

Getting this using typescript+react+browserify+es6ify, without karma-bro or karma-browserify. Was there ever ever a resolution to the problem?