Ionic-framework: error: error iónico / vue ionicons

Creado en 27 jun. 2019  ·  46Comentarios  ·  Fuente: ionic-team/ionic-framework

Informe de error

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:

  • tome una aplicación vue existente que se ejecute con @ ionic / [email protected] e ionicons 4.5.6
  • eliminar la carpeta node_modules
  • eliminar el paquete-lock.json
  • npm install

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
triage

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.

Todos 46 comentarios

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,

  • cualquier cosa común relacionada con los iconos en este archivo (ionic-vue.esm.js, archivo de fragmento que se muestra en la consola)

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) .

Screenshot_15
Screenshot_16
Screenshot_17
Screenshot_18

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.

Screenshot_13

Screenshot_11

@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".
image

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 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".
image

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
Screenshot from 2019-06-30 20-25-49

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 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".
image

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 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".
image
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:
image
¿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 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".
image
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.

¿Fue útil esta página
0 / 5 - 0 calificaciones