[PROMOÇÃO] Assine com + 30% de desconto ANUAL MENSAL (últimas horas)
Wilmar Lima da Silva
Criador Wilmar Lima da Silva 02/12/2022

Instalei a extensão vue tools no chrome,

então coloquei o app.js e o app.css na view

mas a extensão do crome não ficou ativa.

e tbm verifiquei no chrome (inspecionar) a mensagem

app.js:19669 Uncaught TypeError: Cannot read properties of undefined (reading 'component') 

Manager Carlos Ferreira 02/12/2022

Olá, Wilmar!
Tudo bem?

Qual versão do Vue.js vc está usando?

Tem o projeto no GitHub? Quero ver se tem algum erro?

Carlos Ferreira
Criador Wilmar Lima da Silva 02/12/2022
Qual versão do Vue.js vc está usando?
"dependencies": {
        "laravel-echo": "^1.10.0",
        "npm": "^6.1.0",
        "socket.io-client": "^2.3.0",
        "vue": "^2.5.17",
        "vue-toastify": "^1.8.0",
        "vuex": "^3.6.2"
    }
existe alguma maneira pra testar se o Vue esta ok?
"Tem o projeto no GitHub?"
esse é o mesmo projeto que estamos tratando sobre o acesso, me diz quais arquivos vc queria ver
Wilmar Lima da Silva
Manager Carlos Ferreira 02/12/2022

Qual extensão você está usando?
https://vuejs.org/guide/scaling-up/tooling.html#browser-devtools

Desabilita as outras, e usa essa: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Carlos Ferreira
Criador Wilmar Lima da Silva 02/12/2022

Carlos,

como disse a extensão do chorme é essa mesma "https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd"

na pagina da academy.especialziati o icone da extensão fica ativado

depois que eu disparo "npm run dev", mostra:

cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 

 14% building modules 36/41 modules 5 active ...\js\components\Chat\ChatComponent.vue{ parser: "babylon" } is deprecated; we now 

treat it as { parser: "babel" }.

 95% emitting

 

 DONE  Compiled successfully in 22627ms                                                                                  17:46:49

                                           Asset       Size  Chunks                    Chunk Names  

   images/1.png?9591c410148e6883727c5339fd1c02cd   95 bytes          [emitted]

   images/2.png?ed19f37046b8be52512f63f791e570c4    89.5 kB          [emitted]

   images/3.png?7d1099ba78549258bc91ecfae26d28d4    83.3 kB          [emitted]

   images/4.png?7058228bbaba5ae2cff000c2140ba5c8     197 kB          [emitted]

   images/5.png?f0103e7989168361829d1efed51bbf08    58.5 kB          [emitted]

   images/6.png?683ba9296297feb871a75bd6bcf02296    86.8 kB          [emitted]

images/bike.png?67bfb7ed83fa2be38d4c5a6f82c3411a    5.42 kB          [emitted]

images/logo.png?27f0684ef05ed17dfdf7d0b61e987ec2    93.9 kB          [emitted]

                                      /js/app.js    1.76 MB       0  [emitted]  [big]  /js/app

                                     /js/util.js     2.6 kB       1  [emitted]         /js/util

                                /js/newspaper.js     4.8 kB       2  [emitted]         /js/newspaper

                                     /js/mask.js    5.52 kB       3  [emitted]         /js/mask

                         /js/jquery-maskmoney.js    12.4 kB       4  [emitted]         /js/jquery-maskmoney

                         /js/jquery-inputmask.js    8.61 kB       5  [emitted]         /js/jquery-inputmask

                                    /css/app.css    4.04 kB       0  [emitted]         /js/app

                                  /css/login.css    3.67 kB       0  [emitted]         /js/app

                                  /css/setup.css  479 bytes       0  [emitted]         /js/app

 

                              /css/newspaper.css    4.05 kB       0  [emitted]         /js/app

e na pagina que eu coloco o app.js e app.css

mostra no inspecinar:

Uncaught TypeError: Cannot read properties of undefined (reading 'component')

 

 

Wilmar Lima da Silva
Criador Wilmar Lima da Silva 02/12/2022

Apareceu tbm esse erro

Falha no carregamento do mapa de origem pelo DevTools: Não foi possível carregar o conteúdo de http://ufa.upmaster-em57.test/js/bootstrap.js.map: Erro HTTP: código de status 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

 

Wilmar Lima da Silva
Manager Carlos Ferreira 02/12/2022

Olá, Wilmar!

Obrigado por mencionar pela primeira vez qual a extensão usou.

Usa essa outra daqui: https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

--

