useWebSocket failure

[ManuelPrhyme]

I get a react error that useWebSocket isnt a function when I call it in this code, passing in the server socket path and queryParams

import { useEffect } from "react"
import {useWebSocket} from 'react-use-websocket'
import throttle from 'lodash.throttle'

export function Home ({userName}){

    const WS_URL = 'ws://127.0.0.1:8000'
    const {sendJsonMessage} = useWebSocket(WS_URL,{
        queryParams : { userName}
    })

    // const socket = new WebSocket(`ws://localhost:8000?userName=${userName}`)

    // socket.addEventListener('open',() => {
    //     socket.send(JSON.stringify({x:23,y:223}))
    //     console.log("Connected to server")
    // }
    // )

    // socket.addEventListener('message',event => {
    //     console.log("The Server data is, ",JSON.parse(event.data))
    // })

    const sendJsonMessageThrottled = throttle(sendJsonMessage,50)

    useEffect(() => { 
        window.addEventListener('mousemove',(e)=>{
            sendJsonMessageThrottled({x:e.clientX, y:e.clientY})
        })
    },[])

    return <h1>Hello {userName}</h1>
}

How can I resolve it

[vojtechportes]

You are importing it as a named import, which is wrong according to the repo documentation. Instead, do this:

import useWebSocket from 'react-use-websocket';

[faljabi]

You are importing it as a named import, which is wrong according to the repo documentation. Instead, do this:

import useWebSocket from 'react-use-websocket';

This is breaking also in vite 8 released yesterday

[ManuelPrhyme]

Thanks

[AlexDemzz]

Yes broken in vite 8

[evanreichard]

This change may break some existing code importing CJS modules. You can use the deprecated legacy.inconsistentCjsInterop: true option to temporarily restore the previous behavior

Worked for me.

[0] https://main.vite.dev/guide/migration#consistent-commonjs-interop

[cristyz]

This is working for me

Temporary Solution

const useWebSocket = (useWebSocketModule as unknown as { default: typeof useWebSocketModule }).default;

[strawberrymetropolis]

This is working for me

Temporary Solution

const useWebSocket = (useWebSocketModule as unknown as { default: typeof useWebSocketModule }).default;

@cristyz I don't understand how to use your workaround. This is what I was using before it broke with Vite 8:

import useWebSocket, { ReadyState } from 'react-use-websocket'

How do I translate this to your workaround? Specifically, how do I incorporate your useWebSocketModule? Your support is highly appreciated.

[mfulton26]

I'm using something like this so that if .default is available in the package then it will be used, otherwise it falls back to using the module itself.

import useWebSocketModule, { ReadyState } from "react-use-websocket";

const { default: useWebSocket = useWebSocketModule } = useWebSocketModule as unknown as {
    default: typeof useWebSocketModule;
};

[Shananhsu]

This is working for me
import { useWebSocket } from "react-use-websocket/dist/lib/use-websocket";