HMR issue with jsx-loader

[fredericlb]

Hi,

I'm having a strange issue when HMR is used with jsx-loader, but I can't find who is responsible for this.

Say I have this class :

var Record = require("immutable").Record;
var BaseRecord = Record({x: 0, y: 0, space: "TEST"});

class Point extends BaseRecord {

    toScreen(screen, viewport) {
            /** STUFF **/
            return Point.screen(width * (xw / bw), height * (yh / bh), "SCREEN");
    }

    toGraph(screen, viewport) {
            /** STUFF **/
            return Point.graph(l + (bw * (x / width)),t + (bh * (y / height)), "GRAPH");
    }

    static graph(x,y){ return new Point({x: x, y: y, space: "GRAPH"}) }
    static screen(x,y){ return new Point({x: x, y: y, space: "SPACE"}) }
}


module.exports = Point;

jsx-loader, when going through react-tools, converts it in this form :

var Record = __webpack_require__(/*! immutable */ 162).Record;

var BaseRecord = Record({x: 0, y: 0, space: "TEST"});

for(var BaseRecord____Key in BaseRecord){if(BaseRecord.hasOwnProperty(BaseRecord____Key)){Point[BaseRecord____Key]=BaseRecord[BaseRecord____Key];}}var ____SuperProtoOfBaseRecord=BaseRecord===null?null:BaseRecord.prototype;Point.prototype=Object.create(____SuperProtoOfBaseRecord);Point.prototype.constructor=Point;Point.__superConstructor__=BaseRecord;function Point(){"use strict";if(BaseRecord!==null){BaseRecord.apply(this,arguments);}}

    Point.prototype.toScreen=function(screen, viewport) {"use strict";
/** STUFF */
            return Point.screen(width * (xw / bw), height * (yh / bh), "SCREEN");
    };

    Point.prototype.toGraph=function(screen, viewport) {"use strict";
/** STUFF */
            return Point.graph(l + (bw * (x / width)),t + (bh * (y / height)), "GRAPH");
    };

    Point.graph=function(x,y){"use strict"; return new Point({x: x, y: y, space: "GRAPH"}) };
    Point.screen=function(x,y){"use strict";  return new Point({x: x, y: y, space: "SPACE"}) };



module.exports = Point;


/*****************
 ** WEBPACK FOOTER
 ** ./app/Data/Point.js
 ** module id = 212
 ** module chunks = 0
 **/

and it works great until HMR reload this module. Then, when calling Point.graph or Point.screen,
I have this error :

Uncaught ReferenceError: BaseRecord is not defined
Point.js:5 Point
Point.js:39 Point.screen

I don't have any clue why this happens, and it's pretty difficult to find the culprit since I don't know anything about the internals of Webpack.

[sokra]

see #417

[fredericlb]

Thanks, writing "use strict" explicitely works great as a workaround !