Skip to content

Support async components #1012

@matt-sanders

Description

@matt-sanders

Version

1.0.0-beta.25

Reproduction link

https://codesandbox.io/s/vql5z8zxv7

Steps to reproduce

Everything should run immediately within the codesandbox link. Note that sometimes the console doesn't update so you may have to open the chrome console to see the output.

What is expected?

You should be able to add async components without an error.

What is actually happening?

When you create an async component, you will get the following error:
TypeError: Cannot read property 'props' of undefined. This was previously working in 1.0.0-beta.20 but it seems that from 21 onwards it was broken, however 21 gives a slightly different error.

Activity

changed the title [-]TypeError when adding a plugin which loads an async component[/-] [+]TypeError when loading an async component[/+] on Oct 26, 2018
eddyerburgh

eddyerburgh commented on Oct 26, 2018

@eddyerburgh
Member

Root async components aren't yet supported, but we intend to add support.

changed the title [-]TypeError when loading an async component[/-] [+]Support async components[/+] on Oct 26, 2018
matt-sanders

matt-sanders commented on Oct 29, 2018

@matt-sanders
Author

Hey @eddyerburgh thanks for the reply. Don't want to keep harping on about this, but just wanted to clarify that in the given example I'm not even mounting the component, just adding it to Vue is enough to cause the error.

Note that on line 21 I'm just mounting a basic component defined of line 15.

Another note is that this did previously work in version 20 ( which I might just roll back to for the time being ). Just curious as to why it worked in 20 but not since 21.

Thanks for the awesome library by the way, it's super helpful :)

ryanjwilke

ryanjwilke commented on Oct 7, 2019

@ryanjwilke

Just checking in on this since it's been a year now. It sounds like this is still an outstanding issue, correct? I keep getting this error when running yarn test (using Jest):

    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve async component: () => {
                /* istanbul ignore next */cov_rrcos4evi.f[5]++;
                cov_rrcos4evi.s[31]++;
                return Promise.resolve().then(() => {
                  /* istanbul ignore next */cov_rrcos4evi.f[6]++;
                  cov_rrcos4evi.s[32]++;
                  return _interopRequireWildcard(require(`@/assets/icon/x${this.size}/${this.name}.svg`));
                });
              }
      Reason: TypeError: Invalid value used as weak map key

This error is referencing this code inside the component:

  computed: {
    icon() {
      return () => import(`@/assets/icon/x${this.size}/${this.name}.svg`)
    },
  }
chrisjbrown

chrisjbrown commented on Apr 12, 2021

@chrisjbrown

Just wanted to check in on this as it's been... years. currently getting the same error as @ryanjwilke using version "@vue/test-utils": "^1.1.3"

VictorCamargo

VictorCamargo commented on Aug 6, 2021

@VictorCamargo

There's any workaround about this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ryanjwilke@chrisjbrown@VictorCamargo@matt-sanders@eddyerburgh

        Issue actions

          Support async components · Issue #1012 · vuejs/vue-test-utils