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/pkg-lib/src/runBuild.tsx

@@ -28,6 +28,53 @@ const resolveFbStubsToFbPlugin: Plugin = {
   },
 };
 
+const globalFallbackPlugin: Plugin = {
+  name: 'global-fallback',
+  setup(build) {
+    const pluginExternalModules: Record<string, string> = {
+      flipper: 'Flipper',
+      'flipper-plugin': 'FlipperPlugin',
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      'react-dom/client': 'ReactDOMClient',
+      'react-is': 'ReactIs',
+      antd: 'antd',
+      immer: 'Immer',
+      '@emotion/styled': 'emotion_styled',
+      '@emotion/css': 'emotion_css',
+      '@ant-design/icons': 'antdesign_icons',
+      'react/jsx-runtime': 'ReactJsxRuntime',
+    };
+
+    // Filter and modify the resolution of certain paths
+    build.onResolve(
+      {
+        filter: new RegExp(
+          `^(${Object.keys(pluginExternalModules).join('|')})$`,
+        ),
+      },
+      (args) => {
+        return {
+          path: args.path,
+          namespace: 'global-fallback',
+        };
+      },
+    );
+
+    // Load the module using the global fallback
+    build.onLoad({filter: /.*/, namespace: 'global-fallback'}, (args) => {
+      const globalName = pluginExternalModules[args.path];
+      return {
+        // contents: `export default window["${globalName}"];`,
+        contents: `const mod = window["${globalName}"];
+          for (const key in mod) {
+            exports[key] = mod[key];
+          }`,
+      };
+    });
+  },
+};
+
 interface RunBuildConfig {
   pluginDir: string;
   entry: string;
@@ -52,7 +99,7 @@ async function runBuild({
     bundle: true,
     outfile: out,
     platform: node ? 'node' : 'browser',
-    format: 'cjs',
+    format: 'esm',
     // This list should match `dispatcher/plugins.tsx` and `builtInModules` in `desktop/.eslintrc.js`
     external: [
       'flipper',
@@ -73,7 +120,10 @@ async function runBuild({
     ],
     sourcemap: dev ? 'inline' : 'external',
     minify: !dev,
-    plugins: intern ? [resolveFbStubsToFbPlugin] : undefined,
+    plugins: [
+      ...(intern ? [resolveFbStubsToFbPlugin] : []),
+      globalFallbackPlugin,
+    ],
     loader: {
       '.ttf': 'dataurl',
     },