Ionic-framework: bug: erro iônico / vue ionicons

Criado em 27 jun. 2019  ·  46Comentários  ·  Fonte: ionic-team/ionic-framework

Relatório de erro

Versão Iônica:


[x] 4.x
@ ionic / [email protected] ou @ ionic / vue @ next

Comportamento atual:

Ao atualizar aplicativos vue desenvolvidos com Ionic / [email protected] e executando o

npm install 

depois de excluir a pasta node_modules, recebo o seguinte erro

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at addIcons (chunk-ea2b3dce.js?d602:13)
    at appInitialize (ionic-vue.esm.js?481b:279)
    at Object.install (ionic-vue.esm.js?481b:687)
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5101)
    at eval (main.js?56d7:12)
    at Module../src/main.js (app.js:10193)
    at __webpack_require__ (app.js:767)
    at fn (app.js:130)
    at Object.1 (app.js:10267)  

Comportamento esperado:

Deve ser capaz de carregar iônicos. funcionava perfeitamente quando @ ionic / [email protected] e [email protected] eram dependências. Agora, quando você reinstalar do zero, as dependências são @ ionic / [email protected] e [email protected] e está falhando para @ ionic / [email protected] e @ ionic / vue @ next

Passos para reproduzir:

  • pegue um aplicativo existente vue rodando com @ ionic / [email protected] e ionicons 4.5.6
  • exclua a pasta node_modules
  • exclua o pacote-lock.json
  • npm install

Código relacionado:
Olhe para

https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing 

que falha
Olhe para

https://github.com/jepiqueau/vue-test-stencil-colorpicker 

que funciona

insert short code snippets here

Outra informação:

Informação iônica:

Ionic:

   Ionic CLI : 5.0.2

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.15.3
   npm    : 6.9.0
   OS     : macOS Mojave
triage

Comentários muito úteis

Basta adicionar [email protected] ao seu package.json. Isso apenas substitui qualquer dependência de par e pode ser usado como uma solução alternativa.

Todos 46 comentários

Estou vendo o mesmo problema. Provavelmente está relacionado ao aviso que aparece ao executar ionic serve :

warning  in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'

Mesmo aqui. Não é possível servir app recém-criado.

a solução que encontrei é primeiro instalar

npm install @ionic/core<strong i="6">@one</strong> 
npm install @ionic/[email protected]

modificar o arquivo main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//import Ionic from "@ionic/vue"; // comment this line 
import { defineCustomElements as ionic } from "@ionic/core/loader"; // add a direct link to @ionic/core
import { defineCustomElements as svgmorphing } from "stencil-svgpaths-morphing/dist/loader";

import "@ionic/core/css/ionic.bundle.css";

//Vue.config.ignoredElements = [/jeep-\w*/]; // comment this line
Vue.config.ignoredElements = [/^ion-/, /^jeep-/];   // add this line

//Vue.use(Ionic);  // comment this line
ionic(window); // add this line
svgmorphing(window);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

e manter o arquivo router.js, pois significa que ainda está usando o IonicVueRouter

e funciona bem.
Agora, se você olhar para package-lock.json,

@ionic/core is version "4.6.0-dev.201906131724.645b9a9" requiring "ionicons": "4.5.9-1"
@ionic/vue is version 0.0.4 with dependencies @ionic/[email protected] requiring "ionicons": "4.5.10-2

Na verdade, para ver os ícones, o main.js deve ser:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { defineCustomElements as ionic } from "@ionic/core/loader"; // added line
import { defineCustomElements as svgmorphing } from "stencil-svgpaths-morphing/dist/loader";

//import Ionic from "@ionic/vue"; // commented line
import { addIcons } from "ionicons"; // added line
import { ICON_PATHS } from "ionicons/icons"; // added line
import "@ionic/core/css/ionic.bundle.css";

//Vue.config.ignoredElements = [/jeep-\w*/];  // commented line
Vue.config.ignoredElements = [/^ion-/, /^jeep-/]; // added line

//Vue.use(Ionic); // commented line
ionic(window); // added line
svgmorphing(window);
addIcons(ICON_PATHS); // added line
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Agora os ícones são exibidos
Isso pode ser usado como solução alternativa até que @ ionic / vue seja atualizado para @ ionic / core @ one

veja para uma implementação completa

https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing/tree/ionicone

Estou enfrentando o mesmo problema. Não é possível servir app recém-criado.

Mesmo aqui

Temporariamente,

  • qualquer coisa comum relacionada aos ícones neste arquivo (ionic-vue.esm.js, arquivo de bloco que é mostrado no console)

