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
U might need to install the
react-dom
package using the following commandHello 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 version51.0.11
andexpo-router
to version3.5.15