Reputation: 3774

Expo returns "Metro error: Unable to resolve module react-dom/server.node" error?

I have a new React Native Expo app that I've been developing, and I noticed recently that when opening a drawer or modal, I get the following error in my terminal:

λ Bundling failed 71ms node_modules/expo-router/node/render.js (1 module)

Metro error: Unable to resolve module react-dom/server.node from /Users/<me>/Documents/repositories/<project>/node_modules/expo-router/build/static/renderStaticContent.js: react-dom/server.node could not be found within the project or in these directories:
  node_modules/expo-router/node_modules
  node_modules
  38 | const Font = __importStar(require("expo-font/build/server"));
  39 | const react_1 = __importDefault(require("react"));
> 40 | const server_node_1 = __importDefault(require("react-dom/server.node"));
     |                                                ^
  41 | const react_native_web_1 = require("react-native-web");
  42 | const getRootComponent_1 = require("./getRootComponent");
  43 | const _ctx_1 = require("../../_ctx");


Call Stack
  <unknown> (node_modules/expo-router/build/static/renderStaticContent.js:0)
Web Bundling failed 3819ms node_modules/expo-router/entry.js (2427 modules)

My package.json as such:

{
  "name": "test_mobile",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "npx expo start",
    "android": "npx expo run:android",
    "ios": "npx expo run:ios",
    "web": "npx expo start --web",
    "lint": "eslint .",
    "postinstall": "patch-package",
    "typegen": "npx supabase gen types typescript --local public > ./types/index.ts && tsx scripts/generateEnums.ts",
  },
  "dependencies": {
    "@cloudinary/url-gen": "^1.20.0",
    "@dev-plugins/react-query": "^0.0.7",
    "@expo/html-elements": "0.4.2",
    "@gorhom/bottom-sheet": "5.0.0-alpha.10",
    "@hookform/resolvers": "^3.9.0",
    "@legendapp/motion": "^2.4.0",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-google-signin/google-signin": "^13.0.0",
    "@react-navigation/drawer": "^6.7.2",
    "@stripe/stripe-react-native": "0.37.2",
    "@supabase/supabase-js": "^2.45.2",
    "@tanstack/react-query": "^5.55.4",
    "axios": "^1.7.7",
    "babel-plugin-module-resolver": "^5.0.2",
    "dayjs": "^1.11.13",
    "expo": "^51.0.31",
    "expo-apple-authentication": "~6.4.2",
    "expo-build-properties": "~0.12.5",
    "expo-constants": "~16.0.2",
    "expo-dev-client": "~4.0.26",
    "expo-image": "~1.12.15",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.23",
    "expo-secure-store": "~13.0.2",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "jwt-decode": "^4.0.0",
    "lucide-react-native": "^0.436.0",
    "react": "18.2.0",
    "react-hook-form": "^7.53.0",
    "react-native": "0.74.5",
    "react-native-click-outside": "^0.1.1",
    "react-native-fbsdk-next": "^13.0.0",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-paper": "^5.12.5",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-svg": "15.2.0",
    "react-native-url-polyfill": "^2.0.0",
    "sonner-native": "^0.8.0",
    "stripe": "^16.10.0",
    "supabase": "^1.192.5",
    "zod": "^3.23.8",
    "zustand": "^4.5.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@dev-plugins/react-navigation": "^0.0.6",
    "@stylistic/eslint-plugin": "^2.6.4",
    "@tanstack/eslint-plugin-query": "^5.53.0",
    "@types/react": "~18.2.45",
    "babel-plugin-optional-require": "^0.3.1",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^8.57.0",
    "eslint-config-expo": "^7.1.2",
    "jscodeshift": "0.15.2",
    "patch-package": "^8.0.0",
    "prettier": "^3.3.3",
    "react-native-svg-transformer": "^1.5.0",
    "tsx": "^4.19.0",
    "typescript": "~5.3.3"
  },
  "private": true
}

And my app.json:

