我试图通过<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文件,而这也是终端信息所暗示的。我被难住了。任何帮助都将非常感激。
**Edit 1:**我已经发现是className={styles.<whatever>}
的使用导致了这些错误和强制重载。但是问题仍然存在--那么我如何以正确的方式使用我的styles.module.scss呢?
2条答案
按热度按时间6gpjuf901#
我遇到了类似的问题。尝试删除nextjs缓存文件。
删除项目位置中的.next文件夹并重新启动应用。
3gtaxfhh2#
这是因为在我的styles.modula.scss中,我正在一个按钮样式定义中导入一个图像(希望使按钮“完全透明”,并在悬停时显示根父背景):