Question

我很难在 NextJS 应用的特定组件中导入 Firebase Admin。基本思想是根据用户登录与否在 NavBar 组件上显示不同的按钮。在 firebase-admin.js 中，有一个函数可以在提供有效令牌时验证用户 ID 令牌。这是我导入它的方式：

import { verifyIdToken } from "../lib/firebase-admin";

返回的错误：

<块引用>

错误 - ./node_modules/google-auth-library/build/src/auth/googleauth.js:17:0 找不到模块：无法解析“child_process”

此功能在另一个页面（即索引页面）上运行良好。我尝试更改 NavBar 代码中的大部分内容，我很确定问题始于 firebase-admin.js 被导入。我不知道是什么导致了它，尽管我仍然有一些理论：

可能是将 NavBar 直接放置在根页面 _app.js 中导致了问题：

#The rest of the imports are up here!#
import NavBar from "../components/NavBar";
import { AuthProvider } from "../lib/auth";

function MyApp({ Component, pageProps }) {
  return (
    <>
      #Some code here#
      <AuthProvider>
        <div
          className="page"
        >
          <NavBar /> <--- NavBar here!
          <Component {...pageProps} />
          <div className="footer">
            <Footer />
          </div>
        </div>
      </AuthProvider>
    </>
  );
}

也许无法从组件调用 Firebase 管理员。

老实说，提出的理论似乎都不够合理，但我的想法已经用完了。

一如既往，非常感谢任何帮助和想法。 :)

EDIT - NavBar 组件的完整代码：

import { verifyIdToken } from "../lib/firebase-admin";
import nookies from "nookies";
import Link from "next/link";
import React, { useState, useEffect } from "react";
import { Button } from "./Button";
import NavBarLogged from "./NavBarLogged";

const Navbar = ({ uid }) => {
  const [click, setClick] = useState(false);
  const [button, setButton] = useState(true);

  const handleClick = () => setClick(!click);
  const closeMobileMenu = () => setClick(false);

  const showButton = () => {
    if (window.innerWidth <= 960) {
      setButton(false);
    } else {
      setButton(true);
    }
  };

  useEffect(() => {
    showButton();
  }, []);

  useEffect(() => {
    window.addEventListener("resize", showButton);
  }, []);

  if (uid) return <NavBarLogged />;

  return (
    <>
      <nav className="navbar">
        <div className="navbar-container">
          <div className="menu-icon" onClick={handleClick}>
            <i className="fas fa-bars"></i>
          </div>
          <ul className={click ? "nav-menu active" : "nav-menu"}>
            <li className="nav-item">
              <Link href="/" onClick={closeMobileMenu}>
                <a className="nav-links">Home</a>
              </Link>
            </li>
            <li className="nav-item">
              <Link href="#" className="nav-links" onClick={closeMobileMenu}>
                <a className="nav-links">O que é Coliving</a>
              </Link>
            </li>
            <li className="nav-item">
              <Link href="#" className="nav-links" onClick={closeMobileMenu}>
                <a className="nav-links">Sobre a Croosa</a>
              </Link>
            </li>
            <li className="nav-item">
              <Link href="#" className="nav-links" onClick={closeMobileMenu}>
                <a className="nav-links">Blog</a>
              </Link>
            </li>
            <li className="nav-item">
              <Link href="#" onClick={closeMobileMenu}>
                <a className="nav-links-mobile">Sign Up</a>
              </Link>
            </li>
          </ul>
          {button && (
            <Button
              buttonStyle="btn--outline"
              buttonSize="btn--large"
              href="/logon"
            >
              Entrar
            </Button>
          )}
        </div>
      </nav>
    </>
  );
};

export const getServerSideProps = async (ctx) => {
  try {
    const cookies = nookies.get(ctx);
    const token = await verifyIdToken(cookies.token);

    const { uid } = token;

    return {
      props: { uid },
    };
  } catch (error) {
    const uid = null;
    return {
      props: { uid },
    };
  }
};

export default Navbar;

找不到模块：导入 Firebase Admin 时无法解析“child_process” - NextJS

0 个答案: