React UnhandledSchemeError - "node:buffer" is not handled by plugins

Question

I'm trying to use a package in my React project that will allow me to make API calls (axios, node-fetch, got etc.) When these packages are not installed, the app runs properly. When any of them are installed and called in the code, I'm facing the error as follows:

Ignoring the warnings, I believe the problem has its roots from the output below:

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.

I tried everything. Reinstalled node_modules. Created a clean test app, tried there. Also did my research, didn't find any relevant, clear solution on this. Nothing helped.

What am I doing wrong??

DomException file content:

/*! 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 version: 8.5.5 node version: 16.15.0

Answer 1

You can work around this with this Webpack configuration:

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