React未处理的Scheme错误 - 插件不支持"node:buffer"。

Question

我正试图在我的React项目中使用一个能够允许我进行API调用的软件包（如axios、node-fetch、got等）。当这些软件包未安装时，应用程序可以正常运行。但是，当其中任何一个被安装并在代码中调用时，我会面临以下错误：

忽略这些警告，我认为问题的根源来自下面的输出：

Failed to compile.

Module build failed: UnhandledSchemeError: Reading from "node:buffer" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

我已经尝试了各种方法。重新安装 node_modules。创建了一个干净的测试应用程序并在那里尝试。我还进行了研究，但没有找到任何相关且清晰的解决方案。没有什么帮助。

我做错了什么？？

DomException 文件内容：

/*! node-domexception. MIT License. Jimmy Wärting <https://jimmy.warting.se/opensource> */

if (!globalThis.DOMException) {
  try {
    const { MessageChannel } = require('worker_threads'),
    port = new MessageChannel().port1,
    ab = new ArrayBuffer()
    port.postMessage(ab, [ab, ab])
  } catch (err) {
    err.constructor.name === 'DOMException' && (
      globalThis.DOMException = err.constructor
    )
  }
}

module.exports = globalThis.DOMException

npm版本：8.5.5 node版本：16.15.0

- kk651

---

我遇到了同样的问题。 - Jérémie

你的文件中有一个引用，webpack无法打包。 - M22

Answer 1

你可以通过以下 Webpack 配置来解决这个问题：

plugins: [
  new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
    resource.request = resource.request.replace(/^node:/, "");
  }),
]

- Nicolas Bouvrette

---

我应该在哪里添加这行代码？ - kk651

无论您的Webpack配置文件位于何处 - 您可以在此处查看示例：https://github.com/Avansai/next-multilingual/blob/aaad6a7204733da2feb7a594cfcf541da300c27b/src/config/index.ts#L750 - Nicolas Bouvrette

@NicolasBouvrette，你的示例不是普通的webpack.config.js配置文件，你能否在js文件中提供一个示例？ - derpdewp

我正在使用Next.js通过Webpack，但我认为这也应该适用于webpack.config.js？您可能会在此处找到更多信息：https://github.com/webpack/webpack/issues/12792 - Nicolas Bouvrette