在Next JS中使用@gradio/client时的问题,

vxbzzdmp  于 2023-06-29  发布在  其他
关注(0)|答案(1)|浏览(734)

我已经在我的下一个js应用程序中安装了gradio JS库,使用此命令npm i @gradio/client

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

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

即使我只是在我的Next.js应用程序中导入它,它也会给出下面的错误
这里是错误

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.`
ev7lccsx

ev7lccsx1#

在next.config.js中进行相应的更改将解决此问题。
我看了以下三个来源得到这个答案:
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

相关问题