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

# 環境

- Macbook Air 2020

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

# １．状況

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

```jsx: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);
```

```jsx: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;
```

# ２．エラー内容

```bash
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` を作成し、下記内容を追記

```jsx: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":](https://stackoverflow.com/questions/72179070/react-native-bundling-failure-error-message-while-trying-to-resolve-module-i)