添加gatsby-plugin-mdx后报错找不到模块'gatsby/webpack'如何解决

核心原因是Gatsby核心版本与插件版本不兼容：

• 你本地安装的Gatsby版本为v3.12.1，gatsby/webpack是Gatsby v4才对外暴露的内部模块路径，v3版本不存在该路径
• 当前已安装的gatsby-plugin-mdx@^3.3.0、gatsby-plugin-sass@^5.1.1、gatsby-source-filesystem@^4.3.0均为适配Gatsby v4的版本，运行时会调用v4专属的路径与API
• 之前未引入gatsby-plugin-mdx时项目正常运行，是因为sass插件的版本不兼容仅触发警告，没有走到调用v4专属API的逻辑，引入mdx插件后触发了相关调用，直接抛出模块找不到的错误

提供两种可落地的修复路径，二选一即可：

方案1：升级Gatsby核心到v4版本（推荐，长期维护性更好） #

• 先清理项目缓存与旧依赖文件：

npm run clean
rm -rf node_modules package-lock.json
# Windows用户可手动删除node_modules文件夹和package-lock.json文件

• 安装v4版本的Gatsby核心包：

npm install gatsby@^4.0.0

• 重新安装全部依赖后启动项目即可，当前已安装的mdx、sass、source-filesystem版本均适配Gatsby v4，无需额外调整。

方案2：降级所有不兼容插件到适配Gatsby v3的版本（适合不想改动核心版本的场景） #

• 同样先清理项目缓存与旧依赖文件：

npm run clean
rm -rf node_modules package-lock.json

• 卸载当前版本的不兼容插件：

npm uninstall gatsby-plugin-mdx gatsby-plugin-sass gatsby-source-filesystem

• 安装适配Gatsby v3的对应插件版本：

npm install gatsby-plugin-mdx@^2.14.0 gatsby-plugin-sass@^4.14.0 gatsby-source-filesystem@^3.14.0

• 重新安装全部依赖后启动项目即可。

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