Gatsby构建报错ReferenceError: navigator is not defined问题求助

Gatsby 构建阶段会在 Node.js 环境执行服务端渲染逻辑，Node.js 不存在浏览器专属的全局对象 navigator、window 等。你的 PWA 安装逻辑直接在服务端渲染可执行的上下文（比如组件顶层作用域、渲染同步逻辑中）调用了 navigator 相关属性，就会触发该报错。纯前端 JS 环境运行在浏览器侧，原生支持 navigator 对象，因此不会报错。

你可以根据自己的代码场景选择以下任意一种适配方案：

• 方案1：将所有 navigator 相关逻辑移入客户端专属生命周期
  React 的 useEffect 仅会在浏览器端组件挂载后执行，构建阶段不会触发，直接把相关逻辑包在 useEffect 中即可：

  import { useState, useEffect } from 'react'
  
  const PwaInstallModal = () => {
    const [showInstallModal, setShowInstallModal] = useState(false)
  
    useEffect(() => {
      // 所有检测设备、监听PWA安装事件的逻辑都放在此处执行
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
      // 补充你的PWA安装触发逻辑
      if (isMobile) {
        setShowInstallModal(true)
      }
    }, [])
  
    // 组件渲染逻辑
    return showInstallModal ? <div>你的PWA安装弹窗内容</div> : null
  }
  

• 方案2：封装浏览器环境判断，拦截服务端执行逻辑
  如果你需要把设备检测逻辑抽为公共工具函数，先判断当前是否为浏览器环境再执行 navigator 相关操作：

  // 公共工具函数
  const isBrowser = typeof window !== 'undefined'
  
  export const checkIsMobileDevice = () => {
    // 服务端环境直接返回默认值，不执行navigator相关逻辑
    if (!isBrowser) return false
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  }
  

  loadScript 调用逻辑也需要加环境判断，避免服务端执行：

  useEffect(() => {
    if (isBrowser) {
      loadScript('你的脚本路径').then(() => {
        // 脚本加载完成后的后续逻辑
      })
    }
  }, [])
  

• 方案3：将整个PWA弹窗组件标记为仅客户端渲染
  如果修改逻辑成本较高，可以直接用 Gatsby 官方推荐的 @loadable/component 把组件标记为关闭服务端渲染，构建阶段不会处理该组件的内部逻辑：

  // 父组件中引入
  import loadable from '@loadable/component'
  
  // ssr设为false，关闭该组件的服务端渲染
  const PwaInstallModal = loadable(() => import('./你的PWA弹窗组件路径'), {
    ssr: false
  })
  
  const Layout = () => {
    return (
      <div>
        {/* 其他页面内容 */}
        <PwaInstallModal />
      </div>
    )
  }
  

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