11

Pasted below is a node:buffer error that I've received when using a link to a local route in nextjs. Anyone know how to solve this?

I see: https://github.com/vercel/next.js/discussions/33982

thanks!

node:buffer 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.

421
  • 203
  • 1
  • 5
  • 13

3 Answers3

12

So I had this problem too - the discussion above links you to file-type, which is where I actually eventually fell on the answer for this.

First of all, I am now using react-app-rewired - this allows me to change the webpack config without ejecting your project. That's the first thing to install. There are other packages that will do this too and some people are concerned that this rewired package is only 'lightly' maintained by the community.

You then need to create in the root of your project a file called 'config-overrides.js'

This is what I have inside my file. It covers a few things other than node:buffer because I need other things too (like fs and stream). I'm sure you can modify it as you need:

const webpack = require("webpack");

module.exports = function override(config, env) {
    config.resolve.fallback = {
        url: require.resolve("url"),
        fs: require.resolve("graceful-fs"),
        buffer: require.resolve("buffer"),
        stream: require.resolve("stream-browserify"),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: "process/browser",
            Buffer: ["buffer", "Buffer"],
        }),
        new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
            const mod = resource.request.replace(/^node:/, "");
            switch (mod) {
                case "buffer":
                    resource.request = "buffer";
                    break;
                case "stream":
                    resource.request = "readable-stream";
                    break;
                default:
                    throw new Error(`Not found ${mod}`);
            }
        }),
    );
    config.ignoreWarnings = [/Failed to parse source map/];

    return config;
};

You need to make sure that the packages that you use in that file are installed, e.g.

npm install url graceful-fs buffer stream-browserify --save

After that I changed the 'scripts' area in my package.json to be as follows:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "eject": "react-scripts eject"
}

My package then compiled correctly and ran fine.

Dharman
  • 30,962
  • 25
  • 85
  • 135
vespasianvs
  • 181
  • 5
  • 4
    I owe you a beer good fellow. This also worked on my vue project and is a total lifesaver. Makes Webpack okay with the npm lib 'file-type'. – Llama D'Attore May 17 '22 at 23:17
  • I'm getting an error saying "Can't resolve 'process/browser' ", do you know how to solve this? I'm also getting a bunch of other errors like this: 'Module not found: Error: Not found fs' 'Module not found: Error: Not found url' Any help? – Revolutionary Citron Jun 17 '22 at 17:04
  • Have you made sure that graceful-fs, process and URL modules are installed? npm i url graceful-fs process – vespasianvs Jun 18 '22 at 20:15
4

This error is caused by a bug with the node-fetch module.

Simply downgrading it to "node-fetch": "2.6.1" or any other 2.x.x version will fix this issue.

Coder Gautam YT
  • 1,044
  • 7
  • 20
1

you need to upgrade the version of node to 16 or above. you can run the command below if you are on Mac OS.

brew update && brew upgrade node && npm install -g npm

pwwweee
  • 34
  • 4