CODEWITHSUNDEEP
next.jssasscss-loader
Owenn
Owenn

Reputation: 1150

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

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

Upvotes: 4

Views: 8015

Answers (4)

Ayush Choudhary
Ayush Choudhary

Reputation: 29

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

Upvotes: 0

Ayoub Wazane
Ayoub Wazane

Reputation: 75

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.

Upvotes: 2

tomheffels
tomheffels

Reputation: 77

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!

IT Department

Upvotes: -3

FireFly
FireFly

Reputation: 221

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 :)

Screenshot of error

Upvotes: 1

Related Questions