8

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:

enter image description here

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

kk651
  • 690
  • 6
  • 7

1 Answers1

1

You can work around this with this Webpack configuration:

plugins: [
  new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
    resource.request = resource.request.replace(/^node:/, "");
  }),
]
Nicolas Bouvrette
  • 4,295
  • 1
  • 39
  • 53
  • 2
    where am I supposed to add this line of code? – kk651 Oct 14 '22 at 14:08
  • Wherever your Webpack config lives - you can see an example here: https://github.com/Avansai/next-multilingual/blob/aaad6a7204733da2feb7a594cfcf541da300c27b/src/config/index.ts#L750 – Nicolas Bouvrette Oct 14 '22 at 14:16
  • @NicolasBouvrette your example is not your ordinary `webpack.config.js` config file can you provide an example in the the js file?? – derpdewp Dec 16 '22 at 09:28
  • I'm using Webpack via Next.js but I think this should work in a `webpack.config.js` too? You might find more info here: https://github.com/webpack/webpack/issues/12792 – Nicolas Bouvrette Dec 16 '22 at 16:45