Sobre os erros no código, eu preciso ter um pouco mais de detalhes, teria como compartilhar comigo por favor? :-)

Carlos Ferreira
Criador Wilmar Lima da Silva 02/12/2022

Carlos,

sobre o erro de carregar o Vue na aplicação quais arquivos vc quer ver?

me diz o email que envio  zipado

Wilmar Lima da Silva
Manager Carlos Ferreira 02/12/2022

Olá, Wilmar! Como vai?

Analisar códigos por partes, e zipados é bem complicado.

--

Me envia um print full da tela (com URL e tudo) com o Console aberto (F12 -> Console): https://uploaddeimagens.com.br/

Carlos Ferreira
Criador Wilmar Lima da Silva 02/12/2022

segue:

https://uploaddeimagens.com.br/imagens/H6SUHNc

Wilmar Lima da Silva
Criador Wilmar Lima da Silva 02/12/2022

Carlos,

criei um projeto laravel novo com Vue, vi que no app.js

vi que a linha "window.Vue = require('vue');" , não tinha a palavra "default" no final, fiz a correção e deu certo

Wilmar Lima da Silva
Manager Carlos Ferreira 02/12/2022

Que bom que conseguiu resolver, meus parabéns! =D

Carlos Ferreira
Criador Wilmar Lima da Silva 02/12/2022

Carlos,

na aplicação tem uma imagem grande onde fizemos um map, em vários locais da imagem com click function.

quando uso o Vue com app.js essa funcionalidade ficou desabilitada.

Wilmar Lima da Silva
Manager Carlos Ferreira 02/12/2022

Olá, Wilmar!
Tudo bem?

Sua dúvida não ficou clara.

Cria uma nova thread (ticket) e reformula a sua pergunta por favor.

No aguardo.

Carlos Ferreira
Criador Wilmar Lima da Silva 02/12/2022

Carlos, é o seguinte 

na aplicação tem uma view, que possui uma imagem grande, nessa imagem existe alguns pontos que serve

para que o usuário possa clicar e carregar um modal. (tem um hover, que quando o mouse passar por esses pontos o formato do mouse muda)

para isso eu uso :

<img src="{{ asset('images/cidade.jpg') }}" usemap="#image-map" id="imgPraca">

<map name="image-map" id="mapa">

      <area target="" alt="albatroz" coords="725,197,88" onclick="funcaoPropaganda();" style="cursor: pointer;" title="Agência Propaganda" shape="circle">

      <area target="" alt="máquinas" coords="1227,261,86" onclick="funcaoMaquinas();" style="cursor: pointer;" title="Máquinas da Produção" shape="circle">

      <area target="" alt="finanças" coords="681,536,74" onclick="funcaoFinancas();" style="cursor: pointer;" title="Banco" shape="circle">

      <area target="" alt="produção" coords="464,419,78" onclick="funcaoProducao();" style="cursor: pointer;" title="Matéria prima" shape="circle">

      <area target="" alt="empresa" coords="1190,551,86" onclick="funcaoEmpresa();" style="cursor: pointer;" title="Empresa" shape="circle">

</map>

Eu tbm uso um js (jquery.rwdImageMaps.min.js)

para quando a tela sofrer "resize" , os pontos de clicks sejam refeitos (responsivos).

então quando eu coloco o app.js nesta view para usar (vue, sockey.io), tudo que fiz a cima não funciona,

os clicks são desabilitados.

nesse caso qual seria o problema ?

 

Wilmar Lima da Silva
Manager Carlos Ferreira 02/12/2022

Legal amigo, agora sua pergunta ficou bem formulada.

Como a sua pergunta é algo muito particular, vou pedir que encaminhe ela para [email protected], porque assim posso te ajudar de forma mais direcionada.

Carlos Ferreira
Criador Wilmar Lima da Silva 02/12/2022

Carlos, ainda estou testando, mas parece que consegui solucionar

coloquei o app.js no <head>

dessa forma : <script src="{{ asset('js/app.js') }}" defer></script>

ai o click na imagem (map) voltou a funcionar

 

Wilmar Lima da Silva
Criador Wilmar Lima da Silva 02/12/2022

Carlos,

como estou usando a versão do Vue 2.5.17, quando

fui baixar as extensões do Vue no Vs Code, só tinha para a versão 3 do Vue.

Nesse caso quais versões posso baixar pra versão 2.5.17 ?

Wilmar Lima da Silva
Manager Carlos Ferreira 02/12/2022

Olá, Wilmar!
Tudo bem?

Usa essa extensão aqui: https://marketplace.visualstudio.com/items?itemName=octref.vetur

Carlos Ferreira
Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!