pre-compile error overlay to avoid duplicate react dependencies

Author: devongovett

gulpfile.js

@@ -21,6 +21,7 @@ const IGNORED_PACKAGES = [
   '!packages/core/utils/**',
   '!packages/reporters/cli/**',
   '!packages/reporters/dev-server/**',
+  '!packages/utils/error-overlay/**',
 ];
 
 const paths = {

package.json

@@ -12,7 +12,7 @@
   ],
   "scripts": {
     "build": "yarn build-bundles && cross-env NODE_ENV=production PARCEL_BUILD_ENV=production gulp",
-    "build-bundles": "rimraf --glob packages/*/*/lib && cross-env NODE_ENV=production PARCEL_BUILD_ENV=production PARCEL_SELF_BUILD=true parcel build --no-cache packages/core/{fs,codeframe,package-manager,utils} packages/reporters/{cli,dev-server} packages/utils/{parcel-lsp,parcel-lsp-protocol,parcel-watcher-watchman-js}",
+    "build-bundles": "rimraf --glob packages/*/*/lib && cross-env NODE_ENV=production PARCEL_BUILD_ENV=production PARCEL_SELF_BUILD=true parcel build --no-cache packages/core/{fs,codeframe,package-manager,utils} packages/reporters/{cli,dev-server} packages/utils/{parcel-lsp,parcel-lsp-protocol,parcel-watcher-watchman-js,error-overlay}",
     "build-ts": "lerna run build-ts && lerna run check-ts",
     "build-native": "node scripts/build-native.js",
     "build-native-release": "node scripts/build-native.js --release",

packages/transformers/js/core/src/dependency_collector.rs

@@ -1510,6 +1510,22 @@ impl<'a> DependencyCollector<'a> {
         if let Some((name, span)) = name {
           match name.as_str() {
             "distDir" => {
+              if self.config.is_library {
+                return if self.config.is_esm_output {
+                  Some(Expr::Member(member_expr!(
+                    Default::default(),
+                    span,
+                    import.meta.distDir
+                  )))
+                } else {
+                  Some(Expr::Member(member_expr!(
+                    Default::default(),
+                    span,
+                    parcelRequire.meta.distDir
+                  )))
+                };
+              }
+
               self.helpers |= Helpers::DIST_DIR;
               if self.config.scope_hoist {
                 Some(Expr::Ident(Ident::new_no_ctxt(
@@ -1525,6 +1541,22 @@ impl<'a> DependencyCollector<'a> {
               }
             }
             "publicUrl" => {
+              if self.config.is_library {
+                return if self.config.is_esm_output {
+                  Some(Expr::Member(member_expr!(
+                    Default::default(),
+                    span,
+                    import.meta.publicUrl
+                  )))
+                } else {
+                  Some(Expr::Member(member_expr!(
+                    Default::default(),
+                    span,
+                    parcelRequire.meta.publicUrl
+                  )))
+                };
+              }
+
               self.helpers |= Helpers::PUBLIC_URL;
               if self.config.scope_hoist {
                 Some(Expr::Ident(Ident::new_no_ctxt(
@@ -1540,6 +1572,22 @@ impl<'a> DependencyCollector<'a> {
               }
             }
             "devServer" => {
+              if self.config.is_library {
+                return if self.config.is_esm_output {
+                  Some(Expr::Member(member_expr!(
+                    Default::default(),
+                    span,
+                    import.meta.devServer
+                  )))
+                } else {
+                  Some(Expr::Member(member_expr!(
+                    Default::default(),
+                    span,
+                    parcelRequire.meta.devServer
+                  )))
+                };
+              }
+
               self.helpers |= Helpers::DEV_SERVER;
               if self.config.scope_hoist {
                 Some(Expr::Ident(Ident::new_no_ctxt(

packages/utils/error-overlay/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/eslint-config",
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

packages/utils/error-overlay/package.json

@@ -13,14 +13,19 @@
     "type": "git",
     "url": "https://github.com/parcel-bundler/parcel.git"
   },
-  "main": "lib/index.js",
+  "module": "lib/index.js",
   "source": "src/index.js",
   "engines": {
     "node": ">= 16.0.0"
   },
-  "dependencies": {
+  "devDependencies": {
     "ansi-html-community": "0.0.8",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "preact": "^10.26.4"
+  },
+  "targets": {
+    "module": {
+      "includeNodeModules": true,
+      "optimize": true
+    }
   }
 }

packages/utils/error-overlay/src/components/CloseButton.js

@@ -6,7 +6,6 @@
  */
 
 /* @flow */
-import React from 'react';
 import {theme} from '../styles';
 
 const closeButtonStyle = {

packages/utils/error-overlay/src/components/CodeBlock.js

@@ -6,7 +6,6 @@
  */
 
 /* @flow */
-import React from 'react';
 import {theme} from '../styles';
 
 const _preStyle = {

packages/utils/error-overlay/src/components/Collapsible.js

@@ -6,11 +6,9 @@
  */
 
 /* @flow */
-import React, {useState} from 'react';
+import {useState} from 'preact/hooks';
 import {theme} from '../styles';
 
-import type {Element as ReactElement} from 'react';
-
 const _collapsibleStyle = {
   cursor: 'pointer',
   border: 'none',
@@ -38,7 +36,7 @@ const collapsibleExpandedStyle = {
 };
 
 type CollapsiblePropsType = {|
-  children: ReactElement<any>[],
+  children: React$Element<any>[],
 |};
 
 function Collapsible(props: CollapsiblePropsType): React$Element<'details'> {

packages/utils/error-overlay/src/components/ErrorOverlay.js

@@ -7,11 +7,9 @@
 
 /* eslint-env browser */
 /* @flow */
-import React, {useEffect} from 'react';
+import {useEffect} from 'preact/hooks';
 import {theme} from '../styles';
 
-import type {Node as ReactNode} from 'react';
-
 const overlayStyle = {
   position: 'relative',
   display: 'inline-flex',
@@ -33,7 +31,7 @@ const overlayStyle = {
 };
 
 type ErrorOverlayPropsType = {|
-  children: ReactNode,
+  children: React$Node,
   shortcutHandler?: (eventKey: string) => void,
 |};
 

packages/utils/error-overlay/src/components/Footer.js

@@ -6,7 +6,6 @@
  */
 
 /* @flow */
-import React from 'react';
 import {theme} from '../styles';
 
 const footerStyle = {

packages/utils/error-overlay/src/components/Header.js

@@ -6,7 +6,6 @@
  */
 
 /* @flow */
-import React from 'react';
 import {theme} from '../styles';
 
 const headerStyle = {

packages/utils/error-overlay/src/components/HydrationDiff.js

@@ -1,5 +1,4 @@
 /** @flow */
-import React from 'react';
 import {theme} from '../styles';
 
 const diffStyle = {

packages/utils/error-overlay/src/components/NavigationBar.js

@@ -6,7 +6,6 @@
  */
 
 /* @flow */
-import React from 'react';
 import {theme} from '../styles';
 
 const navigationBarStyle = {

packages/utils/error-overlay/src/containers/RuntimeError.js

@@ -6,7 +6,6 @@
  */
 
 /* @flow */
-import React from 'react';
 import Header from '../components/Header';
 import StackTrace from './StackTrace';
 

packages/utils/error-overlay/src/containers/RuntimeErrorContainer.js

@@ -6,7 +6,6 @@
  */
 
 /* @flow */
-import React from 'react';
 import ErrorOverlay from '../components/ErrorOverlay';
 import CloseButton from '../components/CloseButton';
 import NavigationBar from '../components/NavigationBar';
@@ -15,7 +14,7 @@ import Footer from '../components/Footer';
 
 import type {ErrorRecord} from './RuntimeError';
 import type {ErrorLocation} from '..';
-import {useState} from 'react';
+import {useState} from 'preact/hooks';
 
 type Props = {|
   errorRecords: ErrorRecord[],

packages/utils/error-overlay/src/containers/StackFrame.js

@@ -6,7 +6,7 @@
  */
 
 /* @flow */
-import React, {useState} from 'react';
+import {useState} from 'preact/hooks';
 import {theme} from '../styles';
 import CodeBlock from '../components/CodeBlock';
 import {getPrettyURL} from '../utils/getPrettyURL';

packages/utils/error-overlay/src/containers/StackTrace.js

@@ -6,7 +6,6 @@
  */
 
 /* @flow */
-import React from 'react';
 import StackFrame from './StackFrame';
 import Collapsible from '../components/Collapsible';
 import {isInternalFile} from '../utils/isInternalFile';

packages/utils/error-overlay/src/index.js

@@ -10,7 +10,7 @@
 /* @flow */
 import type {ErrorRecord} from './listenToRuntimeErrors';
 import {listenToRuntimeErrors, crashWithFrames} from './listenToRuntimeErrors';
-import {createRoot} from 'react-dom/client';
+import {render} from 'preact';
 import RuntimeErrorContainer from './containers/RuntimeErrorContainer';
 import {overlayStyle} from './styles';
 
@@ -96,33 +96,30 @@ export function stopReportingRuntimeErrors() {
   }
 }
 
-let rootNode;
-let root;
+let rootNode, shadow;
 
 function update() {
-  if (!root) {
+  if (!rootNode) {
     rootNode = document.createElement('parcel-error-overlay');
-    let shadow = rootNode.attachShadow({mode: 'open'});
+    shadow = rootNode.attachShadow({mode: 'open'});
     if (rootNode) {
       document.body?.appendChild(rootNode);
-      root = createRoot(shadow);
     }
   }
 
-  if (currentRuntimeErrorRecords.length > 0 && root) {
-    root.render(
+  if (currentRuntimeErrorRecords.length > 0 && shadow) {
+    render(
       <dialog
         ref={d => (d: any)?.showModal()}
         style={overlayStyle}
         onClose={dismissRuntimeErrors}
       >
         <ErrorOverlay />
       </dialog>,
+      shadow,
     );
   } else {
-    root?.unmount();
     rootNode?.remove();
-    root = null;
     rootNode = null;
   }
 }

packages/utils/error-overlay/src/listenToRuntimeErrors.js

@@ -21,7 +21,6 @@ import {
 } from './effects/stackTraceLimit';
 import getStackFrames from './utils/getStackFrames';
 import type {StackFrame} from './utils/stack-frame';
-import React from 'react';
 
 const CONTEXT_SIZE: number = 3;
 
@@ -108,24 +107,27 @@ function patchConsole(method: string, onError: (err: Error) => void) {
       error = args.find(arg => arg instanceof Error);
     }
 
-    if (error && !error.message.includes('[parcel]')) {
+    if (
+      error &&
+      !error.message.includes('[parcel]') &&
+      typeof window !== 'undefined' &&
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__
+    ) {
       // Attempt to append the React component stack
-      // $FlowFixMe
-      if (typeof React.captureOwnerStack === 'function') {
-        // $FlowFixMe
-        let stack = React.captureOwnerStack();
-        error.stack += stack;
-      } else {
-        const ReactSharedInternals =
-          // $FlowFixMe
-          React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ||
-          // $FlowFixMe
-          React.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
-
-        if (typeof ReactSharedInternals?.getCurrentStack === 'function') {
-          // $FlowFixMe
-          let stack = ReactSharedInternals.getCurrentStack();
-          error.stack += stack;
+      // TODO: use React.captureOwnerStack once stable.
+      let hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      if (hook.renderers instanceof Map) {
+        for (let renderer of hook.renderers.values()) {
+          if (
+            typeof renderer?.currentDispatcherRef?.getCurrentStack ===
+            'function'
+          ) {
+            let stack = renderer.currentDispatcherRef.getCurrentStack();
+            if (stack) {
+              error.stack += stack;
+              break;
+            }
+          }
         }
       }