Announcing Ionic 6

Ionic Framework
42

Hi there and welcome,

You may want to expand on what you mean by “compiling”.

Are you looking for the Ionic UI library (topic of this thread) or are you referring to the Ionic CLI - which also currently sits at major version 6? (but that imho is coincidence)

You can use Ionic 6 UI elements without the CLI - without a doubt. Using the CLI but opting-out of UI elements seems pointless to me.

Ionic 6 UI elements can be integrated in JS/HTML, and hence fairly likely also in your own JS/HTML - just try using CDN, is easiest and non-intrusive way.

The Ionic CLI I consider a “generator” tool, generating bare-bone structures, adding stuff and invoking the underlying framework’s bundler/compiler/etc to generate the output you need to publish (PWA, hosting, capacitor, cordova etc). Currently well integrated with Angular/Vue/React - and invoking their underlying CLIs for bundling.

So to your first point, you can use goodies like Ionic 6 UI elements & Capacitor in your own JS/HTML - with likely minimal changes to your current developer workflow. The Ionic CLI then is likely not beneficial for you. But if this solves your “compiling” need I don’t know.

Integrating phaser into Ionic apps has been done before, and I wouldn’t know why it wouldn’t work, as it is all webtech - again, here is the question what you mean by “compiling”.

Not sure if this helps, but curious to hear what you are looking for in I6 and what you mean by compiling.

43

Thanks for the warm welcome :slight_smile:

Maybe compiling is the wrong word. What I want to do is launch a premade web app and a phaser game in the appstore. Maybe package is a better word for this.

The web app is make.gamefroot.com (my baby) and the other is a game (yet to be announced).

We’ve previously used cordova and once upon a time used cocoon js.

Ideally we can use Ionic 6 to do this without having to change our code dramatically. Then one day at a pace we feel comfortable with, we could do a deeper integration with your react integration.

44

Ok thx.

Capacitor is the replacement of Cordova and has its own CLI separate from Ionic’s - and potentially is easy to incorporate also as you are familiar with Cordova. https://capacitorjs.com/

Ionic 6 UI components might require work on your end as you already have a - cool - UI - and pending your current UI lib helps you improve quality or is just a replacement.

The Ionic CLI may help you to some extend packaging - but maybe also not.

So knowing all this - what is the question left unanswered?

Have you played with the starter app in React? Imho the best way to get a feel on desirability/feasibility of the tools.

45

Started mobile dev this year with ionic and react, loved it cant wait to use v6

46

Thanks to the “Upgrading to Ionic 6” guide, the upgrade is smooth :+1:t2: !

We ran into two things I would like your view on :slight_smile:

First one: We used to have @ionic-native/core (version 5.36.0) as dependency in the package.json of our Ionic React app. After the upgrade to Ionic 6, removing the node_modules folder and running npm install, it fails due to dependency errors. There is no version 6 of @ionic-native/core available.

We just removed the @ionic-native/core dependency from our project since we don’t use Cordova plugins from our project, only Capacitor ones. Just want to make sure that @ionic-native/core should not be used anymore?

47

The other thing we ran into is, is scrolling of modals that have a header and long content. In our Ionic React 5 app, we have modals with a header and content that spans more than 100% of the viewport height. The modal code looks like:

<IonModal>
  <IonHeader><IonToolbar><IonTitle>modal title</IonTitle></IonToolbar></IonHeader>
  <IonContent>lots of content here</IonContent>
</IonModal>

The resulting modal has a vertical scrollbar and it scrolls correctly.

After the upgrade to Ionic React 6, you can still scroll, but the bottom part of the IonContent is not shown.

See bug: Modal in Ionic 6 not scrolling to end · Issue #24478 · ionic-team/ionic-framework · GitHub.

48

Great news! Where can we get the demos in GitHub you showed in the announce 6 blog?

Thanks

49

Thanks for the update.

.

50

Thanks for the update. I am curious how to get ionic working with esbuild.

51

I am also curious about the same.

52

ionViewWillEnter/ionViewDidEnter wont be called in child components, only from parent pages. This leads to quite complex and buggy code, where you need to make sure you remember to call it from each parent in the chain of components up to the parent, which can be many layers deep. It would be great if child components would call the ionViewWillEnter/ionViewDidEnter without requiring the call from parents.

53

Hi,

I use Ionic with vue to build my PWA.
This has been working great, but today I have been trying to upgrade to Ionic 6. This doesn’t work for me at all. My app is broken.

Firstly, the installation instructions didn’t work for me. The command

vue upgrade --next

kept failing with failed dependencies. I eventually changed to

vue upgrade --all

and that seemed to work.

But now when I try to compile my code I get a lot of errors:

…/node-modules/vue/dist.vue has no exported member SetupContext / toRefs / ref / beforeUnmount / onBeforeUnmount / watch

so my app is completely broken. How can I recover from this?

Thanks,
Andrew

54

I didn’t have any success back in December using vue upgrade --next either. I ended up following @mhartington advice above and updated my package.json file to match the versions in the starter project here. I did that and then ran npm update.

55

Thanks for your advice.

I ended up creating a new empty Ionic starter app and then copying my code across.

This was a big job because the Vuex types had to be adjusted for, as the new started app specified strict typing.

Anyway it seems to be working now. It’s hard to understand why Ionic publishes an upgrade guide that doesn’t work.

56

Hey @andrewjboswell, our upgrades does indeed work, as we’ve tested this extensively.

What probably happened is when you ran vue update, you accidentally installed vue@2.x, which we do not support.

In our update/migration guide, we give you the correct commands to run.

57

Hi Mike,

Thanks for letting me know.

This has taken many long hours of struggling but I seem to have almost recovered from this now.

Regards,
Andrew

58

Amazing work! Congrats to all team.

1 Like
59

@mhartington Would Ionic ever consider adding built-in support for Nuxt/Next?

60

Great stuff!
Would that be possible to associate #ids to blog articles’ sections, so we can easily share a particular section of an article?

61

Hello, I am new with Ionic and started by using Ionic 6 with Angular and mostly Capacitor. Making app for Android.
Beside the fact that I like this Ionic I had a lot of problems to understand how to create and finalize an app since the docs is made of a mixture between ionic 3, 4, 5, 6. Examples never runs properly and I never know what I should install or what is already part of any modules. Worse I have very often to fight with Gradle or other libraries. Very often changes are scary because you never know if all my work will go to the sink if the “compiling” makes errors. Suggestions to fix any errors are also based on any Ionic possible and never match your real problem… Well I think you understand what I mean :slight_smile: Anyway thanks for your big work… My final question: Where is the docs dedicated to Ionic 6 and nothing else?