NextJS 13编辑SASS文件时出现TypeError: Cannot read properties of null错误

错误信息 #

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)

编辑SASS文件时会触发该错误，应用热重载正常、功能不受影响，但报错问题需要解决。

相关代码 #

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

可能的原因 #

• mini-css-extract-plugin热重载逻辑冲突：错误栈指向Next.js内置的该插件热替换模块，更新SASS时，插件尝试操作已被React卸载的<link>样式节点，导致读取null的removeChild方法。
• App Router样式加载机制特性：Next.js 13 App Router对全局样式、模块化样式的加载顺序和节点管理和Pages Router不同，热重载时可能出现样式节点生命周期不匹配的情况。
• 字体变量包裹结构的影响：RootLayout中用<div>包裹children并挂载字体变量类，可能干扰了样式节点的正常挂载/卸载流程，和热重载逻辑产生冲突。
• 客户端组件动画的间接干扰：page.js作为客户端组件，GSAP的初始动画在DOM未完全稳定时执行，可能打乱了样式节点的状态，触发空节点操作。

内容的提问来源于stack exchange，提问作者Owenn