Front-end não funcionou
[Concluído]
Boa tarde!
Segui as orientações do seu vídeo e a parte de back-end funcionou normalmente.
Porém, não estou conseguindo fazer funcionar a view receber os dados.
As versões são as seguintes:
- Laravel: 9.24.0
- PHP: 8.1.10
- laravel-echo: "^1.14.0",
- "socket.io-client": "^4.5.2"
Anter de utilizar essas versões do "laravel-echo" e "socket.io-client", realizei o teste com as versões que você colocou no vídeo.
Uma das diferenças também é a versão do Laravel. Nela é utilizado o "vite".
Quando executo o "npm run dev" é diferente.
Parece que o valor é compilado, porém, apesar de eu ter adicionado o código:
<script src="{{ url('js/app.js') }}"></script>
ele não está encontrando esse arquivo.
Alguma sugestão?
Olá, Felipe!
Tudo bem?
Nos últimos releases do Laravel 9 foi abandonado o Webpack, e adotado o Vite;
Precisa deixar as dependências no package.json e as configurações exatamente igual as do Laravel:
https://github.com/laravel/laravel/blob/9.x/package.json (especialmente em scripts: dev)
https://github.com/laravel/laravel/blob/9.x/vite.config.js
---
Outro problema que você pode ter, é essa versão do client do socket-io, sugiro fixar a mesma versão que usamos no curso:
https://github.com/especializati/curso-laravel-com-socket.io/blob/master/package.json#L26
---
Se quiser montar uma ambiente de forma mais rápida, aqui tem uma alternativa super legal (poucos minutos você já pega a ideia): https://academy.especializati.com.br/aula/instalando-o-laravel-com-sail
Bom dia Carlos!
Eu acho que sei o que pode estar acontecendo.
Hoje utilizo apenas protocolo "https". Quando criei o arquivo "laravel-echo-server.json" pelo comando init, adicionei que o protocolo seria "https".
Até verifiquei no meu arquivo e realmente está "https".
Porém, quando executo o start do "laravel-echo-server", na descrição vem escrito assim:
✔ Listening for http events...
Acho que deve estar "escutando" apenas o protocolo "http", estou correto?
Estranho também que a versão dele quando executo está mostrando o seguinte:
L A R A V E L E C H O S E R V E R
version 1.6.3
⚠ Starting server in DEV mode...
Sendo que no meu arquivo package.json está a seguinte versão:
Como faço para verficar realmente a versão que está rodando? Tem alguma outra configuração que tenho que fazer quando utilizo o protocolo "https"?
Obs.: Na configuração inicial eu adicionei os seguintes comandos:
Além disso, no "authHost" e "allowOrigin" eu também utilizei na url o protocolo "https".
As configurações de SSL que você fez, estão corretas;
Compartilha o seu projeto comigo por favor;
Bom dia!
Consegui solucionar os erros referente as configurações de SSL.
A principal questão era no arquivo "vite.config.js", no qual, tive que adicionar a seguinte configuração:
Porém, agora estou com erro no arquivo "bootstrap.js". No browser aparece a seguinte mensagem:
[vite] connecting...
[vite] connected.
bootstrap.js:43 Uncaught ReferenceError: require is not defined
at bootstrap.js:43:1
Como pode ser visto, parece que o sistema não está conseguinte adicionar o "socket.io-client".
O erro é nesta linha:
Tenho que importar no projeto algum arquivo?
Este também seria uma forma de importar o "socket.io-client" ?
Carlos, boa tarde!
Adicionei você no github para poder visualizar o meu projeto.
Obrigado!
Olá, Felipe!
Tudo bem?
Desculpas demorar te responder, vou rodar o seu projeto, e testar.
Te darei um feedback pelo e-mail;
Acessei o seu projeto agora, para verificar o problema.
--
Super recomendo usar essa mesma versão do Client do Socket.io, outras versões também tive problemas:
https://github.com/especializati/curso-laravel-com-socket.io/blob/master/package.json#L26
E também fixa a versão do laravel-echo;
--
Fixa a versão, deleta o diretório node_modules/ e baixa novamente:
npm install
Boa tarde Carlos!
Realizei a recomandação que você me passou fixando as versões do socket.io e laravel-echo conforme o link especificado, apaguei a pasta node_modules e executei novamente o comando npm install e deu certo.
Porém, continuando o curso de socket.io, me deparei com um problema no vue.
Ao carregar o componente abaixo.
O erro que está me mostrando é este:
[vite] connecting...
[vite] connected.
app.js:8 Uncaught ReferenceError: require is not defined
at app.js:8:5
(anonymous) @ app.js:8
O que pode ser?
Só para constar... Atualizei o código no github caso seja necessário verificar.
Troca o require, por import
Importa esse component:
import Index from './components/home/index';
---
Fiz um pull aqui, e ainda está desatualizado no GitHub: https://prnt.sc/60qY9u21JR6Y
Bom dia Carlos!
Me desculpa, fiz o commit no GitHub mas esqueci de executar o push. Acabei de atualizar os arquivos lá.
Fiz o que vc falou e gerou outro problema.
Agora ele solicita para eu instalar o plugin "@vitejs/plugin-vue".
E para isso, precisei atualizar os seguintes plugins:
Quando faço essa atualização, tenho que realizar a configuração no "vite.config.js" assim:
Aí surge outro problema, ele parece não reconhecer o alias criado antes para solucionar outro bo.
https://site.com.br:5173/@id/vue/dist/vue.esm.js net::ERR_ABORTED 404
Rodei o seu projeto aqui, tem algumas configurações necessárias.
Primeiro, no seu arquivo de provider AuthServiceProvider, no método boot, logo no início inclua:
if (app()->runningInConsole()) {
return;
}
Essa configuração garantir se rodar algum comando CLI (do artisan), não vai acessar as confugurações para baixo, no caso, da conexão com o banco e etc;
--
Tem um erro no seus arquivos de migrations;
--
E sobre os erros do npm, rodei sem SSL (removi as configurações de https do arquivo vite.config.js), funcionou tudo de primeira.
npm install
npm run dev
O seu está dando problemas quando compila, certo? npm run dev
Carlos, boa tarde!
Consegui solucionar o problema. Apenas utilizei outro componente de notificação.
As dependências e versões que deram certas foram essas:
"@vitejs/plugin-vue": "^3.1.2",
"laravel-echo": "^1.9.0",
"socket.io-client": "^2.3.0",
"vue": "^3.2.41",
"vue-toastification": "^2.0.0-rc.5"
E utilizei no arquivo vite.config.js a seguinte configuração:
import vue from '@vitejs/plugin-vue';
plugins: [
.
.
.
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
}
}
})
],
No arquivo resources/js/app.js ficou assim:
import './bootstrap';
import { createApp, defineCustomElement } from 'vue';
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";
const app = createApp();
const options = {};
app.use(Toast, options);
import Home from "./components/home/index.vue";
const HomeElement = defineCustomElement(Home)
customElements.define('home-component', HomeElement );
Obrigado!
Fala Felipe, meus parabéns amigo. Vc é fera!
Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!