Kapil Gupta
Reputation: 1
i m getting error while using firebase in next.js
Module not found: Package path . is not exported from package /home/kapil/web/facebook-clone/node_modules/firebase (see exports field in /home/kapil/web/facebook-clone/node_modules/firebase/package.json) 5 | import { useRef, useState } from "react"; 6 | import { db, storage } from "../firebase";
7 | import firebase from "firebase"; 8 | 9 | function InputBox() { 10 | const [session] = useSession();
this is error i have install firebase many time and also runs npm install for all dependency
this is my firebase package.json file code
{
"_from": "firebase@^9.0.0",
"_id": "[email protected]",
"_inBundle": false,
"_integrity": "sha512-RMpbXsVlxqMX+s/gYudnUZeSZXPiLCJMdaxbZ0WRiMjLuJc6ZkbpRy7yz7rZQpL0wRD6gN4K5C+JaKEQtN3jAQ==",
"_location": "/firebase",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "firebase@^9.0.0",
"name": "firebase",
"escapedName": "firebase",
"rawSpec": "^9.0.0",
"saveSpec": null,
"fetchSpec": "^9.0.0"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/firebase/-/firebase-9.0.1.tgz",
"_shasum": "6bc5f9d7bdcd864ef98f2219fa0cd240f2e48b3c",
"_spec": "firebase@^9.0.0",
"_where": "/home/kapil/web/facebook-clone",
"author": {
"name": "Firebase",
"email": "[email protected]",
"url": "https://firebase.google.com/"
},
"bugs": {
"url": "https://github.com/firebase/firebase-js-sdk/issues"
},
"bundleDependencies": false,
"components": [
"analytics",
"app",
"app-check",
"auth",
"auth/cordova",
"auth/react-native",
"functions",
"firestore",
"firestore/lite",
"storage",
"performance",
"remote-config",
"messaging",
"messaging/sw",
"database"
],
"dependencies": {
"@firebase/analytics": "0.7.0",
"@firebase/analytics-compat": "0.1.1",
"@firebase/app": "0.7.0",
"@firebase/app-check": "0.4.0",
"@firebase/app-check-compat": "0.1.1",
"@firebase/app-compat": "0.1.1",
"@firebase/app-types": "0.7.0",
"@firebase/auth": "0.17.1",
"@firebase/auth-compat": "0.1.1",
"@firebase/database": "0.12.0",
"@firebase/database-compat": "0.1.0",
"@firebase/firestore": "3.0.1",
"@firebase/firestore-compat": "0.1.1",
"@firebase/functions": "0.7.0",
"@firebase/functions-compat": "0.1.1",
"@firebase/installations": "0.5.0",
"@firebase/messaging": "0.9.0",
"@firebase/messaging-compat": "0.1.0",
"@firebase/performance": "0.5.0",
"@firebase/performance-compat": "0.1.0",
"@firebase/polyfill": "0.3.36",
"@firebase/remote-config": "0.2.0",
"@firebase/remote-config-compat": "0.1.0",
"@firebase/storage": "0.8.1",
"@firebase/storage-compat": "0.1.1",
"@firebase/util": "1.3.0"
},
"deprecated": false,
"description": "Firebase JavaScript library for web and Node.js",
"devDependencies": {
"@rollup/plugin-commonjs": "17.1.0",
"@rollup/plugin-node-resolve": "11.2.0",
"gulp": "4.0.2",
"gulp-replace": "1.1.3",
"gulp-sourcemaps": "3.0.0",
"rollup": "2.52.2",
"rollup-plugin-license": "2.5.0",
"rollup-plugin-sourcemaps": "0.6.3",
"rollup-plugin-terser": "7.0.2",
"rollup-plugin-typescript2": "0.30.0",
"rollup-plugin-uglify": "6.0.4",
"typescript": "4.2.2"
},
"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"
}
},
"files": [
"**/dist/",
"**/package.json",
"/firebase*.js",
"/firebase*.map",
"compat/index.d.ts"
],
"homepage": "https://firebase.google.com/",
"keywords": [
"authentication",
"database",
"Firebase",
"firebase",
"realtime",
"storage",
"performance",
"remote-config"
],
"license": "Apache-2.0",
"name": "firebase",
"repository": {
"type": "git",
"url": "git+https://github.com/firebase/firebase-js-sdk.git"
},
"scripts": {
"build": "rollup -c && gulp cdn-type-module-path && yarn build:compat",
"build:compat": "rollup -c compat/rollup.config.js",
"dev": "rollup -c -w",
"test": "echo 'No test suite for firebase wrapper'",
"test:ci": "echo 'No test suite for firebase wrapper'"
},
"version": "9.0.1"
}
this is my component . here i have used firebse
import { useSession } from "next-auth/client";
import Image from "next/image";
import { EmojiHappyIcon } from "@heroicons/react/outline";
import { CameraIcon, VideoCameraIcon } from "@heroicons/react/solid";
import { useRef, useState } from "react";
import { db, storage } from "../firebase";
import firebase from "firebase";
function InputBox() {
const [session] = useSession();
const inputRef = useRef(null);
const filePickerRef = useRef(null);
const [imageToPost, setImageToPost] = useState(null);
const sendPost = (e) => {
e.preventDefault();
if (!inputRef.current.value) return;
db.collection("posts")
.add({
message: inputRef.current.value,
name: session.user.name,
email: session.user.email,
image: session.user.image,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
})
.then((doc) => {
if (imageToPost) {
const uploadTask = storage
.ref(`posts/${doc.id}`)
.putString(imageToPost, "data_url");
removeImage();
uploadTask.on(
"state_change",
null,
(error) => console.error(error),
() => {
storage
.ref(`posts`)
.child(doc.id)
.getDownloadURL()
.then((url) => {
db.collection("posts").doc(doc.id).set(
{
postImage: url,
},
{ merge: true }
);
});
}
);
}
});
inputRef.current.value = "";
};
const addImageToPost = (e) => {
const reader = new FileReader();
if (e.target.files[0]) {
reader.readAsDataURL(e.target.files[0]);
}
reader.onload = (event) => {
setImageToPost(event.target.result);
};
};
const removeImage = () => {
setImageToPost(null);
};
return (
<div className="bg-white p-2 rounded-2xl shadow-md text-gray-500 font-medium mt-6">
<div className="flex space-x-4 p-4 items-center">
<Image
alt="icon"
className="rounded-full"
src={session.user.image}
width={40}
height={40}
layout="fixed"
/>
<form className="flex flex-1">
<input
ref={inputRef}
className="rounded-full h-12 bg-gray-100 flex-grow px-5 focus:outline-none"
type="text"
placeholder={`What's on yout mind, ${session.user.name}`}
/>
<button hidden type="submit" onClick={sendPost}>
Submit
</button>
</form>
{imageToPost && (
<div
onClick={removeImage}
className="flex flex-col filter hover:brightness-110 transition duration-150 transform hover:scale-105 cursor-pointer"
>
<img className="h-10 object-contain" scr={imageToPost} alt="" />
<p className="text-xs text-red-500 text-center">Remove</p>
</div>
)}
</div>
<div className="flex justify-evenl p-3 border-t">
<div className="inputIcon">
<VideoCameraIcon className="h-7 text-red-500" />
<p className="text-xs sm:text-sm xl:text-base">Live Video</p>
</div>
<div
className="inputIcon"
onClick={() => filePickerRef.current.click()}
>
<CameraIcon className="h-7 text-green-400" />
<p className="text-xs sm:text-sm">Photo/Video</p>
<input
ref={filePickerRef}
onChange={addImageToPost}
type="file"
hidden
/>
</div>
<div className="inputIcon">
<EmojiHappyIcon className="h-7 text-yellow-300" />
<p className="text-xs sm:text-sm xl:text-base">Feeling/Activity</p>
</div>
</div>
</div>
);
}
export default InputBox;
and this is configuration file of firebase
import firebase from "firebase";
import "firebase/storage";
const firebaseConfig = {
apiKey: "AIzaSyA5Z47-ShjE3s9u6Sn70UGLg6Y_XiwqimI",
authDomain: "f-b-clone.firebaseapp.com",
projectId: "f-b-clone",
storageBucket: "f-b-clone.appspot.com",
messagingSenderId: "199066964646",
appId: "1:199066964646:web:6ba2519e34d017023bda67",
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
const storage = firebase.storage();
export { db, storage };
Upvotes: 0
Views: 8302
Answers (2)
Dharmaraj
Reputation: 50850
As @Kox mentioned you are not using the new modular SDK syntax. You would have to refactor all of your code the new syntax or use compat libraries as shown below for now since it seems you have a lot of code to refactor:
import firebase from "firebase/compat/app";
import "firebase/compat/storage";
You can change your imports to these compat libraries so you won't have to refactor all of your code now to proceed. But I'd recommend creating a new branch and start migrating to the new modular syntax to get benefit from tree-shaking.
Upvotes: 2
Kox
Reputation: 853
Firebase released a new version (v9.0) few days ago with modular support for tree-shaking.
Basically you should use it this way:
import { initializeApp } from 'firebase/app';
const config = { ... };
const app = initializeApp(config);
You can find more on this in the docs.
Upvotes: 2
Related Questions
- React NextJS Firebase error refresh Firebase App named '[DEFAULT]' already exists
- Can't resolve 'react-firebase-hooks'
- Error with firebase integration on my Nextjs project
- Module not found: Package path . is not exported from package / Firebase won't update in next.js app
- NEXTJS: Invalid hook call
- 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 get an error when I try to run yarn build in next.js
- TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_2__.default.default.auth is not a function
- next.js error: Error: > Build failed because of webpack errors
- Firebase error while using firestore in NextJS