Erro ao configurar socket.io vue3

Opa, Carlos beleza?
Estou seguindo os passos do curso para uma aplicação parecida, e no momento de configurar o socket.io estou recebendo diversos erros
Como é uma aplicação nova, estou usando o vue3 e gostaria de manter a versão se não for gerar muito problema.
Tentei fazer da mesma forma que você, mas obtive esse erro
https://i.imgur.com/NFK8Awe.png
Acredito que é devido ao ES6 em relação ao import e fiz de outra forma, mas obtive outro erro que não consegui resolver
https://i.imgur.com/CGoe77G.png
O meu laravel-echo-server está respondendo normalmente, o redis tá ok também
o projeto está nesse git
https://github.com/rafaellannes/laravelchat
Então Carlos, fiquei tentando por um tempo rodar com o vue3 porém sem sucesso.
Então fiz uma branch nova e fiz usando o vue2 com as mesmas dependencias que você usou, mas ainda assim continua o mesmo erro.

Olá, Rafael!
Tudo bem?
Nessa branch vue2, qual foi o erro?
Porque as versões dos packages estão ok.

Tudo certinho, Carlos e por aí?
Então, é o mesmo erro que acontece na primeira imagem

Tudo em paz por aqui, obrigado por perguntar amigo.
--
Quando mudou de branch, reinstalou os packages?
rm -rf node_modules/
npm install

Então, acredito que tenha resolvido o erro.
O problema está na forma que estava fazendo os imports, pelo que eu entendi o JS que tá rodando aqui não aceita o commonjs e com isso o require não funciona e a forma de importar fica diferente. Mas não sei o motivo se as dependencias estão iguais, o que difere é que ainda estou usando o vite.
Se puder, da uma olhada em como ficou os arquivos bootstrap e echo.js
https://github.com/rafaellannes/laravelchat/blob/vue2/resources/js/Echo.js
https://github.com/rafaellannes/laravelchat/blob/vue2/resources/js/bootstrap.js

Acredito que é por conta das configurações do Vite.
Mas, importando dessa forma funcionou, certo?

Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!