UnhandledSchemeError: What is this node:buffer error and how do I solve it?

Question

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.

Answer 1

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.