🚨 Fixing “App Not Loading on Web” in Expo SDK 53 (React Native + Metro + Framer Motion)

While upgrading to Expo SDK 53, our mobile app failed to load on web with this error:

Cannot destructure property '__extends' of '_tslib.default' as it is undefined

🧩 Root Cause

• The problem stemmed from tslib and how Metro bundler handles .mjs files.

• framer-motion (used via moti) imported from tslib in a way that web bundlers misread.

✅ Fix

1. Exclude .mjs from Metro:

jsCopyEditconfig.resolver.sourceExts = config.resolver.sourceExts.filter(
  (ext) => ext !== 'mjs'
);

1. Alias tslib to the proper ES6 version:

config.resolver.extraNodeModules = {
  tslib: require.resolve('tslib/tslib.es6.js'),
};

Optional:

If you locate any path like import ... from "../tslib.js" in node_modules/framer-motion, change it to. import ... from "../tslib.es6.js";

🏁 Conclusion

This issue is a perfect example of how minor mismatches between module types (.mjs vs .js) and bundlers like Metro can silently break your app — especially when using cross-platform libraries like framer-motion. If you're building for both mobile and web using Expo SDK 53 or higher, it's important to proactively patch tslib usage and keep an eye on how Metro resolves modules.

By tweaking your Metro config and properly aliasing tslib, you can get your app running on all platforms smoothly again.