bug: Ionic/vue ionicons error

[jepiqueau]

Bug Report

Ionic version:

[x] 4.x
@ionic/vue@0.0.4 or @ionic/vue@next

Current behavior:

When updating vue apps developed with Ionic/vue@0.0.4 and running the

npm install 

after having deleted the node_modules folder, i got the following 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) 

Expected behavior:

Should be able to load ionicons. this was working perfect when @ionic/core@4.4.0 and ionicons@4.5.6 were dependencies. Now when you reinstall from scratch the dependencies are @ionic/core@4.6.0 and ionicons@4.5.10-2 and it is failing both for @ionic/vue@0.0.4 and @ionic/vue@next

Steps to reproduce:

• take an existing vue apps running with @ionic/core@4.4.0 and ionicons 4.5.6
• delete the folder node_modules
• delete the package-lock.json
• npm install

Related code:
look at

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

which fails
look at

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

which works

insert short code snippets here

Other information:

Ionic info:

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

[Westclair]

I'm seeing the same issue. It is probably related to the warning that appears when running ionic serve:

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

[jakubkoje]

Same here. Cant serve freshly created app.

[jepiqueau]

the work around i found is to first install

npm install @ionic/core@one 
npm install @ionic/vue@0.0.4

modify the main.js file

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

and keep the file router.js as it is meaning still using the IonicVueRouter

and it works fine.
Now if you look at 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/core@4.6.0 requiring "ionicons": "4.5.10-2

[jepiqueau]

In fact to see the icons the main.js should be :

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

Now the icons are displayed
This can be use as workaround till @ionic/vue is updated to @ionic/core@one

[jepiqueau]

see for a complete implementation

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

[Abdlrahmansaber]

I'm facing the same issue. Cant serve freshly created app.

[mbilbao]

Same here

[Abdlrahmansaber]

Temporarily,

• common anything related to Icons in these file (ionic-vue.esm.js, chunk file that's show in console)

I did this, and app worked for me but that's not the right solution, but you can do this now to can continue your work

if you can't find these file go to project directory and from computer/lap search right the first name of file. (if you search for ionic-vue.esm.js write -> ionic and will appear all files/folders started with ionic then choose the file you're looking for in this case (you should choose ionic-vue.esm.js ).

[Adrianmed]

Abdlrahmansaber's temp-fix works,
(He means "Comment" not "Common") You want to comment out the lines he commented out in his screenshots.

[Abdlrahmansaber]

Thank you Adrianmed :)

[Abdlrahmansaber]

probably I know the reason of this bug

the reason because if you trying to import the {ICON_PATH} it's return nothing, try to print it in console it will return nothing.

[wannymiarelli]

@Adrianmed @Abdlrahmansaber yes it works but kill the icons so this is not a temporary solution for a released app :)

[mbilbao]

I've applied the solution of @Abdlrahmansaber. But it's not working properly (the compile warning and console error disapeared).
I'm trying to follow that: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
But in the moment I add

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

Vue.use(Ionic);

to main.js all I get is a "blank" page.

Current dependencies versions:
"dependencies": {
"@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"
}

[wannymiarelli]

I've applied the solution of @Abdlrahmansaber. But it's not working properly (the compile warning and console error disapeared).
I'm trying to follow that: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
But in the moment I add

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

Vue.use(Ionic);

to main.js all I get is a "blank" page.

Current dependencies versions:
"dependencies": {
"@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"
}

edit: It works fine to me, even with your quoted import