skip to Main Content

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?

2

Answers


  1. U might need to install the react-dom package using the following command

    npm i react-dom

    Login or Signup to reply.
  2. Hello this issue is already posted in GitHub issue.

    This problem related to expo-router.

    Since there’s no fix for current version, the current solution is to downgrade expo to version 51.0.11 and expo-router to version 3.5.15

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search