Eu fiz isso, e o aplicativo funcionou para mim, mas essa não é a solução certa, mas você pode fazer isso agora para continuar seu trabalho

se você não conseguir encontrar esses arquivos, vá para o diretório do projeto e, em computer / lap search, escolha o primeiro nome do arquivo. (se você pesquisar ionic-vue.esm.js write -> ionic e aparecerão todos os arquivos / pastas iniciados com ionic, escolha o arquivo que está procurando neste caso (você deve escolher ionic-vue.esm.js) .

Screenshot_15
Screenshot_16
Screenshot_17
Screenshot_18

A correção temporária de Abdlrahmansaber funciona,
(Ele quer dizer "Comentário" e não "Comum"). Você deseja comentar as linhas que ele comentou em suas capturas de tela.

Obrigado Adrianmed :)

provavelmente eu sei o motivo desse bug

o motivo porque se você tentar importar o {ICON_PATH} ele não retornará nada, tente imprimi-lo no console ele não retornará nada.

Screenshot_13

Screenshot_11

@Adrianmed @Abdlrahmansaber sim, funciona, mas

Eu apliquei a solução de @Abdlrahmansaber. Mas não está funcionando corretamente (o aviso de compilação e o erro do console desapareceram).
Estou tentando acompanhar: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Mas no momento eu adiciono

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

para main.js, tudo que recebo é uma página "em branco".
image

Versões de dependências atuais:
"dependências": {
"@ ionic / vue": "0.0.4",
"vue": "^ 2.6.10",
"vue-router": "^ 3.0.3"
},
"devDependencies": {
"@ vue / cli-service": "^ 3.8.0",
"vue-template-compiler": "^ 2.6.10"
}

Eu apliquei a solução de @Abdlrahmansaber. Mas não está funcionando corretamente (o aviso de compilação e o erro do console desapareceram).
Estou tentando acompanhar: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Mas no momento eu adiciono

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

para main.js, tudo que recebo é uma página "em branco".
image

Versões de dependências atuais:
"dependências": {
"@ ionic / vue": "0.0.4",
"vue": "^ 2.6.10",
"vue-router": "^ 3.0.3"
},
"devDependencies": {
"@ vue / cli-service": "^ 3.8.0",
"vue-template-compiler": "^ 2.6.10"
}

editar: Funciona bem para mim, mesmo com sua importação citada

Você deve usar o que eu sugeri há dois dias. Ele funciona e você vê os ícones

@wannymiarelli Eu sei que

e você está certo, não é solução para o aplicativo lançado

@mbilbao você pode me mostrar o console?

Eu resolvo isso alterando a versão dos ionicons em package-lock.json
Screenshot from 2019-06-30 20-25-49

Mas deve funcionar com a instalação npm fresca, de fato

@mbilbao você pode me mostrar o console?

Ei, o console estava limpo, sem nenhum erro, avisos ou o que quer que seja mostrado quando você verifica o modo verbose.
Eu já fiz downgrade do pacote de ionicons como
Obrigado @Abdlrahmansaber de qualquer maneira.

Basta adicionar [email protected] ao seu package.json. Isso apenas substitui qualquer dependência de par e pode ser usado como uma solução alternativa.

mesmo problema ... como consertar?

Eu apliquei a solução de @Abdlrahmansaber. Mas não está funcionando corretamente (o aviso de compilação e o erro do console desapareceram).
Estou tentando acompanhar: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Mas no momento eu adiciono

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

para main.js, tudo que recebo é uma página "em branco".
image

Versões de dependências atuais:
"dependências": {
"@ ionic / vue": "0.0.4",
"vue": "^ 2.6.10",
"vue-router": "^ 3.0.3"
},
"devDependencies": {
"@ vue / cli-service": "^ 3.8.0",
"vue-template-compiler": "^ 2.6.10"
}

@mbilbao Tenho o mesmo problema. Você encontrou uma solução?

Eu tenho o mesmo problema. Procurei algumas horas na internet para encontrar uma solução, mas não encontrei uma maneira adequada de resolver esse problema. Alguém pode me ajudar?

Eu apliquei a solução de @Abdlrahmansaber. Mas não está funcionando corretamente (o aviso de compilação e o erro do console desapareceram).
Estou tentando acompanhar: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Mas no momento eu adiciono

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

para main.js, tudo que recebo é uma página "em branco".
image
Versões de dependências atuais:
"dependências": {
"@ ionic / vue": "0.0.4",
"vue": "^ 2.6.10",
"vue-router": "^ 3.0.3"
},
"devDependencies": {
"@ vue / cli-service": "^ 3.8.0",
"vue-template-compiler": "^ 2.6.10"
}

