Gatsby中使用Isotope遇SSR时window未定义错误求助

以下是几种针对性的解决方法，你可以逐一尝试：

1. 动态导入Isotope并在useEffect中初始化 #

不要在组件顶部直接导入Isotope，而是在useEffect里动态导入，确保仅在客户端环境执行：

import React, { useEffect, useRef } from 'react';

const IsotopeGrid = () => {
  const gridRef = useRef(null);
  let isotopeInstance = null;

  useEffect(() => {
    // 动态导入Isotope
    const initIsotope = async () => {
      const Isotope = (await import('isotope-layout')).default;
      if (gridRef.current) {
        isotopeInstance = new Isotope(gridRef.current, {
          // 你的Isotope配置项
          itemSelector: '.grid-item',
          layoutMode: 'masonry'
        });
      }
    };

    initIsotope();

    // 清理函数：组件卸载时销毁Isotope实例
    return () => {
      if (isotopeInstance) {
        isotopeInstance.destroy();
      }
    };
  }, []);

  return (
    <div ref={gridRef} className="grid">
      {/* 你的网格项 */}
      <div className="grid-item">Item 1</div>
      <div className="grid-item">Item 2</div>
    </div>
  );
};

export default IsotopeGrid;

2. 借助gatsby-browser.js隔离客户端代码 #

如果Isotope需要全局使用，可以在gatsby-browser.js中处理导入逻辑，这个文件仅在客户端运行：

// gatsby-browser.js
import Isotope from 'isotope-layout';

export const onClientEntry = () => {
  // 可在此做全局初始化操作，或仅确保Isotope在客户端加载
};

之后在组件中，依然要在useEffect内初始化Isotope实例，保证DOM元素已挂载。

3. 标记组件为客户端专属 #

如果使用Isotope的组件无需SSR渲染，可以用React.lazy结合Suspense实现客户端专属加载：

import React, { Suspense } from 'react';

// 动态导入Isotope组件
const IsotopeGrid = React.lazy(() => import('./IsotopeGrid'));

const Page = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <IsotopeGrid />
    </Suspense>
  );
};

export default Page;

常见排查点 #

• 检查是否在组件顶层（useEffect外部）调用了Isotope的API，所有依赖window的操作必须放在客户端执行的代码块中。
• 若问题仍存在，可通过gatsby build --verbose查看构建日志，排查是否有第三方依赖间接触发了Isotope的SSR加载。

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