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:
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
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,
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) .
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.
@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".
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 adicionoimport 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".
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
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 adicionoimport 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".
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 adicionoimport 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".
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:
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 adicionoimport 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".
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.
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.