Gatsby中用loadable-component仍无法调用getComputedStyle()求助

1. 修正getComputedStyle的调用方式 #

你当前的代码写法有误，getComputedStyle是window对象的方法，不是DOM元素的实例方法，正确调用逻辑如下：

const element = frameRef.current;
if (element) {
  const computedStyle = window.getComputedStyle(element);
  const trueWidth = parseFloat(computedStyle.getPropertyValue("width"));
}

2. 确保依赖DOM的代码仅在客户端执行 #

Gatsby的SSR阶段运行在Node环境，没有浏览器的DOM和window对象，必须把这类逻辑放到仅客户端触发的执行时机里：

• 用React的useEffect钩子：它只会在组件挂载到客户端DOM后执行
• 或通过typeof window !== 'undefined'做环境判断

示例代码：

import { useEffect, useRef } from 'react';
import LoadableP5 from './your-loadable-component-path';

const P5Sketch = () => {
  const frameRef = useRef(null);
  // 存储画布宽度，供p5草图使用
  const [canvasWidth, setCanvasWidth] = useState(0);

  useEffect(() => {
    // 此代码块仅在客户端运行
    if (frameRef.current && window) {
      const computedStyle = window.getComputedStyle(frameRef.current);
      const trueWidth = parseFloat(computedStyle.getPropertyValue("width"));
      setCanvasWidth(trueWidth);
    }
  }, []);

  const sketch = (p) => {
    p.setup = () => {
      // 草图内的客户端逻辑也要加环境判断
      if (typeof window !== 'undefined' && canvasWidth > 0) {
        p.createCanvas(canvasWidth, canvasWidth * 0.75);
      }
    };

    p.draw = () => {
      // 绘制逻辑...
    };
  };

  return (
    <div ref={frameRef}>
      <LoadableP5 sketch={sketch} />
    </div>
  );
};

export default P5Sketch;

3. 强制loadable-component仅在客户端加载 #

给loadable-component添加ssr: false配置，避免SSR阶段尝试解析组件，彻底跳过服务端渲染流程：

import loadable from "@loadable/component"

const LoadableP5 = loadable(() => import('react-p5-wrapper'), {
  resolveComponent: ({ReactP5Wrapper}) => ReactP5Wrapper,
  ssr: false, // 新增：禁止在SSR阶段加载该组件
});

4. 监听窗口 resize 实现自适应（补充） #

如果需要草图随窗口大小变化自适应，可以在useEffect里添加resize监听：

useEffect(() => {
  const updateCanvasSize = () => {
    if (frameRef.current && window) {
      const computedStyle = window.getComputedStyle(frameRef.current);
      const trueWidth = parseFloat(computedStyle.getPropertyValue("width"));
      setCanvasWidth(trueWidth);
    }
  };

  // 初始化时执行一次
  updateCanvasSize();
  // 添加resize监听
  window.addEventListener('resize', updateCanvasSize);

  // 组件卸载时移除监听
  return () => window.removeEventListener('resize', updateCanvasSize);
}, []);

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