我开始使用 next.js 创建我的网络应用程序，所以我从“firebase”导入了 firebase。然后在终端中发生此错误：
Posted
技术标签:
【中文标题】我开始使用 next.js 创建我的网络应用程序，所以我从“firebase”导入了 firebase。然后在终端中发生此错误：【英文标题】：I'm starting to create my web app with next.js, so I import firebase from "firebase". then this error occur in the terminal: 【发布时间】：2021-10-28 13:14:41 【问题描述】：我正在构建一个 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
我做错了什么？
【问题讨论】：
请修剪您的代码，以便更容易找到您的问题。请按照以下指南创建minimal reproducible example。 【参考方案1】：首先，firebase SFK 的默认导出来自 firebase/app 而不仅仅是 firebase
接下来，您使用的是几天前刚刚发布的 firebase SDK V9，您有一些问题需要解决：
您正在使用的名为“react-firebase-hooks”的包不支持 firebase V9，实际上 PR 仍在他们的 github 上打开 here 有了这个新版本的 SDK，事情有点不同，我建议你关注这个guide 最后，如果您想坚持使用 v8 语法，您可以像使用 SDK v8 时一样执行操作，只需在所有导入中添加 compat，如下所示：import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
乐于助人；）
【讨论】：
以上是关于我开始使用 next.js 创建我的网络应用程序，所以我从“firebase”导入了 firebase。然后在终端中发生此错误：的主要内容，如果未能解决你的问题，请参考以下文章
使用 Next.js 和 Headless Wordpress 作为后端的 CORS 问题