NextJS 快速刷新执行完全重新加载并抛出错误：无法加载脚本：/_next/static/chunks/pages/register.js

Question

我正在尝试导航<Link href="/register">Register</Link>到我的注册页面，但是当我单击它时，我收到一条错误/警告，内容是：

• NextJS 无法加载我的脚本：

或者

• 快速重新加载必须执行完全重新加载

在这两种情况下，我在终端中收到相同的消息：

这是我的注册页面组件：

import type { NextPage } from "next/types";
import type { FormEvent } from "react";
import { useRef } from "react";
import { createUser } from "../../helpers/helperFuncs";
import styles from "./styles.module.scss";

const Register: NextPage = (): JSX.Element => {
  const emailInputRef = useRef<HTMLInputElement | null>(null);
  const passwordInputRef = useRef<HTMLInputElement | null>(null);

  const submitHandler = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const enteredEmail = emailInputRef.current?.value ?? "";
    const enteredPassword = passwordInputRef.current?.value ?? "";

    // create a new user
    try {
      const createdUser = await createUser(enteredEmail, enteredPassword);
      console.log("createdUser", createdUser);
    } catch (err) {
      console.log("err", err);
    }
  };

  return (
    <div className={styles.auth}>
      <h1>{"Sign Up"}</h1>
      <form onSubmit={submitHandler}>
        <div className={styles.control}>
          <label htmlFor="email">Your Email</label>
          <input type="email" id="email" required ref={emailInputRef} />
        </div>

        <div className={styles.control}>
          <label htmlFor="password">Your Password</label>
          <input
            type="password"
            id="password"
            required
            ref={passwordInputRef}
          />
        </div>
        <div className={styles.actions}>
          <button>{"Create Account"}</button>
        </div>
      </form>
    </div>
  );
};

export default Register;

我正在导入的 createUser 函数：

async function createUser(email: string, password: string) {
  const response = await fetch("/api/auth/register", {
    method: "POST",
    body: JSON.stringify({ email, password }),
    headers: {
      "Content-Type": "application/json",
    },
  });

  const data = await response.json();
  if (!response.ok) {
    throw new Error(data.message || "Something went wrong");
  }
  return data;
}

export { createUser };

我不明白为什么 NextJS 会强制完全重新加载，因为我没有使用类组件，而且我不认为我正在编辑 React 渲染树之外的任何内容。

无法加载脚本错误消息也超出了我的范围，但我认为这与 webpack 的奇怪有关，因为它要求一个 .js 文件，而这也是终端消息似乎暗示的内容。我很困惑。任何帮助将不胜感激。

Edit1：我发现是它的使用className={styles.<whatever>}导致了这些错误并强制重新加载。但问题仍然存在 - 那么我怎样才能以正确的方式使用我的 styles.module.scss 呢？

Answer 1

我有一个类似的问题。尝试删除nextjs缓存文件。

删除项目位置中的 .next 文件夹并重新启动您的应用程序。