@mbilbao Tenho o mesmo problema. Você encontrou uma solução?

Sim, eu apliquei a solução de @daarioautumn apenas downgrade o pacote de ionicons para 4.5.8

A solução @ yasin-mesut funciona para mim

Basta instalar o pacote iônico: npm install [email protected] --save-dev as @ yasin-mesut sugerido

@jepiqueau sua solução alternativa funcionou para mim, mas agora tenho conteúdo adicionado ao final de cada item de íon em meu aplicativo:
image
Você encontrou esse problema? Você sabe como resolver isso?

Acabei de mudar para o Ionic normal com Angular. Mas ainda quero desenvolver meu projeto com vue framework sad

Eu apliquei a solução de @Abdlrahmansaber. Mas não está funcionando corretamente (o aviso de compilação e o erro do console desapareceram).
Estou tentando acompanhar: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Mas no momento eu adiciono

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

para main.js, tudo que recebo é uma página "em branco".
image
Versões de dependências atuais:
"dependências": {
"@ ionic / vue": "0.0.4",
"vue": "^ 2.6.10",
"vue-router": "^ 3.0.3"
},
"devDependencies": {
"@ vue / cli-service": "^ 3.8.0",
"vue-template-compiler": "^ 2.6.10"
}

@mbilbao Tenho o mesmo problema. Você encontrou uma solução?

Sim, eu apliquei a solução de @daarioautumn apenas downgrade o pacote de ionicons para 4.5.8

Eu encontrei este estilo:

html:not(.hydrated) body {
    display: none;
}

isso é resolvido usando @ ionic / [email protected]. então eu encerro o problema

Pode publicar a versão mais recente (@ ionic / vue @ 0.0.9) para npm? agora em npm é v0.0.4.

É publicado em npm do npm install --save @ ionic / vue @ next

A solução de @jepiqueau funcionou perfeitamente para mim. Obrigado!!!

Funciona bem em @ ionic / [email protected], mas apenas com os íons adicionados em vue appInitialize, ou seja:
fechar, reordenar, menu, seta para a frente, seta para trás, seta para baixo, pesquisa e círculo fechado.

Quando podemos esperar ter acesso total a todos os ícones?

Claro que se pode editar ionic-vue.esm.js, mas não tenho certeza se essa é a maneira recomendada ....

a solução para ter outros ícones é adicioná-los ao arquivo main.js, ou seja, para os ícones "estrela", "lixo", "criar" você faz isso

// after import Ionic from "@ionic/vue"; 

import { addIcons } from "ionicons";
import { star, trash, create } from "ionicons/icons";

// after Vue.use(Ionic);
addIcons({
  "ios-star": star.ios,
  "md-star": star.md,
  "ios-trash": trash.ios,
  "md-trash": trash.md,
  "ios-create": create.ios,
  "md-create": create.md
});

é isso e funciona, então faça isso para todos os ícones que deseja usar, mesmo para aquele que deseja adicionar em um item de íon
espero que ajude

Dê uma olhada no ramo ionicone de
https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing
adiciono um botão TestIcons em Home.Vue e um TestIcons.Vue mostrando os ícones desejados

Funciona bem. Obrigado pela ajuda. É uma correção temporária ou é o caminho a seguir para acessar ícones?

Não conheço os planos da equipa Ionic mas para mim é lógico importar apenas os ícones de que necessita na sua aplicação em vez de todos os ícones que irão aumentar o tamanho da sua aplicação sem qualquer valor

Observe, ao tentar importar ícones com travessões no nome, por exemplo log-out você pode usar logOut na importação.

import { addIcons } from "ionicons";
import { logOut } from "ionicons/icons";
addIcons({
  "ios-log-out": logOut.ios,
  "md-log-out": logOut.md
});

esse é o caminho

Isso foi resolvido?

Para as pessoas que enfrentarão isso no futuro, a correção está um tanto enterrada acima. Basta atualizar sua versão de @ ionic / vue, por exemplo:

$ npm install @ionic/[email protected]

@hunterloftis - obrigado. Isso foi o suficiente. Espero que seja oficialmente atualizado antes de eu começar a trabalhar, mas funciona por enquanto.

Obrigado pessoal, vocês realmente tornaram mais fácil para mim

Obrigado pelo problema! Este problema está sendo bloqueado para evitar comentários que não são relevantes ao problema original. Se isso ainda for um problema com a versão mais recente do Ionic, crie um novo problema e certifique-se de que o modelo esteja totalmente preenchido.

Esta página foi útil?
0 / 5 - 0 avaliações