ci: test cache

app/components/UI/Earn/components/Musd/ConvertTokenRow/index.tsx

@@ -18,8 +18,7 @@ import {
   ButtonIcon,
   ButtonIconSize,
   IconSize,
-} from '@metamask/design-system-react-native';
-import { Spinner } from '@metamask/design-system-react-native/spinner';
+ Spinner } from '@metamask/design-system-react-native';
 import { strings } from '../../../../../../../locales/i18n';
 import { AvatarSize } from '../../../../../../component-library/components/Avatars/Avatar';
 import { useNetworkName } from '../../../../../Views/confirmations/hooks/useNetworkName';

app/components/UI/Earn/hooks/useEarnToasts.tsx

@@ -17,8 +17,7 @@ import {
   ToastVariants,
 } from '../../../../component-library/components/Toast/Toast.types';
 import { useAppThemeFromContext } from '../../../../util/theme';
-import { Spinner } from '@metamask/design-system-react-native/spinner';
-import {
+import { Spinner ,
   IconSize as ReactNativeDsIconSize,
   Text,
   TextColor,

app/components/UI/Perps/components/PerpsWebSocketHealthToast/PerpsWebSocketHealthToast.test.tsx

@@ -41,13 +41,10 @@ jest.mock('../../../../../component-library/components/Icons/Icon', () => ({
   IconColor: { Error: 'Error', Warning: 'Warning', Success: 'Success' },
 }));
 
-jest.mock('@metamask/design-system-react-native/spinner', () => ({
-  Spinner: () => null,
-}));
-
 jest.mock('@metamask/design-system-react-native', () => ({
   IconColor: { PrimaryDefault: 'PrimaryDefault' },
   IconSize: { Md: 'Md' },
+  Spinner: () => null,
 }));
 
 jest.mock('../../../../../../locales/i18n', () => ({

app/components/UI/Perps/components/PerpsWebSocketHealthToast/PerpsWebSocketHealthToast.tsx

@@ -10,8 +10,7 @@ import {
 import {
   IconColor as ReactNativeDsIconColor,
   IconSize as ReactNativeDsIconSize,
-} from '@metamask/design-system-react-native';
-import { Spinner } from '@metamask/design-system-react-native/spinner';
+ Spinner } from '@metamask/design-system-react-native';
 import { useStyles } from '../../../../../component-library/hooks';
 import Text, {
   TextVariant,

app/components/UI/Perps/hooks/usePerpsToasts.tsx

@@ -3,8 +3,7 @@ import {
   IconSize as ReactNativeDsIconSize,
   Text,
   TextVariant,
-} from '@metamask/design-system-react-native';
-import { Spinner } from '@metamask/design-system-react-native/spinner';
+ Spinner } from '@metamask/design-system-react-native';
 import { useNavigation } from '@react-navigation/native';
 import {
   playNotification,

app/components/UI/Perps/hooks/usePerpsWithdrawToastRegistrations.tsx

@@ -2,8 +2,7 @@ import {
   Box,
   IconColor as ReactNativeDsIconColor,
   IconSize as ReactNativeDsIconSize,
-} from '@metamask/design-system-react-native';
-import { Spinner } from '@metamask/design-system-react-native/spinner';
+ Spinner } from '@metamask/design-system-react-native';
 import {
   TransactionMeta,
   TransactionStatus,

app/components/UI/Predict/components/PredictBalance/PredictBalance.tsx

@@ -5,8 +5,7 @@ import {
   BoxJustifyContent,
   Text,
   TextColor,
-} from '@metamask/design-system-react-native';
-import { Spinner } from '@metamask/design-system-react-native/spinner';
+ Spinner } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import images from 'images/image-icons';
 import React, { useCallback, useEffect } from 'react';

app/components/UI/Predict/hooks/usePredictToastRegistrations.tsx

@@ -2,8 +2,7 @@ import {
   Box,
   IconColor as ReactNativeDsIconColor,
   IconSize as ReactNativeDsIconSize,
-} from '@metamask/design-system-react-native';
-import { Spinner } from '@metamask/design-system-react-native/spinner';
+ Spinner } from '@metamask/design-system-react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback, useMemo } from 'react';

app/components/UI/Ramp/utils/v2OrderToast.ts

@@ -3,8 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import {
   IconColor as ReactNativeDsIconColor,
   IconSize as ReactNativeDsIconSize,
-} from '@metamask/design-system-react-native';
-import { Spinner } from '@metamask/design-system-react-native/spinner';
+ Spinner } from '@metamask/design-system-react-native';
 import { lightTheme } from '@metamask/design-tokens';
 import { strings } from '../../../../../locales/i18n';
 import { IconName } from '../../../../component-library/components/Icons/Icon';

app/components/Views/Homepage/Sections/Cash/MusdAggregatedRow.tsx

@@ -1,8 +1,6 @@
 import React, { useCallback } from 'react';
 import { Pressable, TouchableOpacity } from 'react-native';
-import { Spinner } from '@metamask/design-system-react-native/spinner';
-import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import {
+import { Spinner ,
   Box,
   Text,
   TextVariant,
@@ -15,6 +13,7 @@ import {
   AvatarTokenSize,
   IconColor,
 } from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import SensitiveText, {
   SensitiveTextLength,
 } from '../../../../../component-library/components/Texts/SensitiveText';

app/components/Views/confirmations/components/UI/highlighted-item/highlighted-item.tsx

@@ -15,8 +15,7 @@ import {
   Text,
   TextColor,
   TextVariant,
-} from '@metamask/design-system-react-native';
-import { Spinner } from '@metamask/design-system-react-native/spinner';
+ Spinner } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 
 import PaymentMethodIcon from '../../../../../UI/Ramp/Aggregator/components/PaymentMethodIcon';

babel.config.js

@@ -2,6 +2,53 @@ const ReactCompilerConfig = {
   target: '18',
 };
 
+// Hermes (RN's bytecode compiler) does not accept dynamic `import()` syntax —
+// even inside dead code branches — and aborts with "Invalid expression
+// encountered", producing a `.app` with no JS bundle.
+//
+// Some shared controllers (e.g. PerpsController) and third-party packages
+// (e.g. lilconfig) intentionally use `import(/* webpackIgnore: true */ x)` for
+// webpack code splitting. Those constructs only make sense for webpack-based
+// builds (extension); on Metro/Hermes they're parser-fatal.
+//
+// This visitor rewrites every `import(x)` call to
+// `Promise.resolve().then(() => require(x))`, mirroring what
+// babel-plugin-dynamic-import-node does, so Hermes never sees raw `import()`.
+// Inlined to avoid pulling in another dependency.
+//
+// eslint-disable-next-line import-x/no-commonjs
+const dynamicImportToRequire = ({ types: t }) => ({
+  name: 'transform-dynamic-import-to-require',
+  visitor: {
+    Import(path) {
+      const callExpr = path.parentPath;
+      if (!callExpr.isCallExpression()) {
+        return;
+      }
+      const arg = callExpr.node.arguments[0];
+      if (!arg) {
+        return;
+      }
+      const requireCall = t.callExpression(t.identifier('require'), [arg]);
+      const arrowFn = t.arrowFunctionExpression([], requireCall);
+      const replacement = t.callExpression(
+        t.memberExpression(
+          t.callExpression(
+            t.memberExpression(
+              t.identifier('Promise'),
+              t.identifier('resolve'),
+            ),
+            [],
+          ),
+          t.identifier('then'),
+        ),
+        [arrowFn],
+      );
+      callExpr.replaceWith(replacement);
+    },
+  },
+});
+
 // eslint-disable-next-line import-x/no-commonjs
 module.exports = {
   ignore: [
@@ -32,6 +79,7 @@ module.exports = {
       },
     ],
     'transform-inline-environment-variables',
+    dynamicImportToRequire,
     [
       'module-resolver',
       {