执行gatsby build遇编译错误：需配置合适Webpack Loader处理文件

错误现象 #

执行gatsby build时触发以下错误：

编译Gatsby Functions失败 - 6.195s
验证错误失败 [Error [ValidationError]: "error"必须为对象类型]
核心报错为ModuleParseError：模块解析失败，意外令牌（对应代码中的JSX语法位置），提示未配置合适的loader处理该文件类型。

具体错误代码片段：

// 错误位置1
const HeadElement = (
  <pageComponent.Head {...filterHeadProps(pageComponentProps)} />
)

// 错误位置2
if (!this.state.page) {
  return <div />
}

问题原因 #

这些错误是因为webpack无法解析代码中的JSX语法，通常由以下情况导致：

• Gatsby默认webpack配置未覆盖到包含JSX的文件（比如Functions目录下的文件）
• 自定义webpack配置时移除了处理JSX的babel-loader规则
• 缺少必要的babel编译依赖

解决步骤 #

1. 安装必要依赖 #

确保项目中安装了编译JSX所需的babel工具：

npm install --save-dev @babel/core @babel/preset-react babel-loader

2. 配置webpack解析JSX #

在项目根目录的gatsby-node.js中添加自定义webpack规则，确保JSX文件被正确编译：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.(jsx|js)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react']
            }
          }
        }
      ]
    }
  })
}

3. 调整Functions目录结构 #

Gatsby Functions主要用于后端逻辑，不建议在其中编写JSX组件。如果你的Functions文件中包含了JSX代码，建议将这些组件迁移到src/components目录，Functions目录只保留纯JS逻辑代码。

4. 清除缓存并重新构建 #

执行以下命令清除Gatsby缓存后重新构建：

gatsby clean
gatsby build

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