时间戳

首页 > 解决方案 > 尝试将 Firebase 与 React 一起使用时出现问题

reactjs - 尝试将 Firebase 与 React 一起使用时出现问题

问题描述

我正在尝试建立一个简单的项目来Firebase使用React. 为此，我遵循本教程： React 和 Firebase 入门 - 1

我运行后：

npm install firebase --save

我可以在 package.json 依赖项中看到（如我所料）这一行：

"firebase": "^9.1.3",

然而，当我想编译我的代码时，看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import * as firebase from 'firebase';

const firebaseConfig = {
  apiKey: ".....",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "12456...",
  appId: "1:1.....:web:c......."
};

const app = initializeApp(firebaseConfig);

我收到此错误：

Failed to compile.

./src/index.js
Module not found: Can't resolve 'firebase' in '/Users/me/Documents/.../myapp/src'

我的意图是按照教程进行操作，但它出错了。是不是文件过时了？还是我错过了一些重要的细节？

我希望有人能指出问题和解决方法。

进一步补充信息：

当我在项目目录中运行此命令时：

find node_modules -name firebase*

我得到一个相当长的结果，其中包含以下行：

node_modules/firebase/....

和像这样的行：

node_modules/@firebase/....

然后尝试：

find node_modules -name firebase.js

也：

find . -name firebase.js

两个命令都不返回任何内容。

标签： reactjsfirebase

解决方案

您在 node_modules 中有 firebase 模块吗？仔细检查一下。如果没有安装它。

这是我配置 Firebase v9 的方式。我在应用程序根文件夹中创建了 firebase.js。然后我将 firebase 配置放在那里并在该文件中初始化应用程序。

firebase.js

// Import the functions you need from the SDKs you need
import { initializeApp, getApp, getApps } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore();
const storage = getStorage();

export { app, db, storage };

环境变量的值存储在应用程序根文件夹中的 .env 文件中。.env 文件必须添加到 .gitignore，因为它包含敏感数据 - 凭据。我使用dotenv将 .env 文件中的变量加载到服务器的 process.env 中。

然后我像这样在我的代码中导入东西

import { db, storage } from '../../firebase';

推荐阅读