bug: Vue toast Uncaught TypeError: Cannot set properties of undefined (setting '$lazyInstance$')

[wilhantian]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

An error will be reported when toast is created in an external ts file：

Uncaught TypeError: Cannot set properties of undefined (setting '$lazyInstance$')
    at registerInstance (index-06cd27b1.js?cd96:4)
    at new t (overlays-5f2f4ffc.js?9cdf:4)
    at eval (overlays-5f2f4ffc.js?9cdf:4)
    at async toast (toast.ts?e2e3:4)
registerInstance @ index-06cd27b1.js?cd96:4
t @ overlays-5f2f4ffc.js?9cdf:4
eval @ overlays-5f2f4ffc.js?9cdf:4
Promise.then (async)
createOverlay @ overlays-5f2f4ffc.js?9cdf:4
create @ overlays-5f2f4ffc.js?9cdf:4
toast @ toast.ts?e2e3:4
exeHandler @ index.vue?d776:71
exeHandler @ index.vue?b665:33
eval @ runtime-dom.esm-bundler.js?2725:371
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:6737
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:6746
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:6756
invoker @ runtime-dom.esm-bundler.js?2725:357
toast.ts?e2e3:11 Uncaught (in promise) TypeError: t.present is not a function
    at toast (toast.ts?e2e3:11)

Expected Behavior

It can run normally like ionic 5.x

Steps to Reproduce

src/toast.ts

async function toast(){
    const t = await toastController.create({
        message: 'hello'
    });
    t.present();
}

src/*.vue

import toast from './toast';

defineComponent({
    setup(){
        onMounted(()=>{
            toast(); // Uncaught TypeError: Cannot set properties of undefined (setting '$lazyInstance$')
        });
    }
})

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.0.1

Capacitor:

Capacitor CLI : 3.3.3
@capacitor/android : not installed
@capacitor/core : 3.3.3
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v14.15.0 (/usr/local/bin/node)
npm : 6.14.8
OS : macOS Monterey

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed.

In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[NunoSav]

Your function lacks async keyword in its definition, not sure if this is the source of the error...

async function toast(){
    const t = await toastController.create({
        message: 'hello'
    });
    t.present();
}

[wilhantian]

Your function lacks async keyword in its definition, not sure if this is the source of the error...

async function toast(){
    const t = await toastController.create({
        message: 'hello'
    });
    t.present();
}

Actually there is async in my code. There are other reasons for this problem.

[sean-perkins]

Hello @wilhantian thanks for reporting this issue.

I'm currently unable to replicate your issue with the provided example. Can you provide an example to reproduce your issue?

Here's a repo that I created with your information: https://github.com/sean-perkins/gh-24503-vue-toast and the toast displays correctly on mount.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[wsamoht]

I am also seeing this error but with the loadingController. I cannot replicate this for the toastController. It was working fine in Ionic 5.

Here is a project with examples of both.

https://github.com/wsamoht/ionic-gh-24503

[wsamoht]

I just figured out the fix for this. We need to import from @ionic/vue and not @ionic/core. That is why my toastController was working just fine. Not sure if it is still a bug in ionic/core.

[sean-perkins]

I just figured out the fix for this. We need to import from @ionic/vue and not @ionic/core. That is why my toastController was working just fine. Not sure if it is still a bug in ionic/core.

Great discovery, thanks!

The Vue package uses the custom elements build of @ionic/core web components. The wrappers of the @ionic/vue package will define the custom element when .create() is called for the controller.

This shouldn't really be a problem for @ionic/core, since you would be required to define the custom elements before mount in your application of choice (if not using our wrappers).

I'm going to close this issue out for now 👍 thanks again!