【React Native】Firebaseインストール後に *.cjs. Indeed, none of these files exist

環境

• Macbook Air 2020

"expo": "~46.0.9",
"firebase": "^9.9.3",
"react": "18.0.0",
"react-native": "0.69.4",

１．状況

ExpoでFirebaseをReact Nativeプロジェクトにインストール後、 ユーザー登録処理を実装した際にエラーが出る。

firebaseConfig.tsx

import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
    apiKey: "xxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxx",
    appId: "xxxxxxxxxxxx"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

RegisterScreen.tsx

import { useState } from 'react';
import { StyleSheet, View, Text, TextInput, Button, KeyboardAvoidingView } from 'react-native';
import _Button from '../../components/Button';
import { createUserWithEmailAndPassword } from '@firebase/auth';
import { auth } from '../../firebase/config';

const RegisterScreen = ({ navigation }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleRegister = async () => {
    try {
      const user = await createUserWithEmailAndPassword(auth, email, password);
      console.log(user);
    } catch (error) {
      console.log(error.message);
    }
  }

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior="padding"
    >
      <Text style={styles.titleText}>新規登録</Text>
      <TextInput
        style={styles.input}
        textAlign={"left"}
        selectionColor={"#00f"}
        placeholder={"メールアドレス"}
        autoCapitalize="none"
        onChangeText={setEmail}
        value={email}
      />
      <TextInput
        style={styles.input}
        textAlign={"left"}
        selectionColor={"#00f"}
        placeholder={"パスワード"}
        autoCapitalize="none"
        secureTextEntry={true}
        onChangeText={setPassword}
        value={password}
      />
      <View style={{ paddingTop: 32 }}>
        <_Button
          onPress={handleRegister}
          title={"新規登録"}
          bgColor={"#010440"}
          color={"#fff"}
        />
      </View>
      <View style={styles.transitionBtn}>
        <Button
          onPress={() => navigation.navigate("LogIn")}
          title="ログイン"
          color={"#010440"}
        />
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: '#BFF205',
    padding: 40,
  },
  transitionBtn: {
    fontWeight: "bold",
    position: "absolute",
    top: 20,
    right: 20,
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    paddingBottom: 8,
  },
  input: {
    backgroundColor: '#fff',
    padding: 12,
    borderRadius: 8,
    fontSize: 18,
    marginTop: 20,
  },
});

export default RegisterScreen;

２．エラー内容

While trying to resolve module `idb` from file `/mobile-app/node_modules/@firebase/app/dist/esm/index.esm2017.js`, the package `/mobile-app/node_modules/idb/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/mobile-app/node_modules/idb/build/index.cjs`. Indeed, none of these files exist:

• 日本語訳
  ファイル /mobile-app/node_modules/@firebase/app/dist/esm/index.esm2017.js からモジュール idb を解決しようとしているとき、パッケージ /mobile-app/node_modules/idb/package.json は正常に見つかりました。しかし、このパッケージ自体が解決できなかった main モジュールのフィールドを指定しています (/mobile-app/node_modules/idb/build/index.cjs確かに、これらのファイルは一つも存在しません。

３．調査

以下のワードでググる

• expo firebase.Indeed, none of these files exist:

４．原因

• .cjsは、デフォルトで expo、react native でサポートされていないファイル拡張子

５．解決策

• プロジェクトフォルダ直下に metro.config.js を作成し、下記内容を追記

metro.config.js

const { getDefaultConfig } = require("@expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push("cjs");

module.exports = defaultConfig;

• expo start でシミュレーターを起動

６．参考資料

• React-native bundling failure. ERROR MESSAGE: "While trying to resolve module 'idb'..... Indeed none of these files exist":