升级Gridsome与Node.js 18x后构建报“Window is not defined”错误求助

问题原因 #

Gridsome构建静态页面时运行在Node.js环境，Node本身不存在window对象。旧版Node.js 10x或Gridsome可能默认提供了window的兼容polyfill，升级到Node.js 18x后该兼容逻辑被移除，导致构建时直接调用window的代码报错；而开发环境基于浏览器运行，window天然存在，因此能正常工作。

解决方案 #

• 用条件判断包裹window调用：所有直接使用window的代码，先校验当前环境是否为浏览器：

  if (typeof window !== 'undefined') {
    // 执行依赖window的逻辑，比如window.localStorage.getItem('user')
  }
  

• 在Gridsome配置中模拟全局window：修改gridsome.config.js，通过webpack注入全局定义：

  const webpack = require('webpack')
  
  module.exports = {
    configureWebpack: {
      plugins: [
        new webpack.DefinePlugin({
          'typeof window': JSON.stringify('object'),
          'window': JSON.stringify({})
        })
      ]
    }
  }
  

• 延迟到组件挂载后使用window：Vue组件中将依赖window的逻辑放在mounted钩子（仅在浏览器环境触发）：

  export default {
    mounted() {
      // 比如初始化依赖window的第三方图表插件
      window.echarts.init(this.$refs.chart)
    }
  }
  

• 处理第三方依赖：如果是第三方库调用window，将其标记为webpack外部依赖，让浏览器加载而非Node构建时处理：

  module.exports = {
    configureWebpack: {
      externals: {
        'some-third-lib': 'window.SomeThirdLib'
      }
    }
  }
  

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