[英]I'm starting to create my web app with next.js, so I import firebase from "firebase". then this error occur in the terminal:
I'm building a next.js web app and I want to use firebase for database and authentication.我正在构建一个 next.js 网络应用程序,我想使用 firebase 进行数据库和身份验证。 when I import firebase in a file this error occurs:当我在文件中导入 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
this is my firebase.js file:这是我的 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 };
this is package.json file:这是 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"
}
}
here is exports field in package.json in node_modules.firebase :这是 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"
}
},
}
I have done:我已经做好了:
yarn add firebase
What have I done wrong?我做错了什么?
First of all the default export of the firebase SFK is coming from firebase/app
and not just firebase
首先,firebase SFK 的默认导出来自firebase/app
而不仅仅是firebase
Next, you are using the firebase SDK V9, that has just been release few days ago and you have some issues to solve about that :接下来,您使用的是几天前刚刚发布的 firebase SDK V9,您有一些问题需要解决:
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/storage";
Happy to help ;)乐意效劳 ;)
如果您仍然没有修复它,请告诉我,但我向您保证会这样做请点击此链接,并仔细阅读
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.