Vite: "Cannot add property __props, object is not extensible" when running in production mode while using defineAsyncComponent

[phanmn]

Describe the bug

Show error "Cannot add property __props, object is not extensible"

Reproduction

Work normal at dev environment, but fail when running in production
Repo: This is private source, but I will update later if need

System Info

• vite 1.0.0-rc.4
• vue v3.0.0-rc.5
• macos: 10.15.6
• node: 12.14.1

Logs (Optional if provided reproduction)

[underfin]

Can you give a reporduction?

[icehaunter]

Also encountered this while trying to serve for production with a defineAsyncComponent. I had two components with circular dependencies for each other, essentially trying to replicate this in Vue 3. I had the "inner" component use defineAsyncComponent to import and reference its parent.

[phanmn]

Can you give a reporduction?

Sure @underfin , I update soon, thank you!

[gk-shi]

I'm in the same situation as you.

Also encountered this while trying to serve for production with a defineAsyncComponent. I had two components with circular dependencies for each other, essentially trying to replicate this in Vue 3. I had the "inner" component use defineAsyncComponent to import and reference its parent.

[anncwb]

I did not use defineAsyncComponent, and the same problem occurred. How can I deal with it? @underfin

[underfin]

@anncwb Can you provider a reporduction?

[underfin]

Just close it. It will reopen if anyone can give a reporduction.

[youraerials]

FWIW, we are seeing this problem as well with Vite 1.0.0-rc.4 and vue v3.0.0-0. Vite serves the app in dev without problems but when we build and serve the built code, we get:

index.0390025c.js:929 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <RouterView> 
  at <App>

and one frame down:

index.0390025c.js:2235 Uncaught (in promise) TypeError: Cannot add property __props, object is not extensible

Looking at the source, It looks to me like the error is here (in the OR case where it is trying to set com.__props = {})

function normalizePropsOptions(comp, appContext, asMixin = false) {
  const appId = appContext.app ? appContext.app._uid : -1;
  const cache = comp.__props || (comp.__props = {});

I could not reproduce this problem in a small test app with three components, but it hits us in the full-scale app we are porting up from Vue 2. We do use a lot of nested defineAsyncComponent calls so it may only be an issue if you are a few components deep?

We are continuing to try to isolate a reproducible test case!

[youraerials]

We solved it in our app: we were porting existing Vue 2 router code and had routes specified like this

{
  path: '/about',
  name: 'About',
  component: () => import('/@/components/About.vue')
},

once Vite runs a build, this import statement doesn't happen in the runtime. If you instead do

import About from '/@/components/About.vue';

and then

{
  path: '/about',
  name: 'About',
  component: About
},

everything works fine in the dev server AND in the build. Hope this is helpful!

[MatthiasGrandl]

@icehaunter did you find a solution for the circular dependency problem? having the same problem here.

[JonasKruckenberg]

Can confirm that it has to do with defineAsyncComponent.
The stack trace with source maps enabled is below.

WORKAROUND:
What worked for me is not mixing async components and sync components. So try making all components async and see if it helps.

[416377966]

Can you give a reporduction?

`const AsyncCompMain = defineAsyncComponent(() =>
import('./modules/main/main.vue')
)

app.component('comment-main', AsyncCompMain)
`
here is my main.vue

[Woomay]

We solved it in our app: we were porting existing Vue 2 router code and had routes specified like this

{
  path: '/about',
  name: 'About',
  component: () => import('/@/components/About.vue')
},

once Vite runs a build, this import statement doesn't happen in the runtime. If you instead do

import About from '/@/components/About.vue';

and then

{
  path: '/about',
  name: 'About',
  component: About
},

everything works fine in the dev server AND in the build. Hope this is helpful!

it really helps me!!!

[JonasKruckenberg]

Yes, the only problem is that now all routes get loaded upfront right?
And this is exactly what import() tries to solve.
From my testing you can only really do 2 things.

1. Make all imports synchronous or
2. Make all imports async via import() and defineAsyncComponent

But everything in-between fails.