Next.js has the ability to run on the server side, which can result in Peer.js throwing errors when used with Next.js. One user on Stack Overflow explains this issue:
The error is likely due to peer js performing side effects during import.
The suggested solution is:
useEffect(() => {
import('peerjs').then(({ default: Peer }) => {
// Do your stuff here
});
}, [])
However, I am in need of using DataConnection with Typescript and storing it in a useState variable. Can you provide an example of how to do this?
This is what I have put together, but I am encountering errors with Typescript:
useEffect(() => {
import('peerjs').then(({ default: Peer, DataConnection }) => {
const peer = new Peer(localStorage.token)
peer.on('connection', (conn: DataConnection) => {
console.log('Connected to peer:', conn)
conn.on('data', (data) => {
console.log('Received data:', data)
})
})
return () => {
peer.destroy()
}
})
}, [])
For example: 'DataConnection' is referenced as a value but is being used as a type in this context. Did you mean to use 'typeof DataConnection'?