如何在gatsby-config插件数组中检测环境变量并规避加载错误？

问题描述 #

在gatsby-config.js的插件数组内尝试通过环境变量判断是否加载Google Analytics插件时，使用以下代码：

process.env.GOOGLE_ANALYTICS_ID && {
  resolve: 'gatsby-plugin-google-analytics',
  options: {
    trackingId: process.env.GOOGLE_ANALYTICS_ID,
  },
},

触发终端错误：

Cannot read properties of undefined (reading 'resolve') TypeError: Cannot read properties of undefined (reading 'resolve')

改用三元表达式单独处理变量后：

const analytics =
  process.env.GOOGLE_ANALYTICS_ID &&
  process.env.GOOGLE_ANALYTICS_ID !== undefined
    ? {
        resolve: 'gatsby-plugin-google-analytics',
        options: {
          trackingId: process.env.GOOGLE_ANALYTICS_ID,
        },
      }
    : ''

并在plugins数组中引入该变量：

module.exports = {
  // 省略其他代码
  plugins: [
    analytics,
  ],
}

仍出现相同错误。已确认package.json中已安装对应插件：

"dependencies": {
  "gatsby": "^4.24.7",
  "gatsby-plugin-google-analytics": "^4.24.0",
},

错误原因 #

两种写法的核心问题是：当环境变量不存在时，插件数组中会混入非插件对象的假值（第一种是undefined，第二种是空字符串''）。Gatsby在解析插件数组时，会遍历数组中的每一项并尝试读取其resolve属性，假值没有该属性，因此抛出错误。

正确解决方案 #

方案一：数组过滤法 #

先定义插件变量，再通过.filter(Boolean)过滤数组中的假值：

// 定义条件加载的插件
const analyticsPlugin = process.env.GOOGLE_ANALYTICS_ID ? {
  resolve: 'gatsby-plugin-google-analytics',
  options: {
    trackingId: process.env.GOOGLE_ANALYTICS_ID,
  },
} : undefined;

module.exports = {
  // 其他配置项
  plugins: [
    // 其他固定加载的插件
    analyticsPlugin,
  ].filter(Boolean), // 过滤掉undefined、空字符串等假值
};

方案二：条件展开数组 #

直接在插件数组中通过三元表达式生成子数组，再用扩展运算符展开：

module.exports = {
  // 其他配置项
  plugins: [
    // 其他固定加载的插件
    // 当环境变量存在时，展开包含插件配置的数组；否则展开空数组
    ...(process.env.GOOGLE_ANALYTICS_ID ? [{
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS_ID,
      },
    }] : []),
  ],
};

额外注意 #

确保环境变量已正确配置：Gatsby会自动加载项目根目录下的.env.development（开发环境）和.env.production（生产环境）文件，只需在对应文件中添加GOOGLE_ANALYTICS_ID=你的跟踪ID即可。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