Gatsby 构建错误（可能与 webpack 相关）

Question

我使用 Gatsby（npm init gatsby） 创建了一个网站，并添加了一些组件，之前一切正常。但是当我执行了 npm run develop（之前也已经运行过），出现了以下错误：

failed Building development bundle - 13.532s
ERROR in ./.cache/app.js
Module build failed (from ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js):
Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using
SourceMapConsumer

ERROR in ./.cache/polyfill-entry.js
Module build failed (from ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js):
Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using
SourceMapConsumer

是什么导致了这个错误？怎样才能解决它？我很困惑。我尝试了新的网站，但出现了相同的问题。

我升级到了最新版的node，所以可能与此有关。有人可以帮忙吗？

- Leon Michalak

Answer 1

我可以确认降级到Node 16可以解决这个问题。

- GavinB

Answer 2

我通过遵循此处的说明：https://github.com/gatsbyjs/gatsby/issues/35607，成功避免了降级到Node 16的情况。

我将以下代码添加到了我的package.json文件中：

  "resolutions": {
    "source-map": "^0.8.0-beta.0"
  },
  "dependencies": {
    "source-map": "^0.8.0-beta.0",
    ...

然后我执行了npm install命令。

之后，我可以顺利地运行npm run develop命令，没有遇到任何问题。

- MLeb

---

由于您当前的回答不够清晰，请[编辑]以添加更多细节，帮助其他人理解如何回答所提出的问题。您可以在帮助中心找到有关编写良好答案的更多信息。 - Community

只有一个答案是真正的答案，而不是“在我们整个堆栈上随机更改主要版本，直到它可能起作用”的瞎猜！ - thclark

Answer 3

我当前使用的是Node v16.14.2版本，但仍然存在同样的问题。当我将jest从27.4.5版本升级到28.1.1版本时，问题得到了解决。 npm i -d jest@latest 如果您正在使用TypeScript，请不要忘记同时升级@type。 npm i -d @types/jest@latest

- Digital Alpha

Answer 4

在使用 Node 版本 18 时出现了相同的问题，降级到 Node 16.15.0 后问题得到解决。

- Kamkan

Answer 5

这个方法有效：

• 删除 node_modules 和 package-lock.json
• npm install
• gatsby develop

- Stéphane Bruckert

---

解决了相同的问题（带有相同的错误消息），但项目中没有 gatsby 依赖项，而是使用 yarn 而不是 npm。执行命令：rm -rf node_modules yarn.lock && yarn。 - oklas

Answer 6

我有和你一样的问题。我将Node降级到LTS版本，然后它就能正常工作了！

- Giacomo

Answer 7

我遇到了相同的问题，将Node版本降级到16后，现在它可以正常工作了。

如何降级：

$ npm install -g n $ n 6.10.3

如何检查版本：

$ node -v

- iSoldMyCarForInterntConnection

---

这个可以运行，只需要更新版本：$ n 16.15.0 - Marcin

Answer 8

我使用了 nvm 将版本从 v18.1.0 降级到 v16.5.0。现在错误已经消失了。

关于 nvm 的更多信息 在这里。

- Saif Ul Islam

Answer 9

尝试删除.cache文件，然后运行npm run develop。

- Karim Elnemr

---

尝试了这个。还有公共文件夹。不幸的是，没有任何改变。 - Leon Michalak

在这之后，我实际上还遇到了另一个错误：error:0308010C:digital envelope routines::unsupported。 - Leon Michalak

已更新至最新版本18。 - Leon Michalak

刚刚完成了。现在出现了以下错误：TypeError: 无法读取未定义属性（读取 'get'） - Leon Michalak

这意味着您的代码中出现了错误，请在终端中检查哪个文件出现了问题。 - Karim Elnemr