iOS/Android bundling unable to resolve vfile package exports

[lsarni]

Minimal reproducible example

https://github.com/lsarni/testvfile1

What platform(s) does this occur on?

Android, iOS

Did you reproduce this issue in a development build?

Yes

Summary

Affected platforms: ios and android

Current behaviour

The following error occurs when running yarn ios or yarn android

iOS/Android Bundling failed 2065ms (node_modules/expo/AppEntry.js)
Unable to resolve "vfile/do-not-use-conditional-minpath" from "node_modules/vfile/lib/index.js"

The bundling can't deal with this change on vfile added on version 6.0.0. There's this discussion about a similar problem on the vfile repo, but the problem itself is not on that package but on how expo bundles it.

Expected behaviour

If you remove vfile or use version ^5.0.0 the bundling is successful, but we can't opt to use this dependency on our project as it's not a direct one. The bundling should be able to resolve "vfile/do-not-use-conditional-minpath" as it is declared on vfile@^6.0.0

Environment

expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.4.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
      Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn
      npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    Managers:
      CocoaPods: 1.14.3 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    IDEs:
      Android Studio: 2022.3 AI-223.8836.35.2231.10811636
      Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
    npmPackages:
      expo: ~50.0.14 => 50.0.17 
      react: 18.2.0 => 18.2.0 
      react-native: 0.73.6 => 0.73.6 
    Expo Workflow: managed

Expo Doctor Diagnostics

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ 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 that native modules do not use incompatible support packages
✔ Check for legacy global CLI installed locally
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules use compatible support package versions for installed Expo SDK
✔ Check native tooling versions

Didn't find any issues with the project!

[byCedric]

Hi @isarni! Unfortunately, React Native / Metro support for ESM or package exports is limited and still in an unstable state. You can try and enable this for your project by configuring Metro with:

// Learn more: https://docs.expo.dev/guides/customizing-metro/
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// Enable unstable package export support
// see: https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0534-metro-package-exports-support.md 
config.resolver.unstable_enablePackageExports = true;

module.exports = config;

It might work, but it could also cause other side-effects as it's still an experimental / unstable API.

Hope this helps!

[lsarni]

Thanks for the reply, changing the configuration works for the example, but on our own app leads to a different error

iOS Bundled 5063ms (node_modules/expo-router/entry.js)
 ERROR  TypeError: Cannot read property '__extends' of undefined, js engine: hermes 
    at ContextNavigator (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=nl.cineville.cineville&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:148271:24)
    at ExpoRoot (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=nl.cineville.cineville&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:148227:28)
    at App
    at ErrorToastContainer (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=nl.cineville.cineville&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:540639:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=nl.cineville.cineville&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:540169:27)
    at RCTView
    at View (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=nl.cineville.cineville&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:40713:43)
    at RCTView
    at View (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=nl.cineville.cineville&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:40713:43)
    at AppContainer (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=nl.cineville.cineville&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:40524:36)
    at main(RootComponent) (http://localhost:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=nl.cineville.cineville&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:124365:28)