環境
- Macbook Air 2020
"expo": "~46.0.9",
"firebase": "^9.9.3",
"react": "18.0.0",
"react-native": "0.69.4",
1.状況
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;
2.エラー内容
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
確かに、これらのファイルは一つも存在しません。
3.調査
以下のワードでググる
- expo firebase.Indeed, none of these files exist:
4.原因
-
.cjs
は、デフォルトで expo、react native でサポートされていないファイル拡張子
5.解決策
- プロジェクトフォルダ直下に
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
でシミュレーターを起動