0

I have installed the gradio JS library in my next js app using this command npm i @gradio/client

import { useState } from 'react';
import { client } from "@gradio/client";

import styles from "./home.module.css"

and even when i just import it in my next js app it gives the below error

Here's the error

Failed to Compile

    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.`
Jonas
  • 121,568
  • 97
  • 310
  • 388
In Dev
  • 13
  • 4

1 Answers1

0

make the corresponding change in next.config.js will resolve the issue.

I see the following three source to get this answer:

https://nextjs.org/docs/app/api-reference/next-config-js/webpack

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

https://github.com/getsentry/sentry-javascript/issues/6548

const {webpack} = require("next/dist/compiled/webpack/webpack");
/** @type {import('next').NextConfig} */
const nextConfig = {
    // output: 'export',
    // Optional: Add a trailing slash to all paths `/about` -> `/about/`
    // trailingSlash: true,
    // Optional: Change the output directory `out` -> `dist`
    // distDir: 'dist',
    webpack: (config, {isServer}) => {
        if (!isServer) {
            config.resolve = {
                ...config.resolve,
                fallback: {
                    // fixes proxy-agent dependencies
                    net: false,
                    dns: false,
                    tls: false,
                    assert: false,
                    // fixes next-i18next dependencies
                    path: false,
                    fs: false,
                    // fixes mapbox dependencies
                    events: false,
                    // fixes sentry dependencies
                    process: false
                }
            };
        }
        config.plugins.push(new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
            resource.request = resource.request.replace(/^node:/, "");
        }))

        return config
    },
    experimental: {appDir: true}
};

module.exports = nextConfig
Xingce Bao
  • 51
  • 4