Skip to content

"moduleResolution": "Bundler" breaks navigator typings #32850

Open
@vruffer

Description

@vruffer

Minimal reproducible example

https://github.com/vruffer/expo-router-minimal-repro

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

Router @react-navigation exports loose type information when tsconfig.moduleResolution is set to Bundler.

Using a tab/stack navigator as shown in the repro with moduleResolution: Bundler causes typescript to loose all type information about the component.

I think this is because of the new way types are exported in react-navigation@7, mainly that types are split for module and commonjs exports: @react-navigation/{module}/lib/typescript/{commonjs or module}/src/index.

Expo types are hard-coded to always use the commonjs export, and access subpaths which typescript can't seem to resolve. e.g. an import like import("@react-navigation/bottom-tabs/lib/typescript/commonjs/src/types").BottomTabNavigationConfig in expo-router/build/layouts/TabsClient.d.ts line 10, does not work and resolves to any.

I've tried changing the hard-coded imports in TabsClient.d.ts to point to the module subpath: import("@react-navigation/bottom-tabs/lib/typescript/module/src/types").BottomTabNavigationConfig, but it seems the typing breaks as soon as an import statement accesses subpaths that aren't explicitely defined in @react-navigations package.json.exports field.

Importing from @react-navigation directly works fine.

I use packages that must use the package.json.exports field, and since moduleResolution: 'node' does not support package.json.exports, I am forced to use moduleResolution: 'Bundler'. It works on expo@51/expo-router@~3.5.23.

Environment

expo-env-info 1.2.1 environment info:
    System:
      OS: macOS 14.7
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.18.0 - ~/.local/state/fnm_multishells/28953_1731489883943/bin/node
      Yarn: 4.5.1 - ~/.local/state/fnm_multishells/28953_1731489883943/bin/yarn
      npm: 10.8.2 - ~/.local/state/fnm_multishells/28953_1731489883943/bin/npm
      Watchman: 2024.09.09.00 - ~/Applications/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.15.2 - ~/.rbenv/shims/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 24.0, iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, watchOS 11.0
    IDEs:
      Android Studio: 2024.1 AI-241.18034.62.2411.12071903
      Xcode: 16.0/16A242d - /usr/bin/xcodebuild
    npmPackages:
      expo: ~52.0.4 => 52.0.4 
      expo-router: ~4.0.3 => 4.0.3 
      react: 18.3.1 => 18.3.1 
      react-dom: 18.3.1 => 18.3.1 
      react-native: 0.76.1 => 0.76.1 
      react-native-web: ~0.19.13 => 0.19.13 
    Expo Workflow: managed

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions