从 "firebase" 模块导入 firebase 即使模块已经安装也无法在 reactjs 中工作
import firebase from "firebase" module not working in reactjs even the module is already installed
它显示这样的错误
.
/firebase.js:2:0
Module not found: Package path . is not exported from package C:\Users\krish\Desktop\FACEBOOK _CLONE\facebook_clone\node_modules\firebase (see exports field in C:\Users\krish\Desktop\FACEBOOK _CLONE\facebook_clone\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 |
> 2 | import firebase from 'firebase'
3 | import 'firebase/firestore'
4 |
5 |
Import trace for requested module:
./Components\InputBox.js
./Components\Feed.js
./pages\index.js
https://nextjs.org/docs/messages/module-not-found
firebase 配置代码
import firebase from 'firebase'
import 'firebase/firestore'
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "fasdfsadfdsafjsafsafsfsfsfsfs",
authDomain: "facebook-clone-13234.firebaseapp.com",
projectId: "facebook-clone-13234",
storageBucket: "facebook-clone-13234.appspot.com",
messagingSenderId: "76247424324242",
appId: "1:762470571881:web:20a2432424324424324424",
measurementId: "G-9RDT591EEG",
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const storage = firebase.storage();
export {db,storage};
package.json 文件 我已经使用 npm install firebase
安装了 firebase
{
"name": "facebook_clone",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@heroicons/react": "^1.0.4",
"firebase": "^9.0.0",
"firebase-tools": "^9.16.6",
"next": "11.1.0",
"next-auth": "^3.29.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"autoprefixer": "^10.3.3",
"eslint": "7.32.0",
"eslint-config-next": "11.1.0",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.8"
}
}
我正在使用 reactjs、nextjs 和 tailwind css 构建一个 facebook 克隆。另外,为了添加图像,我需要使用 firebase。使用 npm install firebase 安装 firebase,从“firebase”导入 firebase 后显示错误
试试这个:
import * as firebase from "firebase/app";
而不是:
import firebase from 'firebase'
这样导入
import * as firebase from "firebase/app";
它显示这样的错误
.
/firebase.js:2:0
Module not found: Package path . is not exported from package C:\Users\krish\Desktop\FACEBOOK _CLONE\facebook_clone\node_modules\firebase (see exports field in C:\Users\krish\Desktop\FACEBOOK _CLONE\facebook_clone\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 |
> 2 | import firebase from 'firebase'
3 | import 'firebase/firestore'
4 |
5 |
Import trace for requested module:
./Components\InputBox.js
./Components\Feed.js
./pages\index.js
https://nextjs.org/docs/messages/module-not-found
firebase 配置代码
import firebase from 'firebase'
import 'firebase/firestore'
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "fasdfsadfdsafjsafsafsfsfsfsfs",
authDomain: "facebook-clone-13234.firebaseapp.com",
projectId: "facebook-clone-13234",
storageBucket: "facebook-clone-13234.appspot.com",
messagingSenderId: "76247424324242",
appId: "1:762470571881:web:20a2432424324424324424",
measurementId: "G-9RDT591EEG",
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const storage = firebase.storage();
export {db,storage};
package.json 文件 我已经使用 npm install firebase
安装了 firebase{
"name": "facebook_clone",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@heroicons/react": "^1.0.4",
"firebase": "^9.0.0",
"firebase-tools": "^9.16.6",
"next": "11.1.0",
"next-auth": "^3.29.0",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"autoprefixer": "^10.3.3",
"eslint": "7.32.0",
"eslint-config-next": "11.1.0",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.8"
}
}
我正在使用 reactjs、nextjs 和 tailwind css 构建一个 facebook 克隆。另外,为了添加图像,我需要使用 firebase。使用 npm install firebase 安装 firebase,从“firebase”导入 firebase 后显示错误
试试这个:
import * as firebase from "firebase/app";
而不是:
import firebase from 'firebase'
这样导入
import * as firebase from "firebase/app";