將庫導入 Next.js 組件問題

Question

我對自己的情況有點困惑。 出於某種奇怪的原因，我無法將任何內容導入到我的導航組件中。 但是，我可以毫無問題地在我的其他組件中自由導入。

import { useState, useEffect } from "react";
import styled from "styled-components";
import Link from "next/link";


const Nav = () => {
  
  const [isAuth, setIsAuth] = useState(false);
  const [user, setUser] = useState(null);

  const getUser = async () => {
    const res = await fetch("/api/me");
    const json = await res.json();
    setUser(json);
  };

  useEffect(() => {
    if (user === null || user.message === "FAILED AUTH") {
      setIsAuth(false);
    } else {
      setIsAuth(true);
    }
  }, [user]);

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

  const logout = () => {
  
  };

  return (
    <NavWrapper>
      <Home href="/">
        <StyledE>
          E<StyledBlog>BLOG</StyledBlog>
        </StyledE>
      </Home>
      
      <NavLinkWrapper>
        {isAuth ? (
          <LoggedIn>
            <Username>{user.username}</Username>
            <LogoutButton href="/account/login">
              <Logout onClick={logout}>Log Out</Logout>
            </LogoutButton>
          </LoggedIn>
        ) : (
          <LoggedOut>
            <LoginButton href="/account/login">
              <LogIn>Log In</LogIn>
            </LoginButton>
            <SignUpButton href="/account/signup">
              <SignUp>Sign Up</SignUp>
            </SignUpButton>
          </LoggedOut>
        )}
      </NavLinkWrapper>
    </NavWrapper>
  );
};
export default Nav;

這是我嘗試import Cookies from "js-cookie"時遇到的錯誤

error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我的其他組件導入一切都很好....


import styled from "styled-components";
import { useState } from "react";
import Cookies from "js-cookie";


const LoginForm = () => {
  const contentType = "application/json";
  const [loginValue, setLoginValues] = useState({
    username: "",
    password: "",
  });

  const handleLoginChange = (e) => {
    const { name, value } = e.target;
    setLoginValues((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleLoginSubmit = (e) => {
    e.preventDefault();
    fetch("/api/auth", {
      method: "POST",
      headers: {
        "Content-Type": contentType,
      },
      body: JSON.stringify(loginValue),
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        if (data && data.error) {
          console.log("FAILED LOGIN");
        }
        if (data && data.token) {
          console.log("Success");
          Cookies.set("token", data.token, { expires: 1 });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <FormWrapper>
      <Form method="POST">
        <Input
          value={loginValue.username}
          type="text"
          name="username"
          placeholder="Username"
          onChange={(e) => handleLoginChange(e)}
        />
        <Input
          value={loginValue.password}
          type="password"
          name="password"
          placeholder="Password"
          onChange={(e) => handleLoginChange(e)}
        />
        <LoginButton type="button" onClick={handleLoginSubmit}>
          Login
        </LoginButton>
      </Form>
    </FormWrapper>
  );
};
export default LoginForm;

它沒有給我這樣的錯誤....

請問有誰知道是什么問題？ 我已經嘗試了一切。 谷歌了一整天。 但它一直給我同樣的錯誤。 不僅是 js-cookie 庫，我實際上無法將任何其他內容導入到這個 Nav 組件中。 甚至沒有其他組件...

Answer 1

我想我解決了。 出於某種原因，此特定組件要求您以這種方式導入：

const cookies = require("js-cookie")

我對為什么有點困惑......我的其他組件不需要這樣做......

有人可以解釋或指導我為什么會這樣嗎？

另外，我的其他表單組件被導入到頁面中。

但是，Nav 組件被導入到 Layout 組件中，然后將其包裹在我的 _app.js 函數中

const MyApp = ({ Component, pageProps }) => {
  
  return (
    <Layout>
      <Head>
        <title>My Blog</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </Layout>
  );
};

任何方向都會有所幫助。 謝謝！

將庫導入 Next.js 組件問題

問題描述

1 個解決方案

解決方案1
0 2022-06-08 04:49:53

將庫導入 Next.js 組件問題

問題描述

1 個解決方案

解決方案1 0 2022-06-08 04:49:53

解決方案1
0 2022-06-08 04:49:53