{
  "expo": {
    "name": "test_mobile",
    "slug": "test-mobile",
    "scheme": "test-mobile",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "platforms": ["ios", "android"],
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "associatedDomains": [
        "applinks:test.com"
      ],
      "userInterfaceStyle": "automatic",
      "supportsTablet": true,
      "bundleIdentifier": "com.Test.mobile",
      "infoPlist": {
        "SKAdNetworkItems": [
          {
            "SKAdNetworkIdentifier": "xxxxx.skadnetwork"
          },
          {
            "SKAdNetworkIdentifier": "xxxxx.skadnetwork"
          }
        ]
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "userInterfaceStyle": "automatic",
      "intentFilters": [
        {
          "action": "VIEW",
          "autoVerify": true,
          "data": [
            {
              "scheme": "https",
              "host": "*.test.com",
              "pathPrefix": "/"
            }
          ],
          "category": ["BROWSABLE", "DEFAULT"]
        }
      ],
      "package": "com.anonymous.test_mobile",
      "permissions": [
        "android.permission.INTERNET"
      ]
    },
    "web": {
      "favicon": "./assets/favicon.png",
      "output": "server"
    },
    "plugins": [
      [
        "@react-native-google-signin/google-signin",
        {
          "iosUrlScheme": "xxxxx"
        }
      ],
      [
        "react-native-fbsdk-next",
        {
          "appID": "",
          "clientToken": "",
          "displayName": "Test",
          "isAutoInitEnabled": true
        }
      ],
      [
        "expo-build-properties",
        {
          "ios": {
            "flipper": false
          }
        }
      ],
      [
        "expo-router",
        {
          "origin": ""
        }
      ],
      "expo-apple-authentication",
      "expo-secure-store"
    ],
    "experiments": {
      "typedRoutes": true
    },
    "extra": {
      "router": {
        "origin": false
      },
      "eas": {
        "projectId": "xxxxx"
      }
    },
    "owner": "me"
  }
}

This is solely an iOS/android app, so I'm not concerned with bundling for web necessarily. I do have a few web properties in the app.json (I think it's necessary to be able to use Expo server APIs for Stripe, etc?), so my feeling is that it's coming from there. The error doesn't give me too much information. How can I fix this error?

EDIT After downgrading to [email protected] and [email protected], this is the error I'm seeing:

λ Bundling failed 186ms node_modules/expo-router/node/render.js (1 module)
Unable to resolve "react-dom/server.node" from "node_modules/expo-router/build/static/renderStaticContent.js"
Web node_modules/expo-router/entry.js ▓▓▓░░░░░░░░░░░░░ 22.1% ( 8/17)Error: ENOENT: no such file or directory, open '/Users/jimmiejackson/Documents/repositories/gear_closet_mobile/node_modules/@expo/server/src/index.ts'
    at Object.openSync (node:fs:603:3)
    at Object.readFileSync (node:fs:471:35)
    at getCodeFrame (/Users/jimmiejackson/Documents/repositories/test_mobile/node_modules/metro/src/Server.js:949:18)
    at Server._symbolicate (/Users/<me>/Documents/repositories/test_mobile/node_modules/metro/src/Server.js:1026:22)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Server._processRequest (/Users/<me>/Documents/repositories/test_mobile/node_modules/metro/src/Server.js:419:7) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/<me>/Documents/repositories/test_mobile/node_modules/@expo/server/src/index.ts'
}

Metro error: Unable to resolve module react-dom/server.node from /Users/<me>/Documents/repositories/test_mobile/node_modules/expo-router/build/static/renderStaticContent.js: react-dom/server.node could not be found within the project or in these directories:
  node_modules/expo-router/node_modules
  node_modules
  ../../../node_modules
  38 | const Font = __importStar(require("expo-font/build/server"));
  39 | const react_1 = __importDefault(require("react"));
> 40 | const server_node_1 = __importDefault(require("react-dom/server.node"));
     |                                                ^
  41 | const react_native_web_1 = require("react-native-web");
  42 | const getRootComponent_1 = require("./getRootComponent");
  43 | const _ctx_1 = require("../../_ctx");


Call Stack
  metroFetchAsync (node_modules/@expo/cli/src/start/server/getStaticRenderFunctions.ts:184:13)
  processTicksAndRejections (node:internal/process/task_queues)
  requireFileContentsWithMetro (node_modules/@expo/cli/src/start/server/getStaticRenderFunctions.ts:163:10)
  getStaticRenderFunctionsForEntry (node_modules/@expo/cli/src/start/server/getStaticRenderFunctions.ts:211:45)
  MetroBundlerDevServer.ssrLoadModule (node_modules/@expo/cli/src/start/server/metro/MetroBundlerDevServer.ts:404:7)
  bundleStaticHtml (node_modules/@expo/cli/src/start/server/metro/MetroBundlerDevServer.ts:360:36)
  MetroBundlerDevServer.getStaticPageAsync (node_modules/@expo/cli/src/start/server/metro/MetroBundlerDevServer.ts:373:52)
  getHtml (node_modules/@expo/cli/src/start/server/metro/createServerRouteMiddleware.ts:73:31)
  handler (node_modules/@expo/server/src/index.ts:222:24)
Web Bundling failed 5947ms node_modules/expo-router/entry.js (2441 modules)
Unable to resolve "react-native-web/dist/index" from "node_modules/expo-router/build/renderRootComponent.js"

Upvotes: 1