Calypso Runtime Error in WP-Desktop: “globalThis is not defined”

[nsakaimbo]

Description

A recent change to Calypso has introduced a runtime error in WP-Desktop as of latest Calypso master (652ca9a).

Steps to Reproduce:

1. Build wp-desktop with latest Calypso master
2. Attempt to run the application (on Mac, double-click the built WordPress.com desktop app in the release/mac directory)
3. The application will display an error message like the following prior to shutting down:

ReferenceError: globalThis is not defined
    at Object.module.exports.Object.defineProperty.value (/Users/nsakaimbo/workspace/automattic/wp-desktop/release/mac/WordPress.com.app/Contents/Resources/app/build/desktop.js:39:4557)
    at n (/Users/nsakaimbo/workspace/automattic/wp-desktop/release/mac/WordPress.com.app/Contents/Resources/app/build/desktop.js:1:217)
    at Object.module.exports.Object.defineProperty.value (/Users/nsakaimbo/workspace/automattic/wp-desktop/release/mac/WordPress.com.app/Contents/Resources/app/build/desktop.js:531:276948)
    at n (/Users/nsakaimbo/workspace/automattic/wp-desktop/release/mac/WordPress.com.app/Contents/Resources/app/build/desktop.js:1:217)
    at Object.<anonymous> (/Users/nsakaimbo/workspace/automattic/wp-desktop/release/mac/WordPress.com.app/Contents/Resources/app/build/desktop.js:531:275577)
    at n (/Users/nsakaimbo/workspace/automattic/wp-desktop/release/mac/WordPress.com.app/Contents/Resources/app/build/desktop.js:1:217)
    at Object.module.exports.Object.defineProperty.value (/Users/nsakaimbo/workspace/automattic/wp-desktop/release/mac/WordPress.com.app/Contents/Resources/app/build/desktop.js:531:262480)
    at n (/Users/nsakaimbo/workspace/automattic/wp-desktop/release/mac/WordPress.com.app/Contents/Resources/app/build/desktop.js:1:217)
    at Object.module.exports.Object.defineProperty.value (/Users/nsakaimbo/workspace/automattic/wp-desktop/release/mac/WordPress.com.app/Contents/Resources/app/build/desktop.js:531:250492)
    at n (/Users/nsakaimbo/workspace/automattic/wp-desktop/release/mac/WordPress.com.app/Contents/Resources/app/build/desktop.js:1:217)
// ...

Notes: The last known good SHA of Calypso in WP-Desktop is b288baa, and I first encountered this error when trying to merge a838790, indicating the breaking change was introduced into Calypso somewhere between those commits.

[jsnajdr]

I think it was broken in #38560 by @sgomes, as he added a usage of globalThis.fetch.

The problem is that globalThis is not polyfilled in the desktop app. We'll have a very nice fix once #38660 is merged and the @automattic/calypso-polyfills package is published. Then we can add

require( '@automattic/calypso-polyfills' );

at the beginning of desktop/index.js

The fastest hotfix right now should be to define the globalThis global at the beginning of desktop/index.js:

globalThis = global;

[nsakaimbo]

@jsnajdr I just tried the above fix and that didn't seem to work. 🤔 Added globalThis to desktop/index.js so it looks like:

const globalThis = global;
/**
 * Internal dependencies
 */
require( './app' )();

This blog post seems to indicate that polyfilling globalThis may be a little more involved? Seems there are some recent plugins that might be worth trying.

[sgomes]

@jsnajdr I just tried the above fix and that didn't seem to work. 🤔 Added globalThis to desktop/index.js so it looks like:

const globalThis = global;
/**
 * Internal dependencies
 */
require( './app' )();

This blog post seems to indicate that polyfilling globalThis may be a little more involved? Seems there are some recent plugins that might be worth trying.

const globalThis = global; will not work, as it creates a new constant that's local to the current module. You need to create a global globalThis object, available across every module. For this, you'd need to remove the const from your code and use what @jsnajdr suggested verbatim, or use the following instead: global.globalThis = global. Which is super ugly 😄

A full polyfill is indeed more complex, but it covers a lot more details.

FWIW, I intend to merge #38660 tomorrow, so if you're ok with waiting until then you can implement the cleaner solution that @jsnajdr mentioned first! 👍

[nsakaimbo]

Thanks for the pointer and the education, @sgomes! Totally fine to wait until the cleaner approach is merged and we can test that out instead.

[sgomes]

Update: this has now been merged, and I believe @jsnajdr is looking into the desktop fix.

[jsnajdr]

Yes, we need to publish the @automattic/calypso-polyfills package to npm and then use it in wp-desktop.

[nsakaimbo]

The change in wp-desktop #743 looks good. We should verify that latest Calypso can build with wp-desktop after that PR lands before closing this issue out.