Versión iónica:
[x] 4.x
@ ionic / [email protected] o @ ionic / vue @ siguiente
Comportamiento actual:
Al actualizar las aplicaciones de vue desarrolladas con Ionic / [email protected] y ejecutar el
npm install
después de haber eliminado la carpeta node_modules, recibí el siguiente error
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)
Comportamiento esperado:
Debería poder cargar ionicones. esto funcionaba perfectamente cuando @ ionic / [email protected] e [email protected] eran dependencias. Ahora, cuando reinstale desde cero, las dependencias son @ ionic / [email protected] e [email protected] y está fallando tanto para @ ionic / [email protected] como para @ ionic / vue @ next
Pasos para reproducir:
Código relacionado:
mirar
https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing
que falla
mirar
https://github.com/jepiqueau/vue-test-stencil-colorpicker
que funciona
insert short code snippets here
Otra información:
Información 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
Veo el mismo problema. Probablemente esté relacionado con la advertencia que aparece al ejecutar ionic serve
:
warning in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'
Aquí igual. No puedo servir la aplicación recién creada.
la solución que encontré es instalar primero
npm install @ionic/core<strong i="6">@one</strong>
npm install @ionic/[email protected]
modificar el archivo 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");
y mantenga el archivo router.js, ya que significa que todavía usa IonicVueRouter
y funciona bien.
Ahora, si miras 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
De hecho, para ver los iconos, main.js debería 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");
Ahora se muestran los iconos
Esto se puede utilizar como solución alternativa hasta que @ ionic / vue se actualice a @ ionic / core @ one
ver para una implementación completa
https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing/tree/ionicone
Estoy enfrentando el mismo problema. No puedo servir la aplicación recién creada.
Aquí igual
Temporalmente,
Hice esto y la aplicación funcionó para mí, pero esa no es la solución correcta, pero puede hacer esto ahora para continuar con su trabajo.
si no puede encontrar estos archivos, vaya al directorio del proyecto y desde la computadora / lap busque a la derecha el nombre del archivo. (si busca ionic-vue.esm.js write -> ionic y aparecerán todos los archivos / carpetas iniciados con ionic, elija el archivo que está buscando en este caso (debe elegir ionic-vue.esm.js) .
El arreglo temporal de Abdlrahmansaber funciona,
(Quiere decir "Comentario", no "Común"). Quieres comentar las líneas que comentó en sus capturas de pantalla.
Gracias Adrianmed :)
probablemente sepa la razón de este error
la razón es que si intentas importar el {ICON_PATH} no devuelve nada, intenta imprimirlo en la consola, no devolverá nada.
@Adrianmed @Abdlrahmansaber sí, funciona, pero
Apliqué la solución de @Abdlrahmansaber. Pero no funciona correctamente (la advertencia de compilación y el error de la consola desaparecieron).
Estoy tratando de seguir eso: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Pero en el momento agrego
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
Vue.use(Ionic);
a main.js todo lo que obtengo es una página "en blanco".
Versiones de dependencias actuales:
"dependencias": {
"@ 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"
}
Apliqué la solución de @Abdlrahmansaber. Pero no funciona correctamente (la advertencia de compilación y el error de la consola desaparecieron).
Estoy tratando de seguir eso: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Pero en el momento agregoimport Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic);
a main.js todo lo que obtengo es una página "en blanco".
Versiones de dependencias actuales:
"dependencias": {
"@ 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 bien para mí, incluso con su importación cotizada
Deberías usar el que sugerí hace dos días, funciona y ves los íconos
@wannymiarelli Sé que ha eliminado el ícono, pero puede desarrollar una aplicación completa sin ícono hasta que se solucione el error
y tienes razón, no es la solución para la aplicación lanzada
@mbilbao ¿puedes mostrarme la consola?
Consigo esto resuelto cambiando la versión de ionicons en package-lock.json
Pero debería funcionar con una instalación nueva de npm de hecho
@mbilbao ¿puedes mostrarme la consola?
Oye, la consola estaba clara, sin ningún error, advertencias o lo que sea que se muestre cuando verificas el modo detallado.
Ya bajé el paquete ionicons como @daarioautumn y funciona.
Gracias @Abdlrahmansaber de todos modos.
Simplemente agregue [email protected]
a su package.json. Esto simplemente anula cualquier dependencia entre pares y se puede utilizar como solución alternativa.
mismo problema ... ¿cómo solucionarlo?
Apliqué la solución de @Abdlrahmansaber. Pero no funciona correctamente (la advertencia de compilación y el error de la consola desaparecieron).
Estoy tratando de seguir eso: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Pero en el momento agregoimport Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic);
a main.js todo lo que obtengo es una página "en blanco".
Versiones de dependencias actuales:
"dependencias": {
"@ 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 tengo el mismo problema. Has encontrado algún arreglo?
Tengo el mismo problema. Busqué un par de horas en Internet para encontrar una solución, pero no encontré una forma adecuada de resolver este problema. ¿Alguien me puede ayudar?
Apliqué la solución de @Abdlrahmansaber. Pero no funciona correctamente (la advertencia de compilación y el error de la consola desaparecieron).
Estoy tratando de seguir eso: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Pero en el momento agregoimport Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic);
a main.js todo lo que obtengo es una página "en blanco".
Versiones de dependencias actuales:
"dependencias": {
"@ 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 tengo el mismo problema. Has encontrado algún arreglo?
Sí, apliqué la solución de @daarioautumn, solo bajé el paquete ionicons a 4.5.8
La solución @ yasin-mesut funciona para mí
Simplemente instale el paquete iónico: npm install [email protected] --save-dev
como sugirió @ yasin-mesut
@jepiqueau, su solución me funcionó, pero ahora tengo contenido agregado al final de cada elemento de iones en mi aplicación:
¿Ha encontrado este problema? sabes como resolverlo?
Me acabo de cambiar a Ionic normal con Angular. Pero todavía quiero desarrollar mi proyecto con vue framework triste
Apliqué la solución de @Abdlrahmansaber. Pero no funciona correctamente (la advertencia de compilación y el error de la consola desaparecieron).
Estoy tratando de seguir eso: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
Pero en el momento agregoimport Ionic from '@ionic/vue'; import '@ionic/core/css/ionic.bundle.css'; Vue.use(Ionic);
a main.js todo lo que obtengo es una página "en blanco".
Versiones de dependencias actuales:
"dependencias": {
"@ 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 tengo el mismo problema. Has encontrado algún arreglo?
Sí, apliqué la solución de @daarioautumn, solo bajé el paquete ionicons a 4.5.8
Encontré este estilo:
html:not(.hydrated) body {
display: none;
}
esto se resuelve usando @ ionic / [email protected]. así que cierro el tema
¿Podría publicar la última versión (@ ionic / vue @ 0.0.9) en npm? ahora en npm es v0.0.4.
Está publicado en npm do npm install --save @ ionic / vue @ next
La solución de @jepiqueau funcionó perfectamente para mí. ¡¡¡Gracias!!!
Funciona bien en @ ionic / [email protected] pero solo con los iones agregados en vue appInitialize, es decir:
cerrar, reordenar, menú, flecha hacia adelante, flecha hacia atrás, flecha hacia abajo, buscar y cerrar círculo.
¿Cuándo podemos esperar tener acceso completo a todos los íconos?
Por supuesto, uno puede editar ionic-vue.esm.js pero no estoy seguro de que sea la forma recomendada ...
la solución para tener otros íconos es agregarlos en el archivo main.js, es decir, para los íconos "estrella", "papelera", "crear", haz esto
// 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
});
eso es todo y funciona, así que hágalo para cualquier ícono que desee usar, incluso para el que desea agregar en un elemento de iones
espero que sea de ayuda
Eche un vistazo a la sucursal ionicone
de
https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing
agrego un botón TestIcons en Home.Vue y un TestIcons.Vue que muestra los iconos deseados
Funciona bien. Gracias por la ayuda. ¿Es una solución temporal o es el camino a seguir para acceder a los iconos?
No conozco los planes del equipo de Ionic pero para mi es lógico importar solo los íconos que necesitas en tu app en lugar de todos los íconos lo que aumentará el tamaño de tu app sin ningún valor.
Tenga en cuenta que al intentar importar iconos con guiones en el nombre, por ejemplo log-out
, puede utilizar logOut
en la importación.
import { addIcons } from "ionicons";
import { logOut } from "ionicons/icons";
addIcons({
"ios-log-out": logOut.ios,
"md-log-out": logOut.md
});
esa es la manera
¿Se ha resuelto esto?
Para las personas que se encuentren con esto en el futuro, la solución está algo enterrada arriba. Simplemente actualice su versión de @ ionic / vue, por ejemplo:
$ npm install @ionic/[email protected]
@hunterloftis - gracias. Eso lo hizo. Espero que se actualice oficialmente antes de ir a la producción, pero funciona por ahora.
Gracias chicos, realmente me lo pusiste fácil
¡Gracias por el problema! Este problema está bloqueado para evitar comentarios que no sean relevantes para el problema original. Si esto sigue siendo un problema con la última versión de Ionic, cree un nuevo problema y asegúrese de que la plantilla esté completa.
Comentario más útil
Simplemente agregue
[email protected]
a su package.json. Esto simplemente anula cualquier dependencia entre pares y se puede utilizar como solución alternativa.