Ionic-framework: bug : erreur des ionicons ioniques/vue

Créé le 27 juin 2019  ·  46Commentaires  ·  Source: ionic-team/ionic-framework

Rapport d'erreur

Version ionique :


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

Comportement actuel :

Lors de la mise à jour des applications vue développées avec Ionic/[email protected] et de l'exécution du

npm install 

après avoir supprimé le dossier node_modules, j'ai l'erreur suivante

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)  

Comportement prévisible:

Devrait être capable de charger des ionicons. cela fonctionnait parfaitement lorsque @ionic/ core @ [email protected] étaient des dépendances. Maintenant, lorsque vous réinstallez à partir de zéro, les dépendances sont @ionic/ core @ [email protected] et cela échoue à la fois pour @ionic/ [email protected] et @ionic/ vue@next

Étapes à reproduire :

  • prendre une vue existante des applications fonctionnant avec @ionic/ core @
  • supprimer le dossier node_modules
  • supprimer le package-lock.json
  • npm installer

Code associé :
Regarder

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

qui échoue
Regarder

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

qui fonctionne

insert short code snippets here

Les autres informations:

Informations ioniques :

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

Commentaire le plus utile

Ajoutez simplement [email protected] à votre package.json. Cela remplace simplement toute dépendance entre pairs et peut être utilisé comme solution de contournement.

Tous les 46 commentaires

Je vois le même problème. C'est probablement lié à l'avertissement qui apparaît lors de l'exécution de ionic serve :

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

Pareil ici. Je ne peux pas servir une application fraîchement créée.

le travail que j'ai trouvé consiste à d'abord installer

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

modifier le fichier 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");

et conservez le fichier router.js car cela signifie toujours en utilisant le IonicVueRouter

et ça marche bien.
Maintenant, si vous regardez 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

En fait pour voir les icônes le main.js devrait être :

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");

Maintenant, les icônes sont affichées
Cela peut être utilisé comme solution de contournement jusqu'à ce que @ionic/vue soit mis à jour vers @ionic/ core@one

voir pour une implémentation complète

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

Je suis confronté au même problème. Je ne peux pas servir une application fraîchement créée.

Pareil ici

Temporairement,

  • tout ce qui est commun aux icônes de ces fichiers (ionic-vue.esm.js, fichier de morceaux affiché dans la console)

Je l'ai fait et l'application a fonctionné pour moi mais ce n'est pas la bonne solution, mais vous pouvez le faire maintenant pour pouvoir continuer votre travail

si vous ne trouvez pas ces fichiers, allez dans le répertoire du projet et à partir de l'ordinateur/du tour, recherchez à droite le prénom du fichier. (si vous recherchez ionic-vue.esm.js écrivez -> ionic et que tous les fichiers/dossiers commençant par ionic apparaîtront, puis choisissez le fichier que vous recherchez dans ce cas (vous devez choisir ionic-vue.esm.js ) .

Screenshot_15
Screenshot_16
Screenshot_17
Screenshot_18

Le correctif temporaire d'Abdlrahmansaber fonctionne,
(Il veut dire "Commentaire" et non "Commun") Vous voulez commenter les lignes qu'il a commentées dans ses captures d'écran.

Merci Adrianmed :)

Je connais probablement la raison de ce bug

la raison parce que si vous essayez d'importer le {ICON_PATH} il ne retourne rien, essayez de l'imprimer dans la console, il ne retournera rien.

Screenshot_13

Screenshot_11

@Adrianmed @Abdlrahmansaber oui cela fonctionne mais tuez les icônes donc ce n'est pas une solution temporaire pour une application publiée :)

J'ai appliqué la solution de @Abdlrahmansaber. Mais cela ne fonctionne pas correctement (l'avertissement de compilation et l'erreur de console ont disparu).
J'essaie de suivre ça : https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Mais à l'instant j'ajoute

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

Vue.use(Ionic);

à main.js tout ce que je reçois est une page "vierge".
image

Versions actuelles des dépendances :
"dépendances": {
"@ionic/vue": "0.0.4",
"vue": "^2.6.10",
"vue-routeur": "^3.0.3"
},
"devDependencies": {
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}

J'ai appliqué la solution de @Abdlrahmansaber. Mais cela ne fonctionne pas correctement (l'avertissement de compilation et l'erreur de console ont disparu).
J'essaie de suivre ça : https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Mais à l'instant j'ajoute

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

Vue.use(Ionic);

à main.js tout ce que je reçois est une page "vierge".
image

Versions actuelles des dépendances :
"dépendances": {
"@ionic/vue": "0.0.4",
"vue": "^2.6.10",
"vue-routeur": "^3.0.3"
},
"devDependencies": {
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}

edit: Cela fonctionne bien pour moi, même avec votre importation citée

Vous devriez utiliser celui que j'ai suggéré il y a deux jours, cela fonctionne et vous voyez les icônes

@wannymiarelli Je sais que l'icône a été tuée, mais vous pouvez développer une application entière sans icône jusqu'à ce que le bogue soit corrigé

et vous avez raison, ce n'est pas une solution pour l'application publiée

@mbilbao peux-tu me montrer la console ?

Je résous ce problème en changeant la version d'ionicons dans package-lock.json
Screenshot from 2019-06-30 20-25-49

Mais cela devrait fonctionner avec une nouvelle installation de npm en fait

@mbilbao peux-tu me montrer la console ?

Hé, la console était claire, sans aucune erreur, avertissement ou tout ce qui s'affiche lorsque vous vérifiez le mode verbeux.
J'ai déjà rétrogradé le package ionicons comme
Merci @Abdlrahmansaber en tout cas.

