模块未找到：包路径.未从包中导出

Question

当我尝试连接Firebase时，我的代码出现了以下错误：

文件：firebase.js

代码：

import * as firebase from "firebase"

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

const app = !firebase.apps.length
  ? firebase.initializeApp(firebaseConfig)
  : firebase.app();

const db = app.firestore();
const auth = app.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export { db, auth, provider };

错误：

Module not found: Package path . is not exported from package <project location>\node_modules\firebase (see exports field in <project location>\node_modules\firebase\package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
> 1 | import * as firebase from "firebase";
  2 |
  3 | const firebaseConfig = {
  4 |   apiKey: "***",

Import trace for requested module:
./pages\_app.js

https://nextjs.org/docs/messages/module-not-found

File: ./pages_app.js

import "../styles/globals.css";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth, db } from "../firebase";
import Login from "./login";

function MyApp({ Component, pageProps }) {
  const [user] = useAuthState(auth);

  if (!user) return <Login />;

  return <Component {...pageProps} />;
}

export default MyApp;

- TruDet

Answer 1

您应该将Firebase导入更改为：

import * as firebase from "firebase"

- about14sheep

---

不行，还是不起作用。 - TruDet

我已将代码和错误更新为我所更改的内容。 - TruDet

另外，我添加了 _app.js 文件的内容。 - TruDet

你在这里可能遇到的问题之一是你把文件命名为firebase.js。你可以尝试将其改为firebase-handler或其他名称。另外，你是否使用了这个firebase npm包？https://www.npmjs.com/package/firebase - about14sheep

Answer 2

你应该像错误信息中指示的那样将'firebase'替换为'./firebase'。

- MVT KVM

---

我又遇到了一个错误：/ - TruDet

新的错误是什么？同时要注意，最新的 Firebase 版本中导入方式已更改为： import firebase from 'firebase/compat/app'; import 'firebase/compat/firestore'; - MVT KVM

https://dev59.com/JKr2oIgBc1ULPQZFJSuX - TruDet

Answer 3

我曾经遇到了同样的问题。你需要做的是调用

import * as firebase from "firebase/app"

而不是 import * as firebase from "firebase"。

此外，如果你想使用全部函数，例如GoogleAuthProvider，你需要这样导入：

import { getAuth, GoogleAuthProvider } from "firebase/auth";

希望能对你有所帮助。

- AdeSheriff