Reanimated babel error after migrating to Expo Router

[dawsonbooth]

Minimal reproducible example

https://github.com/dawsonbooth/expo-router-babel-reanimated-crash

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

bun

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

None

Summary

Getting this error when loading the app: /node_modules/react-native-gesture-handler/src/handlers/gestures/hoverGesture.ts: [Reanimated] Babel plugin exception: Error: [BABEL]: You appear to be using a native ECMAScript module plugin, which is only supported when running Babel asynchronously. (While processing: /node_modules/@babel/plugin-transform-shorthand-properties/lib/index.js)

Environment

expo-env-info 1.2.0 environment info:
System:
OS: macOS 14.2.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.3.1 - ~/.asdf/installs/nodejs/20.3.1/bin/node
Yarn: 1.22.19 - ~/.asdf/installs/nodejs/20.3.1/bin/yarn
npm: 9.6.7 - ~/.asdf/plugins/nodejs/shims/npm
SDKs:
iOS SDK:
Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
IDEs:
Xcode: 15.2/15C500b - /usr/bin/xcodebuild
npmPackages:
expo: ^51.0.0 => 51.0.8
expo-router: ~3.5.9 => 3.5.14
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.6 => 0.19.11
Expo Workflow: managed

[dawsonbooth]

With some more exploration I was able to find that other instances of using react-native-animated trigger the error, but typically importing react-native-gesture-handler is the earliest so it takes precedent.

I believe this is an issue caused by Expo Router and not by the other libraries/bun since it didn't occur until I migrated to Expo Router from the old webpack setup.

[GollyJer]

+1
Glad to find someone else having this issue; because I fully thought it was on my side of the keyboard. It started for us two days ago and have been trying to figure it out since.

[GollyJer]

and we use Yarn

[GollyJer]

This is how it manifests in our project.

[GollyJer]

Turns out the issue on my end was a babel plugin @legendapp/state/babel.
Once I remove it the app starts loading again.

Might be worth checking the plugins in your babel.config.js file @dawsonbooth

[dawsonbooth]

Ah, glad you could get it working.

The only plugin I'm using (as well as the minimal reproducible example) is react-native-reanimated/plugin which is required for the react-native-animated setup, so it can't be resolved that way for me unfortunately.

[Osomasi]

@dawsonbooth I have

'expo-router/babel',

and I still get

iOS Bundling failed 48ms node_modules/expo-router/entry.js (1 module)
error: node_modules/expo-router/entry.js: You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.

[marklawlor]

Bun appears to be providing incorrect dependencies.

Removing your lock file and using npm to install the project works fine. When I use your lockfile, the dependency tree looks like this

expo-router-babel-reanimated-crash@1.0.0 /Users/mark/Github/dawsonbooth/expo-router-babel-reanimated-crash
├─┬ expo@51.0.8
│ └─┬ babel-preset-expo@11.0.6
│   └─┬ @react-native/babel-preset@0.74.83
│     └── @babel/plugin-transform-shorthand-properties@7.24.1
└─┬ react-native-reanimated@3.10.1
  └── @babel/plugin-transform-shorthand-properties@8.0.0-alpha.8 invalid: "^7.0.0-0" from node_modules/react-native-reanimated

Expo has reported similar issues to the bun team recently (oven-sh/bun#8406). I'm not sure if this is the same issue or another issue. In the mean time, you can lock the version of @babel/plugin-transform-shorthand-properties or use a different package manager