expo 55.0.0-canary-20260119-17896bf → 55.0.0-canary-20260120-bb71700

package/src/Expo.fx.tsx

@@ -4,8 +4,7 @@ import './async-require';
 import 'expo-asset';
 import 'expo/virtual/rsc';
 
-import Constants from 'expo-constants';
-import { AppRegistry, NativeModules, LogBox, Platform } from 'react-native';
+import { AppRegistry, NativeModules, LogBox } from 'react-native';
 
 import { isRunningInExpoGo } from './environment/ExpoGo';
 import { AppEntryNotFound } from './errors/AppEntryNotFound';
@@ -26,29 +25,6 @@ if (isRunningInExpoGo()) {
   ErrorUtils.setGlobalHandler(createErrorHandler(globalHandler));
 }
 
-// Warn if the New Architecture is not explicitly enabled in the app config and we are running in Expo Go.
-// This could be problematic because you will be developing your app with the New Architecture enabled and
-// but your builds will have the New Architecture disabled.
-if (__DEV__ && isRunningInExpoGo() && process.env.NODE_ENV === 'development') {
-  (['android', 'ios'] as const).forEach((platform) => {
-    const newArchPlatformConfig = Constants.expoConfig?.[platform]?.newArchEnabled;
-    const newArchRootConfig = Constants.expoConfig?.newArchEnabled;
-
-    const isNewArchExplicitlyDisabled =
-      newArchPlatformConfig === false ||
-      (newArchPlatformConfig === undefined && newArchRootConfig === false);
-
-    if (Platform.OS === platform && isNewArchExplicitlyDisabled) {
-      // Wrap it in rAF to show the warning after the React Native DevTools message
-      requestAnimationFrame(() => {
-        console.warn(
-          `🚨 React Native's New Architecture is always enabled in Expo Go, but it is explicitly disabled in your project's app config. This may lead to unexpected behavior when creating a production or development build. Remove "newArchEnabled": false from your app.json.\nLearn more: https://docs.expo.dev/guides/new-architecture/`
-        );
-      });
-    }
-  });
-}
-
 // Disable the "Open debugger to view warnings" React Native DevTools warning in
 // Expo Go and expo-dev-client, because launching the debugger from there will not
 // get the correct JS target.

package/src/Expo.fx.web.tsx