Ajoutez simplement [email protected] à votre package.json. Cela remplace simplement toute dépendance entre pairs et peut être utilisé comme solution de contournement.

même problème... comment le résoudre ?

J'ai appliqué la solution de @Abdlrahmansaber. Mais cela ne fonctionne pas correctement (l'avertissement de compilation et l'erreur de console ont disparu).
J'essaie de suivre ça : https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Mais à l'instant j'ajoute

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

Vue.use(Ionic);

à main.js tout ce que je reçois est une page "vierge".
image

Versions actuelles des dépendances :
"dépendances": {
"@ionic/vue": "0.0.4",
"vue": "^2.6.10",
"vue-routeur": "^3.0.3"
},
"devDependencies": {
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}

@mbilbao j'ai le même problème. Avez-vous trouvé une solution ?

J'ai le même problème. J'ai regardé quelques heures sur Internet pour trouver une solution mais je n'ai pas trouvé de moyen approprié de résoudre ce problème. Est-ce que quelqu'un peut m'aider?

J'ai appliqué la solution de @Abdlrahmansaber. Mais cela ne fonctionne pas correctement (l'avertissement de compilation et l'erreur de console ont disparu).
J'essaie de suivre ça : https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Mais à l'instant j'ajoute

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

Vue.use(Ionic);

à main.js tout ce que je reçois est une page "vierge".
image
Versions actuelles des dépendances :
"dépendances": {
"@ionic/vue": "0.0.4",
"vue": "^2.6.10",
"vue-routeur": "^3.0.3"
},
"devDependencies": {
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}

@mbilbao j'ai le même problème. Avez-vous trouvé une solution ?

Oui, j'ai appliqué la solution de @daarioautumn, il suffit de rétrograder le package ionicons à 4.5.8

La solution @yasin-mesut fonctionne pour moi

Installez simplement le package ionique : npm install [email protected] --save-dev comme suggéré par @yasin-mesut

@jepiqueau, votre solution de contournement a fonctionné pour moi, mais j'ai maintenant du contenu ajouté à la fin de chaque élément ionique de mon application :
image
Avez-vous rencontré ce problème ? Savez-vous comment le résoudre?

Je viens de passer à Ionic normal avec Angular. Mais je veux quand même développer mon projet avec vue framework sad

J'ai appliqué la solution de @Abdlrahmansaber. Mais cela ne fonctionne pas correctement (l'avertissement de compilation et l'erreur de console ont disparu).
J'essaie de suivre ça : https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Mais à l'instant j'ajoute

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

Vue.use(Ionic);

à main.js tout ce que je reçois est une page "vierge".
image
Versions actuelles des dépendances :
"dépendances": {
"@ionic/vue": "0.0.4",
"vue": "^2.6.10",
"vue-routeur": "^3.0.3"
},
"devDependencies": {
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}

@mbilbao j'ai le même problème. Avez-vous trouvé une solution ?

Oui, j'ai appliqué la solution de @daarioautumn, il suffit de rétrograder le package ionicons à 4.5.8

J'ai trouvé ce style :

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

ceci est résolu en utilisant @ionic/ vue @

Pourrait publier la dernière version (@ionic/[email protected] ) sur npm ? maintenant dans npm est v0.0.4.

Il est publié sur npm do npm install --save @ionic/ vue@next

La solution de @jepiqueau a parfaitement fonctionné pour moi. Merci!!!

Cela fonctionne bien dans @ionic/ vue @
fermer, réorganiser, menu, flèche vers l'avant, flèche vers l'arrière, flèche vers le bas, recherche et cercle fermé.

Quand pouvons-nous espérer avoir un accès complet à toutes les icônes ?

Bien sûr, on peut éditer ionic-vue.esm.js mais pas sûr que ce soit la méthode recommandée....

la solution pour avoir d'autres icônes est de les ajouter dans le fichier main.js c'est-à-dire pour les icônes "star","trash","create" vous faites ceci

// 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
});

c'est tout et cela fonctionne, alors faites-le pour toutes les icônes que vous souhaitez utiliser, même pour celle que vous souhaitez ajouter dans un élément ionique
j'espère que c'est de l'aide

Jetez un œil à la branche ionicone de
https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing
j'ajoute un bouton TestIcons dans Home.Vue et un TestIcons.Vue affichant les icônes souhaitées

Ça fonctionne bien. Merci pour l'aide. Est-ce une solution temporaire ou est-ce la marche à suivre pour accéder aux icônes ?

Je ne connais pas les plans de l'équipe Ionic mais pour moi il est logique de n'importer que les icônes dont vous avez besoin dans votre application au lieu de toutes les icônes ce qui augmentera la taille de votre application sans valeur

Notez que lorsque vous essayez d'importer des icônes avec des tirets dans le nom, par exemple log-out vous pouvez utiliser logOut dans l'importation à la place.

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

c'est le chemin

Cela a-t-il été résolu ?

Pour les personnes qui rencontreront cela à l'avenir, le correctif est quelque peu enterré ci-dessus. Mettez simplement à jour votre version de @ionic/vue, par exemple :

$ npm install @ionic/[email protected]

@hunterloftis - merci. Cela l'a fait. J'espère qu'il sera officiellement mis à jour avant d'aller à la production, mais cela fonctionne pour l'instant.

Merci les gars, vous m'avez vraiment facilité la tâche

Merci pour le problème ! Ce problème est verrouillé pour empêcher les commentaires qui ne sont pas pertinents pour le problème d'origine. Si le problème persiste avec la dernière version d'Ionic, veuillez créer un nouveau problème et vous assurer que le modèle est entièrement rempli.

Cette page vous a été utile?
0 / 5 - 0 notes