NextJS fast refresh performing full reload and throwing Error: failed to load script: /_next/static/chunks/pages/register.js

Question

I'm trying to navigate via <Link href="/register">Register</Link> to my registration page, but when I click it I get an error/warning either saying that:

• NextJS failed to load my script:

OR

• fast reload had to perform a full reload

In both cases I get the same message in my terminal:

This is my register page component:

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;

My createUser function that I'm importing:

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

I don't understand why NextJS would be forcing full reloads, since I'm not using class components, and I don't think I'm editing anything outside of the React rendering tree.

The failed to load script error message is also beyond me, but I reckon it's got to do with webpack being weird, since it's asking for a .js file and that's also what the terminal message seems to imply. I'm stumped. Any help would be greatly appreciated.

Edit1: I've figured out that it's the usage of className={styles.<whatever>} that's causing these errors and forced reloads. The questions still remains though - how can I use my styles.module.scss in the correct way then?

Answer 1

I had a problem similar to this. Try deleting nextjs cached files.

Delete the .next folder in your project location and restart your app.

Answer 2

1- Delete .next folder

2- Clear the cache

3- Launch project again