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

Question

我正在尝试使用React 在Firebase 上建立一个简单的项目。 为此，我遵循本教程： Getting Started with React and 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

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

Answer 1

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';