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