Typed routes not working in Expo 51 and Expo router

[alfjesus]

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 config for common issues
✔ Check package.json for common issues
✔ Check native tooling versions
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check for issues with metro config
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

[pedrohamarques]

Having the same issue after upgrading an expo project from SDK50 to 51.

Also, in a fresh new project using SDK 51, switching between tabs closes Expo Go

[alfjesus]

Having the same issue after upgrading an expo project from SDK50 to 51.

Also, in a fresh new project using SDK 51, switching between tabs closes Expo Go

The crash issue you are referring to @pedrohamarques, has already been mentioned in the release notes for Expo 51 together with a workaround. #28618

[pedrohamarques]

Thank you @alfjesus , I remember reading about that issue but I totally forgot about the workaround , my bad.

[Brahim-djiddi]

@alfjesus I had the same issue when I installed SDK 51. The Expo Go app just closes when touching the screen, simultaneously.

[vitaliinnest]

I can relate. Typed routes are turned off even though app.json contains "experiments": { "typedRoutes": true }.

[marklawlor]

Fixed in 3.5.11

[vitaliinnest]

The issue still persists, I have "expo-router": "~3.5.11" installed

[alfjesus]

Yes, I can also confirm that the issue still exist in 3.5.11

[ljukas]

Confirm this exists for me as well, issue for me seems to be that it does not use the generated types but instead the base types from the expo router library. So it is missing all the project specific route types

[alfjesus]

Confirm this exists for me as well, issue for me seems to be that it does not use the generated types but instead the base types from the expo router library. So it is missing all the project specific route types

Yes exactly. Looks like there's something with the typescript namespace, which is defined both in the expo router lib and in the generated .expo/types/router.d.ts.

export namespace ExpoRouter

[AdamTyler]

Also having this issue... we were previously using import type { AllRoutes } from 'expo-router';

As @alfjesus mentioned, SDK 51/expo-router update made a change to the generated types to be:

export namespace ExpoRouter {

instead of

declare module "expo-router" { that it has in SDK 50.

We were able to move forward by instead importing the namespace using:
import type { ExpoRouter } from 'expo-router/types/expo-router'; and using ExpoRouter.AllRoutes or ExpoRouter.LinkProps etc

However this doesn't fix the typing of the routes

[riebel]

The same for me in all 3.5.x (including 3.5.11) versions.
I get the "Welcome to Expo" default screen. None of my routes work.
If I "touch" to create an index.js, the file gets created (app/index.tsx), but also does not load on refresh.
Version 3.4.10 is working fine.

[asmachkirida]

I'm having the same problem too!! After upgrading to expo 51
Did any of yall find a solution?

[George-Acquah]

I just got the same problem after upgrading to expo 51
I get the Welcome to Expo screen and nothing seems to be working
Is there any workaround without downgrading my expo-router @marklawlor

[alfjesus]

I just got the same problem after upgrading to expo 51 I get the Welcome to Expo screen and nothing seems to be working Is there any workaround without downgrading my expo-router @marklawlor

@George-Acquah This issue is about typed routes in Expo Router not working. Navigation calls to defined routes is working as before with no issues. However, these routes are not typed and therefore I don't get auto completion of available routes for the href prop or a typescript error if I put in a route that is not defined.

But you are saying nothing seems to be working? Are you experiencing more issue than typed routes? If so I think a new issue should be filed to keep these separated.

[George-Acquah]

@alfjesus I'm stuck at the Welcome to Expo screen, and i don't know but I can't seem to go anywhere again
No link, or any close buttons, just the Welcome to Expo and some touch something something which basically wants me to create an index.tsx file which i already have

[alfjesus]

@George-Acquah Sounds very strange but I don't think what you are experiencing is related to this issue I'm afraid.

[George-Acquah]

@alfjesus I dont know if i should downgrade, once i downgrade too it becomes difficult to use expo go on my mobile

[gorbypark]

I can also confirm typed routes are not working (as far as the href prop on Link and router.navigate() from useRouter() goes). They will both accept any string. I tried deleting the .expo folder and restarting metro with --clear to ensure new types were being generated, but it still doesn't work.

