TypeError: Cannot set property WebSocket of #<Object> which has only a getter / Gradio App not working in NextJS

[cantonalex]

Describe the bug

unsure why this was closed I still get the same issue on node 20 and nextjs 14 #5583

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

latest nextjs version

Screenshot

No response

Logs

No response

System Info

node 20 nextjs 14 mac os sonoma

Severity

Blocking usage of gradio

[cantonalex]

@pngwn

[pngwn]

No need to ping maintainers. We can see the issue and will get to it as soon as we can.

[SDLi416]

I finally found a suitable solution. We should not use the gradio client on the server side of Next.js, but instead use it on the client side. Also, by adding the following configuration to next.config.js, I managed to solve the problem:

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

I hope this comment will help those using Next.js.

[jakiestfu]

+1 to this issue, this is a huge blocker for me as my software depends on the gradio client to interface with my private spaces. The issue is somehow related to assigning global.WebSocket = ws.WebSocket 🤷

@pngwn Do you have an estimate on when this will be investigated? This has been an issue since September 17th.

[pngwn]

Duplicate of #5583