我开始用next.js创建我的web应用程序，所以我从" firebase“导入了firebase。然后，在终端中发生此错误：

Question

我正在构建一个next.js网络应用程序，我想使用防火墙数据库和身份验证。当我在文件中导入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"
  }
}

下面是package.json中node_modules.firebase中的导出字段：

{  "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

首先，防火墙SFK的默认导出来自firebase/app，而不仅仅是firebase。

接下来，您使用的是firebase V9，它几天前刚刚发布，您需要解决一些问题：

• 您使用的包名为“react firebase -钩子”，它不支持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";

乐意提供帮助;)