    "expo-router": "~3.5.12",
    "expo": "~51.0.4",

[tjadolfo004]

Fixed in expo ~51.0.5 expo router: ~3.5.12....if build has an error delete node_modules folder and run npm install again.

[gorbypark]

Fixed in expo ~51.0.5 expo router: ~3.5.12....if build has an error delete node_modules folder and run npm install again.

This does not seem to work for me. I'm on 51.0.5 and router 3.5.12, I nuked node_modules, deleted .expo and did a full reinstall and still no typed routes.

[fredericogomesaeguana]

Not sure if it's related but seems I can't find screens inside my (tabs) group on a production build only. Development ones works just fine with expo sdk 51.

[ekramteyeb]

same here not working for me as well :)

[oliviercperrier]

Same here

[jokubauskas]

Can confirm, yesterday I have bootstrapped a new Expo project with Expo Router, and typed routes are not working for me.

[jonasdhein]

Any news?

[TimoVie]

Still same issue

[shiftytab]

Same here....

In the meantime, a developmment build will work: https://docs.expo.dev/develop/development-builds/create-a-build/
This will also work for production versions.

[awvremusic]

@alfjesus I dont know if i should downgrade, once i downgrade too it becomes difficult to use expo go on my mobile

Just hit this same issue today after upgrading to Expo SDK 51

[WKampel]

+1

[akarm13]

+1

[harivgts]

+1

[family2806]

+1

[idudinov]

hi there, instead of another useless +1 (sorry folks) I'd share more details of issue that particularly hits me (looks like it hasn't been mentioned above).

type StaticRoutes = `/` | `/(app)` | `/(tabs)` | `/_sitemap` | `/apps` | `/auth` | `/confirm-email` | `/editProfile` // ...

that's how routes are generated for my app, and main problem here is that they do not include folder path which makes it totally useless for non-root routes (which I have mostly all).

And yeah, just confirming another pain point that now it's not clear how to import Href or other route types. For now I'm importing like that:

import { ExpoRouter } from 'expo-router/types/expo-router';

const route: ExpoRouter.AbsoluteRoute = 'any-wrong-path-which-ts-doesnt-care-about';

so it looks awful, and doesn't include any actual route typings.

Checked on "expo-router": "~3.5.14", "expo": "~51.0.8".

Hopefully this could be fixed soon.
Thanks

[JohnGeorgiadis]

Same here.
I am using "expo": "^51.0.8" and "expo-router": "~3.5.14".

expo-router exposes the index.d.ts from expo-router file instead of the router.d.ts from .expo/types.router.d.ts

I have an import like this import { Route, router, usePathname } from 'expo-router'; and there is no more Route type being exposed by the package.

I hope this will be helpful,
amazing job and congrats for the great release.
Thanks

[kpoelhekke]

It looks like the .expo/types.router.d.ts file isn't properly generated because of this line: https://github.com/expo/expo/blame/6da4825c8af13f3f5480d88723a6683fd9ff39ca/packages/expo-router/src/typed-routes/generate.ts#L36

It should also do a .replace('export namespace ExpoRouter {', `declare module "expo-router" {`) In that case you can import Route again from expo-router

[riebel]

The same for me in all 3.5.x (including 3.5.11) versions. I get the "Welcome to Expo" default screen. None of my routes work. If I "touch" to create an index.js, the file gets created (app/index.tsx), but also does not load on refresh. Version 3.4.10 is working fine.

For clarification: My problem with the "Welcome to Expo" default screen and no routes working after upgrading expo-router was not related to this issue. It was a problem with react-native-dotenv.

Nevertheless my generated route types also do not work.

[jmacbhc]

Same problem here.