Cannot read property 'useMemo' of null

[bestform]

Minimal reproducible example

https://github.com/bestform/expo-router-bug

Which package manager are you using? (Yarn is recommended)

npm

If the issue is web-related, please select the bundler (web.bundler in the app.json)

None

Summary

When using expo-router 3.4.9, the app does not start. Instead it says: TypeError: Cannot read property 'useMemo' of null

---

What I did:

npx create-expo-app -t
As a template I chose TypeScript (Blank)
npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler
mkdir app
mv App.tsx app/index.tsx
Change "main" entry in package.json to expo-router/entry
Add a "scheme" to app.json
Run the Expo go server using npx expo start

What I expected:

The App is running in the expo go app showing app/index.tsx

What happened instead:

An error screen saying: TypeError: Cannot read property 'useMemo' of null

---

This is the full stack trace:

 ERROR  Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at ContextNavigator (http://192.168.178.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:132996:24)
    at ExpoRoot (http://192.168.178.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:132952:28)
    at App
    at ErrorToastContainer (http://192.168.178.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:163392:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://192.168.178.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:163142:27)
    at RCTView
    at View (http://192.168.178.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40237:43)
    at RCTView
    at View (http://192.168.178.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40237:43)
    at AppContainer (http://192.168.178.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40048:36)
    at main(RootComponent) (http://192.168.178.26:8081/node_modules/expo-router/entry.bundle//&platform=android&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:124359:28)
 ERROR  TypeError: Cannot read property 'useMemo' of null

And:

This error is located at:
    in ContextNavigator (at ExpoRoot.js:64)
    in ExpoRoot (at qualified-entry.js:20)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (at withDevTools.js:18)
    in withDevTools(ErrorOverlay) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes
 ERROR  TypeError: Cannot read property 'useMemo' of null

Both traces are being printed twice. So the first part is printed twice and then the second part is printed twice.

Environment

expo-env-info 1.2.0 environment info:
System:
OS: macOS 14.4.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.2 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 10.5.2 - /usr/local/bin/npm
Watchman: 2023.10.02.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.4, iOS 17.4, macOS 14.4, tvOS 17.4, visionOS 1.1, watchOS 10.4
IDEs:
Xcode: 15.3/15E204a - /usr/bin/xcodebuild
npmPackages:
expo: ~50.0.14 => 50.0.17
expo-router: ~3.4.9 => 3.4.9
react: 18.2.0 => 18.2.0
react-native: 0.73.6 => 0.73.6
Expo Workflow: managed

[alimohyudin]

This issue wasted my whole last night and today, unlucky me. Probably they pushed some changes yesterday. things were okay in the morning.

[alimohyudin]

I fixed this issue by using the following versions in package.json file

{
"name": "tipins",
"version": "1.0.0",
"main": "expo-router/entry",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "~50.0.14",
"expo-av": "~13.10.5",
"expo-constants": "~15.4.5",
"expo-device": "^5.9.3",
"expo-document-picker": "~11.10.1",
"expo-font": "~11.10.3",
"expo-linking": "~6.2.2",
"expo-router": "~3.4.8",
"expo-status-bar": "~1.11.1",
"install": "^0.13.0",
"nativewind": "^2.0.11",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-animatable": "^1.4.0",
"react-native-appwrite": "^0.2.2",
"react-native-gesture-handler": "~2.14.0",
"react-native-reanimated": "~3.6.2",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"react-native-url-polyfill": "^2.0.0",
"react-native-web": "~0.19.6"
},
"devDependencies": {
"@babel/core": "^7.24.3",
"tailwindcss": "3.3.2"
},
"private": true
}

[brentvatne]

hi there!

here's what happened

• react@18.3.0 was released yesterday
• expo-router depends on react-helmet-async
• react-helmet-async has a peer dependency on react-dom@^18.0.0
• if your project does not have the recommended version of react-dom installed, then that will lead to react-dom@18.3.0 to be installed as of yesterday (note: sdk 50 uses react@18.2.0)
• react-dom@18.3.0 has a peer dependency on react@^18.3.0
• react@^18.3.0 is not satisfied by react@18.2.0 from your project pkg.json
• npm goes ahead and installs react@^18.3.0 alongside react-dom@18.3.0
• your project now has both react@18.2.0 and react@18.3.0 in its dependencies. this is a recipe for problems.

how you can solve this right now

you can do any of the following things:

• run npx expo install react-dom in your project, then run npm why react-dom to verify that you only have 18.2.0 installed
• use the --legacy-peer-deps option with npm
• use another package manager like yarn

what we can do

tbd! maybe we can update react-helmet-async? let us know if you have suggestions

[brentvatne]

i locked the issue for now because i want to make sure that #28471 (comment) isn't buried - that comment explains what causes this issue and how to work around it. we'll follow up here when it's resolved systematically!

[brentvatne]

this is resolved in expo-router@3.4.10 - see 4357c8e for context