IonTabs and IonPage not compiled in the build

[aileksandar]

I've been trying to troubleshoot some IonTabs behaviour and I've set up the development environment with npm link as described in the readme. When I try to update the IonTabs file, changes are not present in the ionic-vue.esm.js. Then I've realized that IonTabs and IonPage are not in the production build when I install the package regularly on my project. Am I missing something?

[michaeltintiuc]

npm link doesn't always work well, in my experience webpack ignores that, so I just build the lib manually with npm run dev and copy the contents of dist to my project's node_modules. This approach works with hot reload too

[michaeltintiuc]

also IonPage is not a component that is exported, usually it's just div.ion-page

[aileksandar]

Npm link actually works fine for me, the problem is that IonTabs seems to be the component that is also not exported

//FILE: components/index.ts

export * from './overlays';
export * from './inputs';
// its like the whole navigation export is ignored
export * from './navigation';

[michaeltintiuc]

When I run npm run dev or prod I can see IonTabs in the generated build files, not sure what's going on in your case tbh, have you checked out the dev branch?

[michaeltintiuc]

Are you talking about vue2 or vue3 version? Given the code you shared above it looks like Vue 2, in the Vue 3 alpha there's no navigation dir or file anymore:

// /src/components/index.ts
export * from './overlays';
export * from './inputs';
export * from './containers';
export * from './router-outlet';
export * from './back-button';
export * from './tabs';
export * from './icon';

[aileksandar]

Ah, sorry, its Vue2

[michaeltintiuc]

My bad, looks like I made a mistake of exporting anonymous objects as default, should be fixed now in v1.3.11 514ab2654549278013ecf252d20d5a221e8760eb

[aileksandar]

Yeah, that solved it. Thanks! 🙇

[aileksandar]

I have different issue, but its related to this one so I've reopened it just to avoid creating another.

The fix you did solved the issue that its now exporting and shows in the build in dist folder. But ion page and ion tabs components are still not used in the project instead of the native ionic ones. It does not override them when i use ion-tabs in the project.

I saw for inputs there is a "Vue" suffix in the naming (IonInputVue, IonRadioVue). Maybe IonTabs should be renamed too in order to be used?

[michaeltintiuc]

My bad @meoweloper it was quite sometime since I worked with Vue 2, this should be fixed in the newly released version, don't forget to import the components and define them in the components prop of your component [insert xzibit meme here]. I've renamed IonPage to IonPageVue to go in line with the other ones. Koodos for testing this for me :D I should've been the one to catch the bug, sorry for the time you lost debugging this

[aileksandar]

Didn't know you had to import them 🤦 I thought they were all autoloaded when you state Vue.use(Ionic). Now it makes more sense. Actually, it was not needed to add the "Vue" suffix to the naming, because locally registered components take priority over global ones?

No worries, I'm trying to make some production app using ionic-vue, because I don't expect to Vue 3 ecosystem catch up till the end of the year. I already have more issues ready, so brace yourself :winter-is-coming:

[michaeltintiuc]

:D they're not autoloaded in order to not include them in the final build if they're not used, this is true of input components as well.