Expo SDK 52 → 53にバージョンアップした時にハマった箇所を紹介

概要

個人開発しているアプリをExpo SDK 52 → 53にバージョンアップした時に数点ハマった箇所があったので記事にする。

PR

github.com

Expo SDK 53の変更点

詳細な内容は以下の記事を参照。

expo.dev

影響があった主な変更点は以下の通り。

• ベースのネイティブコードの言語が最新化
  • iOS: Objective-C → Swift
  • Android: java → Kotlin
• React 19にバージョンアップ
• Expo Routerの強化

移行の手順

以下のコマンドで移行は可能。

npx expo install expo@^53.0.0 --fix

その後、最新の状態になっているかを expo-doctor で確認。

npx expo-doctor@latest

ハマった箇所の紹介

上記の手順で移行してビルドした際、以下のエラーが発生。

Route "./(app)/screen-shot/index.tsx" is missing the required default export. Ensure a React component is exported as default.

この内容からは、Expo Router 周りでコンポーネントの import に問題があるように見えたが、調査した結果、firebase の SDK を import すると発生することがわかった。

その後、以下の issue にて同様の事例を確認。

github.com

内容としては、firebase の内部で .cjs 拡張子のファイルを含む構成があり、Metro bundler がそれを正しく解決できないというものだった。

以下のように metro.config.js を修正することで対応可能。

修正内容

metro.config.js

const { getSentryExpoConfig } = require("@sentry/react-native/metro");
const withStorybook = require("@storybook/react-native/metro/withStorybook");

const STORYBOOK_ENABLED = process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true";

const config = getSentryExpoConfig(__dirname);

// Firebase / Expo SDK 53 対応: “.cjs” 拡張子を解決対象に含める
config.resolver.sourceExts = config.resolver.sourceExts || [];
if (!config.resolver.sourceExts.includes("cjs")) {
  config.resolver.sourceExts.push("cjs");
}

// Firebase や React-Native-WebView のようなパッケージの export map 問題に対応
config.resolver.unstable_enablePackageExports = false;

module.exports = withStorybook(config, {
  enabled: STORYBOOK_ENABLED,
  onDisabledRemoveStorybook: !STORYBOOK_ENABLED,
});

この修正により、Firebase のサブパッケージが正しくバンドルされ、アプリのビルドが問題なく通るようになった。