ESM plugin bundles

Summary:
This change will allow us to display correct stack traces in flipper UI as well as send them to scuba.

Currently correct stack traces are only displayed in the console and we do not have access to them.

Reviewed By: ivanmisuno

Differential Revision: D50015827

fbshipit-source-id: 2a60315dd5c06b2635ce0414f612ff1fdca0e489

desktop/flipper-ui-browser/src/initializeRenderHost.tsx

@@ -177,25 +177,19 @@ export function initializeRenderHost(
     },
     flipperServer,
     async requirePlugin(path): Promise<{plugin: any; css?: string}> {
+      /** path to bundle.js from project root */
+      const staticPath = path.includes('/static/')
+        ? path.split('/static/', 2).pop()
+        : path.split('/desktop/', 2).pop();
+      // This is a string as server side is transpiled by typescript.
+      // Typescript transpiles dynamic import calls to `require` in the browser bundle
+      // We want to explicilty use dynamic import here
+      const importStr = `import('/${staticPath}?ts=${Date.now()}')`;
       const source = await flipperServer.exec('plugin-source', path);
-
-      let js = source.js;
-      // append source url (to make sure a file entry shows up in the debugger)
-      js += `\n//# sourceURL=file://${path}`;
-      if (isProduction()) {
-        // and source map url (to get source code if available)
-        js += `\n//# sourceMappingURL=file://${path}.map`;
-      }
-
-      // Plugins are compiled as typical CJS modules, referring to the global
-      // 'module', which we'll make available by loading the source into a closure that captures 'module'.
-      // Note that we use 'eval', and not 'new Function', because the latter will cause the source maps
-      // to be off by two lines (as the function declaration uses two lines in the generated source)
       // eslint-disable-next-line no-eval
-      const cjsLoader = eval('(module) => {' + js + '\n}');
-      const theModule = {exports: {}};
-      cjsLoader(theModule);
-      return {plugin: theModule.exports, css: source.css};
+      const importRes = await eval(importStr);
+
+      return {plugin: importRes, css: source.css};
     },
     getStaticResourceUrl(path): string {
       // the 'static' folder is mounted as static middleware in Express at the root