Next.js 9.5在_app中引入全局SCSS报错：Cannot read property 'parentNode' of null

我之前也碰到过这个问题，这其实是Next.js 9.5早期版本的一个已知bug——核心原因是开发环境下，style-loader试图注入样式时，Next.js自动生成的样式锚点元素#__next_css__DO_NOT_USE__还没被创建出来，导致代码找不到这个元素，进而抛出Cannot read property 'parentNode' of null的错误。

下面给你几个可行的解决办法，按推荐优先级排序：

1. 升级Next.js版本（最推荐） #

这个bug在Next.js 9.5的后续补丁版本以及更高版本（比如10.x及以上）已经被官方修复了。直接升级到最新的稳定版本就能彻底解决问题，执行以下命令：

# npm 用户
npm install next@latest

# yarn 用户
yarn add next@latest

2. 调整全局SCSS的引入方式（适合无法升级的场景） #

如果暂时不能升级版本，可以试试调整样式文件的引入逻辑：

• 确保你的next.config.js已经正确配置了SCSS支持：

  module.exports = {
    sassOptions: {
      includePaths: ['./styles'], // 根据你的样式目录调整路径
    },
  };
  

• 把全局SCSS文件（比如index.scss）直接在_app.js顶部用常规方式引入，也就是import '../styles/index.scss'，避免使用报错代码里那种被webpack loader处理后的特殊语法。

3. 临时hack：手动创建锚点元素 #

如果上面两种方法都暂时没法用，你可以在_app.js里手动提前创建那个缺失的锚点元素，来绕过这个错误：

import React, { useEffect } from 'react';
import '../styles/index.scss';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 检查锚点元素是否存在，不存在就创建并插入到head里
    const anchorElement = document.querySelector('#__next_css__DO_NOT_USE__');
    if (!anchorElement) {
      const newAnchor = document.createElement('div');
      newAnchor.id = '__next_css__DO_NOT_USE__';
      document.head.appendChild(newAnchor);
    }
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

不过这个方法只是临时绕过问题，不建议长期使用，还是优先升级版本更稳妥。

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