Gatsby 3.0升级后如何消除yarn/webpack resolver的raw-loader依赖警告

这个警告是webpack 5持久化缓存的路径校验机制触发的：虽然两份raw-loader版本完全一致，但Gatsby内部依赖树单独安装了一份raw-loader，和项目根目录的raw-loader路径不同，导致webpack解析时路径匹配失败。

你可以按以下优先级尝试解决：

1. 清理残留缓存
   大部分情况下配置resolution后不生效是旧缓存残留导致的，按顺序执行以下命令：

# 清理Gatsby本地编译缓存
yarn clean
# 删除旧依赖文件夹和lock文件
rm -rf node_modules yarn.lock
# 重新安装依赖
yarn install

你之前配置的全局resolutions规则本身是正确的，清缓存重装后大概率就能解决问题。

2. 配置webpack loader解析规则
   如果清缓存后仍然报错，可以在项目根目录的gatsby-node.js中添加以下配置，强制webpack优先从项目根目录加载loader，避免匹配到Gatsby内部的依赖：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolveLoader: {
      // 优先加载根目录node_modules下的loader
      modules: [require.resolve('raw-loader').split('node_modules')[0] + 'node_modules', 'node_modules']
    }
  })
}

3. 强制删除重复依赖
   如果以上方案都不生效，可以通过postinstall钩子在每次安装依赖后自动删除Gatsby内部的重复raw-loader，在package.json的scripts字段添加配置：

"scripts": {
  "postinstall": "rm -rf node_modules/gatsby/node_modules/raw-loader",
  // 保留原有其他脚本配置不变
}

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