Typed routes not working in Expo 51 and Expo router
Problem
Minimal reproducible example https://github.com/alfjesus/typed-routes What platform(s) does this occur on? _No response_ Did you reproduce this issue in a development build? No (tested in Expo Go) Summary Creating a new project with `yarn create expo-app` (Expo 51) seems to have broken the typed routes for expo router. When I downgraded to Expo 50 (and `npx expo install --check`), typed routes started to working again. I guess there's something wrong with the generation of the types when the development server starts 🤔 Environment expo-env-info 1.2.0 environment info: System: OS: macOS 14.4.1 Shell: 5.9 - /bin/zsh Binaries: Node: 18.19.0 - /usr/local/bin/node Yarn: 1.22.21 - /opt/homebrew/bin/yarn npm: 10.2.3 - /usr/local/bin/npm Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.13.0 - /Users/anders/.rbenv/shims/pod SDKs: iOS SDK: Platforms: DriverKit 23.4, iOS 17.4, macOS 14.4, tvOS 17.4, visionOS 1.1, watchOS 10.4 IDEs: Android Studio: 2023.2 AI-232.10300.40.2321.11567975 Xcode: 15.3/15E204a - /usr/bin/xcodebuild npmPackages: expo: ~51.0.0 => 51.0.0 expo-router: ~3.5.10 => 3.5.10 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 react-native: 0.74.1 => 0.74.1 react-native-web: ~0.19.10 => 0.19.11 npmGlobalPackages: eas-cli: 7.8.2 Expo Workflow: managed Expo Doctor Diagnostics ✔ Check Expo
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Typed Routes Issue in Expo 51 with Expo Router
The issue arises due to changes in the Expo 51 SDK that affect how types are generated for routes in the expo-router package. This can lead to mismatches or failures in type inference, causing typed routes to not function as expected.
Awaiting Verification
Be the first to verify this fix
- 1
Upgrade expo-router
Ensure you are using the latest version of expo-router that is compatible with Expo 51. This may include bug fixes or improvements that resolve the typed routes issue.
bashyarn add expo-router@latest - 2
Clear Metro Bundler Cache
Sometimes, stale cache can cause issues with type generation. Clear the Metro Bundler cache to ensure that all files are freshly compiled.
bashexpo start -c - 3
Check TypeScript Configuration
Verify that your TypeScript configuration (tsconfig.json) is set up correctly for the project. Ensure that 'strict' mode is enabled and that 'esModuleInterop' is set to true.
json{ "compilerOptions": { "strict": true, "esModuleInterop": true } } - 4
Reinstall Node Modules
Sometimes, dependencies can be misaligned. Remove the node_modules directory and reinstall the dependencies to ensure everything is in sync.
bashrm -rf node_modules && yarn install - 5
Test Typed Routes
After performing the above steps, test the typed routes in your application to confirm that they are working as expected.
bashyarn start
Validation
To confirm the fix worked, check if the typed routes are functioning correctly by navigating through the routes in your application without TypeScript errors. Additionally, ensure that the development server starts without any warnings related to typed routes.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep