在 next.js 中使用 firebase 时出现错误

Question

找不到模块：包路径。不是从包 /home/kapil/web/facebook-clone/node_modules/firebase 导出的（请参阅 /home/kapil/web/facebook-clone/node_modules/firebase/package.json 中的导出字段） 5 |导入 { useRef, useState } 从“反应”； 6 |从 "../firebase" 导入 { db, storage };

7 |从“firebase”导入firebase； 8 | 9 |函数输入框（）{ 10 | const [会话] = useSession();

这是一个错误，我已经多次安装 firebase 并且还为所有依赖项运行 npm install

这是我的 firebase package.json 文件代码

   {
  "_from": "firebase@^9.0.0",
  "_id": "firebase@9.0.1",
  "_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": "firebase-support@google.com",
    "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"
}

这是我的组件。这里我用过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;

这是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 };

Answer 1

Firebase 几天前发布了一个新版本 (v9.0)，其中包含对 tree-shaking 的模块化支持。

基本上你应该这样使用它：

import { initializeApp } from 'firebase/app';
const config = { ... };

const app = initializeApp(config);

您可以在docs 中找到更多相关信息。

Answer 2

正如@Kox 所说，您没有使用新的模块化 SDK 语法。您现在必须将所有代码重构为新语法或使用兼容库，如下所示，因为您似乎有很多代码要重构：

import firebase from "firebase/compat/app";
import "firebase/compat/storage";

您可以将您的导入更改为这些兼容库，这样您现在就不必重构所有代码来继续操作。但我建议创建一个新分支并开始迁移到新的模块化语法以从 tree-shaking 中受益。