'this' is undefined on the server side

[SoonDead]

Upon upgrading to 2.0 the server side rendering broke:

To render numbers and dates in an i18n compatible way I'm using numeral.js and moment.js. Both of them are written in a way that uses this as the global object, like

(function () {
    // here, `this` means `window` in the browser, or `global` on the server
    // add `numeral` as a global object via a string identifier,
    // for Closure Compiler 'advanced' mode
    this['numeral'] = numeral;
}).call(this);

Or

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    global.moment = factory()
}(this, function () {
    var _moment;
    ......
    return _moment;
});

They are both valid in a browser or a node.js environment, but the following fails:

ReactConfig.cs:

ReactSiteConfiguration.Configuration
    .AddScript("~/Scripts/numeral.js")
    .AddScript("~/Scripts/my-component.js");

Index.cshtml:

@Html.React("MyComponent", new { prop1 = "prop" })

Since it cannot set the property 'numeral' of undefined.

This pretty much blocks me from upgrading to React.Core 2.0 and therefore React 0.14.

[Daniel15]

Thanks for the report, I'll take a look this weekend. This may be due to how Babel handles this compared to JSXTransformer. In the meantime, feel free to downgrade to the previous ReactJS.NET version.

[Daniel15]

Looks like I need to blacklist the "strict" transformer. From the Babel docs:

Why is this being remapped to undefined?

Babel assumes that all input code is an ES2015 module. ES2015 modules are implicitly strict mode so this means that top-level this is not window in the browser nor is it exports in node.

If you don't want this behaviour then you have the option of disabling the strict transformer:

$ babel --blacklist strict script.js

require("babel").transform("code", { blacklist: ["strict"] });

You could try hacking this into the ReactJS.NET Babel config:

{"blacklist", new List<string> { "strict" } }

If you do try that out, let me know if it works :)

[Daniel15]

Fixed in 2.0.1, thanks for reporting!

[SoonDead]

Works perfectly, thanks!