@@ -9,9 +9,9 @@ import 'expo/virtual/rsc';
 if (__DEV__) {
   if (
     // Skip mocking if someone is shimming this value out.
-    !('__fbBatchedBridgeConfig' in global)
+    !('__fbBatchedBridgeConfig' in globalThis)
   ) {
-    Object.defineProperty(global, '__fbBatchedBridgeConfig', {
+    Object.defineProperty(globalThis, '__fbBatchedBridgeConfig', {
       get() {
         throw new Error(
           "Your web project is importing a module from 'react-native' instead of 'react-native-web'. Learn more: https://expo.fyi/fb-batched-bridge-config-web"

package/src/Expo.ts

@@ -18,6 +18,9 @@ export {
   requireNativeViewManager as requireNativeView,
   registerWebModule,
   reloadAppAsync,
+
+  // Worklets
+  installOnUIRuntime,
 } from 'expo-modules-core';
 
 export type {

package/src/__tests__/__fbBatchedBridgeConfig-test.ts

@@ -6,14 +6,18 @@ jest.mock('../async-require/getDevServer');
 
 if (Platform.OS === 'web') {
   it('provides a helpful error message on web', () => {
+    const error =
+      /Your web project is importing a module from 'react-native' instead of 'react-native-web'/;
     // @ts-ignore
-    expect(() => global.__fbBatchedBridgeConfig).toThrow(
-      /Your web project is importing a module from 'react-native' instead of 'react-native-web'/
-    );
+    expect(() => global.__fbBatchedBridgeConfig).toThrow(error);
+    // @ts-ignore
+    expect(() => globalThis.__fbBatchedBridgeConfig).toThrow(error);
   });
 } else {
   it(`does not change the functionality of __fbBatchedBridgeConfig on native`, () => {
     // @ts-ignore
     expect(() => global.__fbBatchedBridgeConfig).not.toThrow();
+    // @ts-ignore
+    expect(() => globalThis.__fbBatchedBridgeConfig).not.toThrow();
   });
 }

package/src/async-require/asyncRequireModule.ts

@@ -20,8 +20,8 @@ type DependencyMapPaths = { [moduleID: number | string]: unknown } | null;
 declare let __METRO_GLOBAL_PREFIX__: string;
 
 function maybeLoadBundle(moduleID: number, paths: DependencyMapPaths): void | Promise<void> {
-  const loadBundle: (bundlePath: unknown) => Promise<void> = (global as any)[
-    `${__METRO_GLOBAL_PREFIX__}__loadBundleAsync`
+  const loadBundle: (bundlePath: unknown) => Promise<void> = (globalThis as any)[
+    `${__METRO_GLOBAL_PREFIX__ ?? ''}__loadBundleAsync`
   ];
 
   if (loadBundle != null) {

package/src/async-require/buildErrors.ts

@@ -0,0 +1,14 @@
+import { withoutANSIColorStyles } from '@expo/log-box/utils';
+
+export class HMRMetroBuildError extends Error {
+  public originalMessage: string;
+
+  constructor(message: string = 'Unknown Metro Error', type?: string, cause?: Error) {
+    super(message);
+    this.name = type || 'BuildError';
+    this.cause = cause;
+    this.originalMessage = [type, message].filter(Boolean).join(': ');
+    this.message = withoutANSIColorStyles(message);
+    this.stack = '';
+  }
+}

package/src/async-require/getDevServer.ts

@@ -1,3 +1,5 @@
+import { getFullBundlerUrl } from './getFullBundlerUrl';
+
 const getDevServer = () => {
   // Disable for SSR
   if (typeof window === 'undefined') {
@@ -14,15 +16,7 @@ const getDevServer = () => {
 
     /** URL but ensures that platform query param is added. */
     get fullBundleUrl() {
-      if (document?.currentScript && 'src' in document.currentScript) {
-        return document.currentScript.src;
-      }
-
-      const bundleUrl = new URL(location.href);
-
-      bundleUrl.searchParams.set('platform', 'web');
-
-      return bundleUrl.toString();
+      return getFullBundlerUrl();
     },
     url: location.origin + location.pathname,
   };

package/src/async-require/getFullBundlerUrl.ts

@@ -0,0 +1,13 @@
+export function getFullBundlerUrl(): string {
+  const currentScript = document?.currentScript;
+  const bundleUrl = new URL(
+    currentScript && 'src' in currentScript ? currentScript.src : location.href,
+    location.href
+  );
+
+  if (!bundleUrl.searchParams.has('platform')) {
+    bundleUrl.searchParams.set('platform', process.env.EXPO_OS ?? 'web');
+  }
+
+  return bundleUrl.toString();
+}

package/src/async-require/hmr.ts

@@ -10,35 +10,24 @@
  */
 import MetroHMRClient from '@expo/metro/metro-runtime/modules/HMRClient';
 import prettyFormat, { plugins } from 'pretty-format';
-import { DeviceEventEmitter } from 'react-native';
 
-// Ensure events are sent so custom Fast Refresh views are shown.
-function showLoading(message: string, _type: 'load' | 'refresh') {
-  DeviceEventEmitter.emit('devLoadingView:showMessage', {
-    message,
-  });
-}
-
-function hideLoading() {
-  DeviceEventEmitter.emit('devLoadingView:hide', {});
-}
+import {
+  getConnectionError,
+  getFullBundlerUrl,
+  handleCompileError,
+  hideLoading,
+  resetErrorOverlay,
+  showLoading,
+} from './hmrUtils';
 
 const pendingEntryPoints: string[] = [];
 
 // @ts-expect-error: Account for multiple versions of pretty-format inside of a monorepo.
 const prettyFormatFunc = typeof prettyFormat === 'function' ? prettyFormat : prettyFormat.default;
 
-type HMRClientType = {
-  send: (msg: string) => void;
-  isEnabled: () => boolean;
-  disable: () => void;
-  enable: () => void;
-  hasPendingUpdates: () => boolean;
-};
-
-let hmrClient: HMRClientType | null = null;
+let hmrClient: MetroHMRClient | null = null;
 let hmrUnavailableReason: string | null = null;
-let currentCompileErrorMessage: string | null = null;
+const buildErrorQueue = new Set<unknown>();
 let didConnect: boolean = false;
 const pendingLogs: [LogLevel, any[]][] = [];
 
@@ -53,14 +42,6 @@ type LogLevel =
   | 'groupEnd'
   | 'debug';
 
-export type HMRClientNativeInterface = {
-  enable(): void;
-  disable(): void;
-  registerBundle(requestUrl: string): void;
-  log(level: LogLevel, data: any[]): void;
-  setup(props: { isEnabled: boolean }): void;
-};
-
 function assert(foo: any, msg: string): asserts foo {
   if (!foo) throw new Error(msg);
 }
@@ -69,7 +50,7 @@ function assert(foo: any, msg: string): asserts foo {
  * HMR Client that receives from the server HMR updates and propagates them
  * runtime to reflects those changes.
  */
-const HMRClient: HMRClientNativeInterface = {
+const HMRClient = {
   enable() {
     if (hmrUnavailableReason !== null) {
       // If HMR became unavailable while you weren't using it,
@@ -127,12 +108,19 @@ const HMRClient: HMRClientNativeInterface = {
       return;
     }
     try {
+      const webMetadata =
+        process.env.EXPO_OS === 'web'
+          ? {
+              platform: 'web',
+              mode: 'BRIDGE',
+            }
+          : undefined;
       hmrClient.send(
         JSON.stringify({
+          // TODO: Type this properly.
+          ...webMetadata,
           type: 'log',
           level,
-          platform: 'web',
-          mode: 'BRIDGE',
           data: data.map((item) =>
             typeof item === 'string'
               ? item
@@ -154,50 +142,63 @@ const HMRClient: HMRClientNativeInterface = {
 
   // Called once by the bridge on startup, even if Fast Refresh is off.
   // It creates the HMR client but doesn't actually set up the socket yet.
-  setup({ isEnabled }: { isEnabled: boolean }) {
-    assert(!hmrClient, 'Cannot initialize hmrClient twice');
-
-    const serverScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
-    const client = new MetroHMRClient(`${serverScheme}://${window.location.host}/hot`);
-    hmrClient = client;
+  setup(
+    platformOrOptions: string | { isEnabled: boolean },
+    bundleEntry?: string,
+    host?: string,
+    port?: number | string,
+    isEnabledOrUndefined?: boolean,
+    scheme: string = 'http'
+  ) {
+    let isEnabled = !!isEnabledOrUndefined;
+    let serverScheme: string;
+    let serverHost: string;
+
+    if (process.env.EXPO_OS === 'web') {
+      assert(
+        platformOrOptions && typeof platformOrOptions === 'object',
+        'Expected platformOrOptions to be an options object on web.'
+      );
+      assert(!hmrClient, 'Cannot initialize hmrClient twice');
+      isEnabled = platformOrOptions.isEnabled;
 
-    const fullBundleUrl = (() => {
-      const currentScript = document?.currentScript;
-      const bundleUrl = new URL(
-        currentScript && 'src' in currentScript ? currentScript.src : location.href,
-        location.href
+      serverScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+      serverHost = window.location.host;
+    } else {
+      assert(
+        platformOrOptions && typeof platformOrOptions === 'string',
+        'Missing required parameter `platform`'
       );
+      assert(bundleEntry, 'Missing required parameter `bundleEntry`');
+      assert(host, 'Missing required parameter `host`');
+      assert(!hmrClient, 'Cannot initialize hmrClient twice');
 
-      if (!bundleUrl.searchParams.has('platform')) {
-        bundleUrl.searchParams.set('platform', process.env.EXPO_OS ?? 'web');
-      }
+      serverHost = port !== null && port !== '' ? `${host}:${port}` : host;
+      serverScheme = scheme;
+    }
 
-      return bundleUrl.toString();
-    })();
+    const origin = `${serverScheme}://${serverHost}`;
+    const client = new MetroHMRClient(`${origin}/hot`);
+    hmrClient = client;
 
     pendingEntryPoints.push(
       // HMRServer understands regular bundle URLs, so prefer that in case
       // there are any important URL parameters we can't reconstruct from
       // `setup()`'s arguments.
-      fullBundleUrl
+      getFullBundlerUrl({
+        serverScheme,
+        serverHost,
+        bundleEntry,
+        platform: typeof platformOrOptions === 'string' ? platformOrOptions : undefined,
+      })
     );
 
     client.on('connection-error', (e: Error) => {
-      let error = `Cannot connect to Metro.
- 
- Try the following to fix the issue:
- - Ensure the Metro dev server is running and available on the same network as this device`;
-      error += `
- 
- URL: ${window.location.host}
- 
- Error: ${e.message}`;
-
-      setHMRUnavailableReason(error);
+      setHMRUnavailableReason(getConnectionError(serverHost, e));
     });
 
     client.on('update-start', ({ isInitialUpdate }: { isInitialUpdate?: boolean }) => {
-      currentCompileErrorMessage = null;
+      buildErrorQueue.clear();
       didConnect = true;
 
       if (client.isEnabled() && !isInitialUpdate) {
@@ -205,35 +206,32 @@ const HMRClient: HMRClientNativeInterface = {
       }
     });
 
-    client.on('update', ({ isInitialUpdate }: { isInitialUpdate?: boolean }) => {
-      if (client.isEnabled() && !isInitialUpdate) {
-        dismissRedbox();
-        // @ts-expect-error
-        globalThis.__expo_dev_resetErrors?.();
-        // LogBox.clearAllLogs();
+    client.on(
+      'update',
+      ({
+        isInitialUpdate,
+        added,
+        modified,
+        deleted,
+      }: {
+        isInitialUpdate?: boolean;
+        added: unknown[];
+        modified: unknown[];
+        deleted: unknown[];
+      }) => {
+        // NOTE(@krystofwoldrich): I don't know why sometimes empty updates are sent. But they should not reset the overlay.
+        const isEmpty = added.length === 0 && modified.length === 0 && deleted.length === 0;
+        if (client.isEnabled() && !isInitialUpdate && !isEmpty) {
+          resetErrorOverlay();
+        }
       }
-    });
+    );
 
     client.on('update-done', () => {
       hideLoading();
     });
 
-    client.on('error', (data: { type: string; message: string }) => {
-      hideLoading();
-
-      if (data.type === 'GraphNotFoundError') {
-        client.close();
-        setHMRUnavailableReason('Metro has restarted since the last edit. Reload to reconnect.');
-      } else if (data.type === 'RevisionNotFoundError') {
-        client.close();
-        setHMRUnavailableReason('Metro and the client are out of sync. Reload to reconnect.');
-      } else {
-        currentCompileErrorMessage = `${data.type} ${data.message}`;
-        if (client.isEnabled()) {
-          showCompileError();
-        }
-      }
-    });
+    client.on('error', (data) => this._onMetroError(data));
 
     client.on('close', (closeEvent?: { code: number; reason: string }) => {
       hideLoading();
@@ -262,6 +260,37 @@ const HMRClient: HMRClientNativeInterface = {
     registerBundleEntryPoints(hmrClient);
     flushEarlyLogs();
   },
+
+  // Related Metro error's formatting
+  // https://github.com/facebook/metro/blob/34bb8913ec4b5b02690b39d2246599faf094f721/packages/metro/src/lib/formatBundlingError.js#L36
+  _onMetroError(error: unknown) {
+    if (!hmrClient) {
+      return;
+    }
+
+    assert(typeof error === 'object' && error != null, 'Expected data to be an object');
+
+    hideLoading();
+
+    if ('type' in error) {
+      if (error.type === 'GraphNotFoundError') {
+        hmrClient.close();
+        setHMRUnavailableReason('Expo CLI has restarted since the last edit. Reload to reconnect.');
+        return;
+      } else if (error.type === 'RevisionNotFoundError') {
+        hmrClient.close();
+        setHMRUnavailableReason(
+          `Expo CLI and the ${process.env.EXPO_OS} client are out of sync. Reload to reconnect.`
+        );
+        return;
+      }
+    }
+
+    buildErrorQueue.add(error);
+    if (hmrClient.isEnabled()) {
+      showCompileError();
+    }
+  },
 };
 
 function setHMRUnavailableReason(reason: string) {
@@ -286,7 +315,7 @@ function setHMRUnavailableReason(reason: string) {
   }
 }
 
-function registerBundleEntryPoints(client: HMRClientType | null) {
+function registerBundleEntryPoints(client: MetroHMRClient | null) {
   if (hmrUnavailableReason != null) {
     // "Bundle Splitting – Metro disconnected"
     window.location.reload();
@@ -314,28 +343,14 @@ function flushEarlyLogs() {
   }
 }
 
-function dismissRedbox() {
-  // TODO(EvanBacon): Error overlay for web.
-}
-
 function showCompileError() {
-  if (currentCompileErrorMessage === null) {
+  if (buildErrorQueue.size === 0) {
     return;
   }
 
-  // Even if there is already a redbox, syntax errors are more important.
-  // Otherwise you risk seeing a stale runtime error while a syntax error is more recent.
-  dismissRedbox();
-
-  const message = currentCompileErrorMessage;
-  currentCompileErrorMessage = null;
-
-  const error = new Error(message);
-  // Symbolicating compile errors is wasted effort
-  // because the stack trace is meaningless:
-  // @ts-expect-error
-  error.preventSymbolication = true;
-  throw error;
+  const cause: any = buildErrorQueue.values().next().value;
+  buildErrorQueue.clear();
+  handleCompileError(cause);
 }
 
 export default HMRClient;

package/src/async-require/hmrUtils.native.ts

@@ -0,0 +1,97 @@
+// Based on https://github.com/facebook/react-native/blob/9ab95dd2b5746e8323ad1d65591d5a4ec7718790/packages/react-native/Libraries/Utilities/HMRClient.js
+
+// @ts-expect-error missing types
+import getDevServer from 'react-native/Libraries/Core/Devtools/getDevServer';
+import LogBox from 'react-native/Libraries/LogBox/LogBox';
+// @ts-expect-error missing types
+import NativeRedBox from 'react-native/Libraries/NativeModules/specs/NativeRedBox';
+import DevSettings from 'react-native/Libraries/Utilities/DevSettings';
+
+import { HMRMetroBuildError } from './buildErrors';
+
+export function showLoading(message: string, type: 'load' | 'refresh') {
+  const DevLoadingView = require('react-native/Libraries/Utilities/DevLoadingView').default;
+  DevLoadingView.showMessage(message, type);
+}
+
+export function hideLoading() {
+  const DevLoadingView = require('react-native/Libraries/Utilities/DevLoadingView').default;
+  DevLoadingView.hide();
+}
+
+export function resetErrorOverlay() {
+  dismissRedbox();
+  // @ts-expect-error clearAllLogs exists, but ts types are missing
+  LogBox.clearAllLogs();
+}
+
+export function reload() {
+  // @ts-expect-error missing types
+  DevSettings.reload('Bundle Splitting – Metro disconnected');
+}
+
+export function getFullBundlerUrl({
+  serverScheme,
+  serverHost,
+  bundleEntry,
+  platform,
+}: {
+  serverScheme: string;
+  serverHost: string;
+  bundleEntry: string;
+  platform: string;
+}): string {
+  return (
+    getDevServer().fullBundleUrl ??
+    `${serverScheme}://${serverHost}/hot?bundleEntry=${bundleEntry}&platform=${platform}`
+  );
+}
+
+export function getConnectionError(serverHost: string, e: Error): string {
+  let error = `Cannot connect to Expo CLI.
+
+Try the following to fix the issue:
+- Ensure that Expo dev server is running and available on the same network`;
+
+  if (process.env.EXPO_OS === 'android') {
+    error += `
+- Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
+- If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device`;
+  }
+
+  error += `
+
+URL: ${serverHost}
+
+Error: ${e.message}`;
+  return error;
+}
+
+function dismissRedbox() {
+  if (process.env.EXPO_OS === 'ios' && NativeRedBox != null && NativeRedBox.dismiss != null) {
+    NativeRedBox.dismiss();
+  } else {
+    const NativeExceptionsManager =
+      require('react-native/Libraries/Core/NativeExceptionsManager').default;
+    NativeExceptionsManager &&
+      NativeExceptionsManager.dismissRedbox &&
+      NativeExceptionsManager.dismissRedbox();
+  }
+}
+
+export function handleCompileError(cause: any) {
+  if (cause === null) {
+    return;
+  }
+
+  // Even if there is already a redbox, syntax errors are more important.
+  // Otherwise you risk seeing a stale runtime error while a syntax error is more recent.
+  dismissRedbox();
+
+  const LogBox = require('react-native/Libraries/LogBox/LogBox').default;
+  // The error is passed thru LogBox APIs directly to the parsing function.
+  // Won't log the error in devtools console
+  // (using throw would mangle the error message and print with ANSI
+  // because throw on native is processed as console.error)
+  LogBox.addException(new HMRMetroBuildError(cause.message, cause.type, cause.cause));
+}

package/src/async-require/hmrUtils.ts

@@ -0,0 +1,54 @@
+import { DeviceEventEmitter } from 'react-native';
+
+import { HMRMetroBuildError } from './buildErrors';
+import { getFullBundlerUrl as getFullBundlerUrlHelper } from './getFullBundlerUrl';
+
+export function getFullBundlerUrl(_: {
+  serverScheme?: string;
+  serverHost?: string;
+  bundleEntry?: string;
+  platform?: string;
+}): string {
+  return getFullBundlerUrlHelper();
+}
+
+export function showLoading(message: string, _type: 'load' | 'refresh') {
+  // Ensure events are sent so custom Fast Refresh views are shown.
+  DeviceEventEmitter.emit('devLoadingView:showMessage', {
+    message,
+  });
+}
+
+export function hideLoading() {
+  DeviceEventEmitter.emit('devLoadingView:hide', {});
+}
+
+export function resetErrorOverlay() {
+  // @ts-expect-error
+  globalThis.__expo_dev_resetErrors?.();
+}
+
+export function reload() {
+  // "Bundle Splitting – Metro disconnected"
+  window.location.reload();
+}
+
+export function getConnectionError(serverHost: string, e: Error): string {
+  return `
+Cannot connect to Expo CLI.
+
+Try the following to fix the issue:
+- Ensure the Expo dev server is running and available on the same network as this device
+
+URL: ${serverHost}
+
+Error: ${e.message}
+  `.trim();
+}
+
+export function handleCompileError(cause: any) {
+  if (!cause) {
+    return;
+  }
+  throw new HMRMetroBuildError(cause.message, cause.type, cause.cause);
+}

package/src/async-require/index.ts

@@ -7,4 +7,4 @@
 import { buildAsyncRequire } from './buildAsyncRequire';
 
 // @ts-ignore: ignore the global which may not always be defined in jest environments.
-global[`${global.__METRO_GLOBAL_PREFIX__ ?? ''}__loadBundleAsync`] = buildAsyncRequire();
+globalThis[`${globalThis.__METRO_GLOBAL_PREFIX__ ?? ''}__loadBundleAsync`] = buildAsyncRequire();

package/src/async-require/setupFastRefresh.ts

@@ -1,7 +1,7 @@
 // This needs to run before the renderer initializes.
 
 const ReactRefreshRuntime = require('react-refresh/runtime');
-ReactRefreshRuntime.injectIntoGlobalHook(global);
+ReactRefreshRuntime.injectIntoGlobalHook(globalThis);
 
 const Refresh = {
   performFullRefresh() {
@@ -27,4 +27,5 @@ const Refresh = {
 
 // The metro require polyfill can not have dependencies (applies for all polyfills).
 // Expose `Refresh` by assigning it to global to make it available in the polyfill.
-global[(global.__METRO_GLOBAL_PREFIX__ || '') + '__ReactRefresh'] = Refresh;
+// @ts-ignore: ignore the global which may not always be defined in jest environments.
+globalThis[(globalThis.__METRO_GLOBAL_PREFIX__ ?? '') + '__ReactRefresh'] = Refresh;