GatsbyJS构建报错：window is not defined（AOS相关）求助

我明白你遇到的问题了——开发模式一切正常，但构建时就炸了，这是Gatsby SSR（服务端渲染）的典型坑！因为构建阶段代码是在Node.js环境跑的，这里没有浏览器的window对象，而AOS的源码里直接用到了window，所以直接在组件顶部import AOS的话，SSR阶段就会报错，哪怕你在componentDidMount里初始化也没用，因为import是在代码执行最开始就触发的。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：在gatsby-browser.js中全局初始化AOS（最省心） #

Gatsby的gatsby-browser.js文件里的代码只会在浏览器端执行，完全避开SSR环境，非常适合处理这种全局的客户端依赖。

1. 首先确保你已经安装了AOS：

npm install aos
# 或者
yarn add aos

2. 在项目根目录新建/编辑gatsby-browser.js，加入以下代码：

// 导入AOS核心和样式
import AOS from 'aos';
import 'aos/dist/aos.css';

// 在客户端入口初始化AOS
export const onClientEntry = () => {
  AOS.init({
    // 这里可以配置你的AOS参数，比如：
    offset: 120, // 触发动画的偏移量
    duration: 1000, // 动画时长
    easing: 'ease-in-out', // 动画曲线
    delay: 0, // 延迟时间
  });
};

3. 之后你所有的组件都可以直接使用data-aos属性，不需要再单独初始化：

// 随便一个组件里直接用
const MySection = () => {
  return (
    <section data-aos="fade-up">
      <h2>我的内容</h2>
      <p>这会有淡入上移动画</p>
    </section>
  );
};

方案2：组件内动态导入AOS（适合局部使用） #

如果你只想在特定组件里用AOS，可以用动态导入的方式，确保AOS的代码只在浏览器环境加载：

函数组件（推荐用useEffect） #

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    // 动态导入AOS，只在客户端执行
    const initAOS = async () => {
      const AOS = await import('aos');
      import('aos/dist/aos.css'); // 别忘了导入样式
      AOS.init({
        duration: 800
      });
    };

    initAOS();
  }, []);

  return (
    <div data-aos="zoom-in">
      <p>这个元素会有放大动画</p>
    </div>
  );
};

export default MyComponent;

类组件（用componentDidMount） #

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 动态导入AOS
    import('aos').then(AOS => {
      import('aos/dist/aos.css');
      AOS.init({
        duration: 800
      });
    });
  }

  render() {
    return (
      <div data-aos="zoom-in">
        <p>这个元素会有放大动画</p>
      </div>
    );
  }
}

export default MyComponent;

为什么你之前的componentDidMount没生效？ #

大概率是你在组件顶部直接写了import AOS from 'aos'——这行代码会在SSR阶段就被执行，Node环境里没有window，所以直接报错了，根本轮不到componentDidMount执行。上面的方案都是通过延迟AOS的导入时机，确保它只在浏览器环境加载，从根源上解决问题。

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