Fixed the double bundling of react

theatre/devEnv/buildUtils.ts

@@ -19,7 +19,29 @@ export function createBundles(watch: boolean) {
       sourcemap: true,
       define: definedGlobals,
       watch,
-      external: ['@theatre/dataverse'],
+      external: [
+        '@theatre/dataverse',
+        /**
+         * Prevents double-bundling react.
+         *
+         * @notes
+         * Ideally we'd want to just bundle our own fixed version of react to keep things
+         * simple, but for now we keep react external because we're exposing these
+         * react-dependant API from @theatre/studio:
+         *
+         * - ToolbarIconButton
+         * - IStudio['extend']({globalToolbar: {component}})
+         *
+         * These are further exposed by @theatre/plugin-r3f which provides `<Wrapper />`
+         * as an API.
+         *
+         * It's probably possible to bundle our own react version and somehow share it
+         * with the plugins, but that's not urgent atm.
+         */
+        'react',
+        'react-dom',
+        'styled-components',
+      ],
     }
 
     if (which === 'core') {
@@ -35,6 +57,14 @@ export function createBundles(watch: boolean) {
       format: 'cjs',
     })
 
+    /**
+     * @notes
+     * I just disabled ESM builds because I couldn't get them to work
+     * with create-react-app which uses webpack v4. I'm sure that's fixable,
+     * but not worth the hassle right now. There is not much to tree-shake
+     * in @theatre/core as we've done all the tree-shaking pre-bundle already.
+     */
+
     // build({
     //   ...esbuildConfig,
     //   outfile: path.join(pathToPackage, 'dist/index.mjs'),