使用scroll-shadow-element结合TypeScript时出现ReferenceError: HTMLElement is not defined错误

我之前也碰到过类似的问题，这种错误大概率是因为你用的scroll-shadow-element包是为浏览器环境开发的，完全没考虑服务端渲染（SSR）的场景——Next.js在服务端渲染页面时，运行环境是Node.js，而Node里根本没有浏览器专属的HTMLElement对象，所以服务端尝试加载这个包时就会抛出这个错误。

你说功能能正常用，是因为客户端hydration完成后，浏览器环境里HTMLElement是存在的，组件能正常工作，但服务端的错误日志会一直存在，还是得处理掉。

给你几个可行的解决方案：

• 用Next.js动态导入禁用SSR
  这是最直接的办法，把组件改成动态导入，指定只在客户端加载，避开服务端的环境限制：

  import dynamic from 'next/dynamic';
  
  // 动态导入并禁用服务端渲染
  const ScrollShadowElement = dynamic(() => import('scroll-shadow-element'), {
    ssr: false,
  });
  
  // 之后正常在页面组件里使用即可
  export default function SelectSessionPage() {
    return (
      <ScrollShadowElement>
        <div className="scrollable-div">
          {/* 你的滚动内容 */}
        </div>
      </ScrollShadowElement>
    );
  }
  

• 检查包的SSR适配方案
  你可以去看看这个包的仓库issues，有没有其他开发者遇到过同样的SSR问题，或者作者有没有给出适配SSR的配置说明——比如有没有提供专门的SSR入口文件，或者需要额外的polyfill来兼容服务端环境。

• 手动实现滚动阴影效果
  如果这个包的SSR问题暂时没法解决，也可以考虑自己用CSS + 少量JS实现滚动阴影：比如用linear-gradient做阴影样式，再监听滚动事件来控制阴影的显示隐藏，这样既不用依赖第三方包，也能完全适配SSR环境。

备注：内容来源于stack exchange，提问作者dyzhuu