NextJS - TypeError: Cannot read properties of null (reading 'removeChild') when saving SASS file

Question

I'm getting an error as such:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'removeChild')

Call Stack
HTMLLinkElement.eval
node_modules/next/dist/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement.js (1:1136)

This happens when I edit a SASS file, but the app gets hot-reloaded correctly and everything works fine. It's just the error is kinda bugging me. What could this possibly be?

Note that I'm currently using NextJS 13.

My full code here

layout.js

import "./globals.scss";
import { dmSans } from "./fonts";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <div className={`${dmSans.variable}`}>{children}</div>
      </body>
    </html>
  );
}

page.js

"use client";

import { useEffect } from "react";
import ShortDescription from "@/components/short-description";
import SelectedWork from "@/components/selected-work";
import RotatingText from "@/components/rotating-text";

import pguImage from "@/public/pgu.webp";
import adaroImage from "@/public/adaro.webp";
import petraImage from "@/public/petra.webp";

import styles from "./page.module.scss";

import { gsap } from "gsap";

export default function Home() {
  useEffect(() => {
    gsap.to("#hero > * > *", {
      duration: 1,
      y: 0,
      opacity: 1,
      stagger: 0.25,
      ease: "power2",
    });
  }, []);

  return (
    <div id="main-container">
      <header className={styles.header}>
        <span className={styles.header__title}>OWENN GIMLI</span>
      </header>

      <div className={`${styles.hero} container`} id="hero">
        <div>
          <h4>\\ Personal portfolio</h4>
        </div>
        <div>
          <h1>DATA SCIENCE,</h1>
        </div>
        <div>
          <h1>WEB DEVELOPMENT</h1>
        </div>
        <div>
          <h1>&amp; DESIGN.</h1>
        </div>
      </div>
    </div>
  );
}

Can you edit your question to include the code for each file on the page this is happening? — docker compose
– docker compose, Commented Aug 15, 2023 at 8:59
I think the problem isn't connected to sass file but rather to piece of code with "removeChild" — Lilly
– Lilly, Commented Aug 15, 2023 at 11:00
When you save your sass file the page gets reloaded and due to the problem with that place of code the error is shown — Lilly
– Lilly, Commented Aug 15, 2023 at 11:01
@Lilly I literally have no removeChild used anywhere on my code. — Owenn
– Owenn, Commented Aug 18, 2023 at 8:33
@AudunHilden @Lilly I have edited my question and added the code. It seems to only happen when I save a module SASS file. — Owenn
– Owenn, Commented Aug 18, 2023 at 8:38

Mark Rotteveel · Accepted Answer · 2023-10-20 08:09:09Z

2

I faced the same error today trying to use SASS files. The way I resolved the problem was by removing the .next folder and restarting the server.

edited Oct 20, 2023 at 8:09

Mark Rotteveel

110k240 gold badges160 silver badges232 bronze badges

answered Oct 19, 2023 at 23:01

Ayoub Wazane

756 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FireFly · Accepted Answer · 2023-09-18 10:28:44Z

1

I don't have a solution I'm afraid, but am also experiencing this problem.. I've found this on my search: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/682 which claims that a similar issue has been fixed.

My code also runs and uploads fine, and does not use removeChild anywhere!

Sorry I don't have a fix, I'll let you know if I do figure it out, but I just wanted to let you know you're not alone :)

answered Sep 18, 2023 at 10:28

FireFly

2313 silver badges4 bronze badges

Comments

Ayush Choudhary · Accepted Answer · 2024-06-07 12:46:49Z

0

In my case it was a empty template.js file, error resolved after removing that

answered Jun 7, 2024 at 12:46

Ayush Choudhary

296 bronze badges

Comments

tomheffels · Accepted Answer · 2023-10-03 15:52:24Z

-3

At the risk of sounding like the guy in the picture below... I got the same error in development over and over again, but it seems to have disappeared when I killed my npm run dev process and restarted it. Sometimes it's just that simple, hope this will solve it for you as well!

answered Oct 3, 2023 at 15:52

tomheffels

771 gold badge2 silver badges7 bronze badges

1 Comment

Owenn Over a year ago

Nope doesn't work haha, I tried restarting the server, but still everytime I save a SASS file, it will still throw me the same error.

Collectives™ on Stack Overflow

NextJS - TypeError: Cannot read properties of null (reading 'removeChild') when saving SASS file

My full code here

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My full code here

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related