Gatsby Develop正常运行但Build失败：缺少文件类型处理Loader

看起来你遇到的是Webpack无法解析动态import()语法的问题，这在Gatsby 2.x版本中偶尔会因为Babel配置或依赖冲突出现。结合你的站点结构简单但build失败的情况，我整理了几个可行的解决步骤：

1. 检查并补全Babel配置 #

Gatsby默认会处理Babel配置，但如果你的项目里有自定义的.babelrc或babel.config.js，可能覆盖了默认设置，导致不支持动态import语法。

• 如果你没有自定义Babel配置，直接跳过这步；如果有，确保配置中包含@babel/plugin-syntax-dynamic-import插件：

  {
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
  }
  

  同时安装这个插件：

  npm install @babel/plugin-syntax-dynamic-import --save-dev
  

2. 清理缓存并重装依赖 #

缓存或损坏的依赖经常会引发这类奇怪的构建错误，按以下步骤操作：

• 先清理Gatsby缓存：

  gatsby clean
  

• 删除node_modules和锁文件：

  rm -rf node_modules package-lock.json
  

• 重新安装所有依赖：

  npm install
  

• 再次尝试构建：

  gatsby build
  

3. 降级Gatsby相关依赖到兼容版本 #

你当前使用的Gatsby 2.0.117版本相对较早，可能和部分依赖存在兼容性问题。建议降级到Gatsby 2.x系列的稳定版本，比如2.32.x：

• 修改package.json中的依赖版本：

  "dependencies": {
    "gatsby": "^2.32.13",
    "gatsby-cli": "^2.19.2",
    "gatsby-plugin-react-helmet": "^3.10.0",
    "gatsby-plugin-sass": "^2.8.0",
    "gatsby-source-filesystem": "^2.9.0",
    "gatsby-transformer-json": "^2.11.0",
    "gatsby-transformer-remark": "^2.14.0"
  }
  

• 修改完成后，重复步骤2的清理和重装操作。

4. 移除不必要的依赖 #

你提到站点没有数据馈送、markdown文件，但依赖中包含了gatsby-source-filesystem、gatsby-transformer-json、gatsby-transformer-remark，这些多余的依赖可能引发冲突，尝试移除它们：

• 卸载相关依赖：

  npm uninstall gatsby-source-filesystem gatsby-transformer-json gatsby-transformer-remark
  

• 同时在gatsby-config.js中删除对应的插件配置，然后再次尝试构建。

5. 临时关闭ESLint验证 #

虽然gatsby develop没有ESLint错误，但某些ESLint规则可能间接影响构建流程，尝试临时关闭验证：

• 在项目根目录创建.env.production文件，添加：

  ESLINT_NO_DEV_ERRORS=true
  

• 或者在gatsby-config.js中禁用ESLint插件（如果有配置的话），再尝试构建。

按照这些步骤逐一排查，应该能解决你的构建问题。

内容的提问来源于stack exchange，提问作者J. Hogue