我開始使用 next.js 創建我的網絡應用程序，所以我從“firebase”導入了 firebase。 然后在終端中發生此錯誤：

Question

我正在構建一個 next.js 網絡應用程序，我想使用 firebase 進行數據庫和身份驗證。 當我在文件中導入 firebase 時，會發生此錯誤：

error - ./firebase.js:1:0
Module not found: Package path . is not exported from package /home/naveen/New Folder/whatsapp-2/node_modules/firebase (see exports field in /home/naveen/New Folder/whatsapp-2/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 firebase from "firebase";
  2 | 
  3 | const firebaseConfig = {
  4 |   apiKey: "AIzaSyAS5PuV434Qb5IqgMHnte1UKha-31PjB-Y",

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

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

這是我的 firebase.js 文件：

import firebase from "firebase";

const firebaseConfig = {
  apiKey: "AIzaSyAS5PuV434Qb5IqgMHnte1UKha-31PjB-Y",
  authDomain: "whatsapp-2-b5a79.firebaseapp.com",
  projectId: "whatsapp-2-b5a79",
  storageBucket: "whatsapp-2-b5a79.appspot.com",
  messagingSenderId: "960710517268",
  appId: "1:960710517268:web:42e2b65fd273553966fd01",
};

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

這是 package.json 文件：

{
  "name": "whatsapp-2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "email-validator": "^2.0.4",
    "firebase": "^9.0.0",
    "next": "11.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "styled-components": "^5.3.1"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.0"
  }
}

這是 node_modules.firebase 中 package.json 中的 exports 字段：

{  "exports": {
    "./analytics": {
      "node": {
        "require": "./analytics/dist/index.cjs.js",
        "import": "./analytics/dist/index.mjs"
      },
      "default": "./analytics/dist/index.esm.js"
    },
    "./app": {
      "node": {
        "require": "./app/dist/index.cjs.js",
        "import": "./app/dist/index.mjs"
      },
      "default": "./app/dist/index.esm.js"
    },
    "./app-check": {
      "node": {
        "require": "./app-check/dist/index.cjs.js",
        "import": "./app-check/dist/index.mjs"
      },
      "default": "./app-check/dist/index.esm.js"
    },
    "./auth": {
      "node": {
        "require": "./auth/dist/index.cjs.js",
        "import": "./auth/dist/index.mjs"
      },
      "default": "./auth/dist/index.esm.js"
    },
    "./auth/cordova": {
      "node": {
        "require": "./auth/cordova/dist/index.cjs.js",
        "import": "./auth/cordova/dist/index.mjs"
      },
      "default": "./auth/cordova/dist/index.esm.js"
    },
    "./auth/react-native": {
      "node": {
        "require": "./auth/react-native/dist/index.cjs.js",
        "import": "./auth/react-native/dist/index.mjs"
      },
      "default": "./auth/react-native/dist/index.esm.js"
    },
    "./database": {
      "node": {
        "require": "./database/dist/index.cjs.js",
        "import": "./database/dist/index.mjs"
      },
      "default": "./database/dist/index.esm.js"
    },
    "./firestore": {
      "node": {
        "require": "./firestore/dist/index.cjs.js",
        "import": "./firestore/dist/index.mjs"
      },
      "default": "./firestore/dist/index.esm.js"
    },
    "./firestore/lite": {
      "node": {
        "require": "./firestore/lite/dist/index.cjs.js",
        "import": "./firestore/lite/dist/index.mjs"
      },
      "default": "./firestore/lite/dist/index.esm.js"
    },
    "./functions": {
      "node": {
        "require": "./functions/dist/index.cjs.js",
        "import": "./functions/dist/index.mjs"
      },
      "default": "./functions/dist/index.esm.js"
    },
    "./messaging": {
      "node": {
        "require": "./messaging/dist/index.cjs.js",
        "import": "./messaging/dist/index.mjs"
      },
      "default": "./messaging/dist/index.esm.js"
    },
    "./messaging/sw": {
      "node": {
        "require": "./messaging/sw/dist/index.cjs.js",
        "import": "./messaging/sw/dist/index.mjs"
      },
      "default": "./messaging/sw/dist/index.esm.js"
    },
    "./performance": {
      "node": {
        "require": "./performance/dist/index.cjs.js",
        "import": "./performance/dist/index.mjs"
      },
      "default": "./performance/dist/index.esm.js"
    },
    "./remote-config": {
      "node": {
        "require": "./remote-config/dist/index.cjs.js",
        "import": "./remote-config/dist/index.mjs"
      },
      "default": "./remote-config/dist/index.esm.js"
    },
    "./storage": {
      "node": {
        "require": "./storage/dist/index.cjs.js",
        "import": "./storage/dist/index.mjs"
      },
      "default": "./storage/dist/index.esm.js"
    },
    "./compat/analytics": {
      "node": {
        "require": "./compat/analytics/dist/index.cjs.js",
        "import": "./compat/analytics/dist/index.mjs"
      },
      "default": "./compat/analytics/dist/index.esm.js"
    },
    "./compat/app": {
      "node": {
        "require": "./compat/app/dist/index.cjs.js",
        "import": "./compat/app/dist/index.mjs"
      },
      "default": "./compat/app/dist/index.esm.js"
    },
    "./compat/app-check": {
      "node": {
        "require": "./compat/app-check/dist/index.cjs.js",
        "import": "./compat/app-check/dist/index.mjs"
      },
      "default": "./compat/app-check/dist/index.esm.js"
    },
    "./compat/auth": {
      "node": {
        "require": "./compat/auth/dist/index.cjs.js",
        "import": "./compat/auth/dist/index.mjs"
      },
      "default": "./compat/auth/dist/index.esm.js"
    },
    "./compat/database": {
      "node": {
        "require": "./compat/database/dist/index.cjs.js",
        "import": "./compat/database/dist/index.mjs"
      },
      "default": "./compat/database/dist/index.esm.js"
    },
    "./compat/firestore": {
      "node": {
        "require": "./compat/firestore/dist/index.cjs.js",
        "import": "./compat/firestore/dist/index.mjs"
      },
      "default": "./compat/firestore/dist/index.esm.js"
    },
    "./compat/functions": {
      "node": {
        "require": "./compat/functions/dist/index.cjs.js",
        "import": "./compat/functions/dist/index.mjs"
      },
      "default": "./compat/functions/dist/index.esm.js"
    },
    "./compat/messaging": {
      "node": {
        "require": "./compat/messaging/dist/index.cjs.js",
        "import": "./compat/messaging/dist/index.mjs"
      },
      "default": "./compat/messaging/dist/index.esm.js"
    },
    "./compat/performance": {
      "node": {
        "require": "./compat/performance/dist/index.cjs.js",
        "import": "./compat/performance/dist/index.mjs"
      },
      "default": "./compat/performance/dist/index.esm.js"
    },
    "./compat/remote-config": {
      "node": {
        "require": "./compat/remote-config/dist/index.cjs.js",
        "import": "./compat/remote-config/dist/index.mjs"
      },
      "default": "./compat/remote-config/dist/index.esm.js"
    },
    "./compat/storage": {
      "node": {
        "require": "./compat/storage/dist/index.cjs.js",
        "import": "./compat/storage/dist/index.mjs"
      },
      "default": "./compat/storage/dist/index.esm.js"
    }
  },
}

我已經做好了：

yarn add firebase

我做錯了什么？

Answer 1

首先，firebase SFK 的默認導出來自firebase/app而不僅僅是firebase

接下來，您使用的是幾天前剛剛發布的 firebase SDK V9，您有一些問題需要解決：

• 您使用的名為“react-firebase-hooks”的包不支持firebase V9，實際上PR仍然在他們的github上打開
• 使用這個新版本的 SDK，情況會有所不同，我建議您遵循本指南
• 最后，如果您想堅持使用 v8 語法，您可以像使用 SDK v8 時一樣執行操作，只需在所有導入中添加 compat，如下所示：

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";

樂意效勞 ;）

Answer 2

如果您仍然沒有修復它，請告訴我，但我向您保證會這樣做請點擊此鏈接，並仔細閱讀