Hot reloading fails: TypeError: Cannot read property 'Ctor' of undefined

[tony19]

🐛 bug report

Description of the problem

A previously working Codesandbox is now crashing with:

Cannot read property 'Ctor' of undefined

sandbox.115b0c69.js:1 TypeError: Cannot read property 'Ctor' of undefined
    at VueComponent.eval (eval at de (sandbox.115b0c69.js:1), :88:19)
    at invokeWithErrorHandling (VM3644 vue.common.dev.js:1859)
    at callHook (VM3644 vue.common.dev.js:4210)
    at VueComponent.Vue._init (VM3644 vue.common.dev.js:4988)
    at new VueComponent (VM3644 vue.common.dev.js:5137)
    at createComponentInstanceForVnode (VM3644 vue.common.dev.js:3286)
    at init (VM3644 vue.common.dev.js:3117)
    at createComponent (VM3644 vue.common.dev.js:5963)
    at createElm (VM3644 vue.common.dev.js:5910)
    at VueComponent.patch [as __patch__] (VM3644 vue.common.dev.js:6460)
    at VueComponent.Vue._update (VM3644 vue.common.dev.js:3936)
    at VueComponent.updateComponent (VM3644 vue.common.dev.js:4057)
    at Watcher.get (VM3644 vue.common.dev.js:4468)
    at new Watcher (VM3644 vue.common.dev.js:4457)
    at mountComponent (VM3644 vue.common.dev.js:4064)
    at VueComponent.Vue.$mount (VM3644 vue.common.dev.js:9034)
    at VueComponent.Vue.$mount (VM3644 vue.common.dev.js:11919)
    at mount (vue-test-utils.js:6187)
    at shallowMount (vue-test-utils.js:6218)
    at Object.eval (MyComponent.spec.js? [sm]:11)
    at vendors~sandbox.b6b2495b.chunk.js:310
    at new Promise ()
    at t.callAsyncFn (vendors~sandbox.b6b2495b.chunk.js:310)
    at sandbox.115b0c69.js:1
    at g (common-sandbox.52624a55.chunk.js:15)
    at Generator._invoke (common-sandbox.52624a55.chunk.js:15)
    at Generator.e. [as next] (common-sandbox.52624a55.chunk.js:15)
    at o (common-sandbox.52624a55.chunk.js:15)
    at u (common-sandbox.52624a55.chunk.js:15)
    at common-sandbox.52624a55.chunk.js:15
    at new Promise ()
    at common-sandbox.52624a55.chunk.js:15
    at sandbox.115b0c69.js:1
    at sandbox.115b0c69.js:1
    at g (common-sandbox.52624a55.chunk.js:15)
    at Generator._invoke (common-sandbox.52624a55.chunk.js:15)
    at Generator.e. [as next] (common-sandbox.52624a55.chunk.js:15)
    at o (common-sandbox.52624a55.chunk.js:15)
    at u (common-sandbox.52624a55.chunk.js:15)
    at common-sandbox.52624a55.chunk.js:15
    at new Promise ()
    at common-sandbox.52624a55.chunk.js:15
    at sandbox.115b0c69.js:1
    at sandbox.115b0c69.js:1
    at g (common-sandbox.52624a55.chunk.js:15)
    at Generator._invoke (common-sandbox.52624a55.chunk.js:15)
    at Generator.e. [as next] (common-sandbox.52624a55.chunk.js:15)
    at o (common-sandbox.52624a55.chunk.js:15)
    at u (common-sandbox.52624a55.chunk.js:15)
    at common-sandbox.52624a55.chunk.js:15

Related: #1329

How has this issue affected you? What are you trying to accomplish?

This prevents me from running unit tests in Codesandbox.

Link to sandbox: link

Your Environment

Software	Name/Version
Сodesandbox	PROD-1559903240-93ff18a72
Browser	Chrome Version 74.0.3729.169 (Official Build) (64-bit)
Operating System	macOS Mojave 10.14.5

[idmick]

I'm experiencing the same issue when I try to run my unit tests. I also saw the same problem in other Vue Codesandboxes.

Link to my sandbox: link Link to another Vue sandbox: link

[sybrendotinga]

I have the same problem: https://codesandbox.io/s/vue-emit-test-case-pwq4i?fontsize=14&previewwindow=tests

Whilst debugging I have found dozens of other Vue Sandboxes that also don't work. Using Chrome 76. But also Firefox 68.

[ChristophWalter]

I got the same error: https://codesandbox.io/s/vuetify-with-vue-testing-library-bhu8f?previewwindow=tests

[henryachen]

Same error too: https://codesandbox.io/s/tribe-fullstack-project-nmitq

Anyone find clues to solving this?

[JFGHT]

Still not fixed.

[lbogdan]

Hello everyone, 🙂

Is this still an issue for you? I just tested all the sandboxes from the OP and comments, and they all work for me. The tests ones give some errors (which seem to be related to the tests themselves), but not the original Cannot read property 'Ctor' of undefined one.

@JFGHT If it's still an issue for you, can you please point us to a sandbox experiencing this?

[sybrendotinga]

Hello everyone, 🙂

Is this still an issue for you? I just tested all the sandboxes from the OP and comments, and they all work for me. The tests ones give some errors (which seem to be related to the tests themselves), but not the original Cannot read property 'Ctor' of undefined one.

@JFGHT If it's still an issue for you, can you please point us to a sandbox experiencing this?

Works for me! Thanks for checking!

[JFGHT]

Hello everyone,

Is this still an issue for you? I just tested all the sandboxes from the OP and comments, and they all work for me. The tests ones give some errors (which seem to be related to the tests themselves), but not the original Cannot read property 'Ctor' of undefined one.

@JFGHT If it's still an issue for you, can you please point us to a sandbox experiencing this?

It's working now, thanks :).

[derberg]

I have 3 sandboxes that worked before and do not work now for several days already.

• Versions of dependencies did not change
• They work perfectly fine when I start them on my local machine

Sandboxes:

• https://codesandbox.io/s/github/derberg/asyncapi-react-in-action
• https://codesandbox.io/s/github/derberg/documentation-component-showcase
• https://codesandbox.io/s/github/derberg/dc-demo-all-render-engines

[tony19]

The bug seems to have resurfaced, as seen in the original sandbox link and newly created Vue sandboxes with similar unit tests.

stacktrace

TypeError: Cannot read property 'Ctor' of undefined
    at VueComponent.eval (VM1551 vue-hot-reload-api.js:88)
    at invokeWithErrorHandling (VM1544 vue.common.dev.js:1859)
    at callHook (VM1544 vue.common.dev.js:4216)
    at VueComponent.Vue._init (VM1544 vue.common.dev.js:4994)
    at new VueComponent (VM1544 vue.common.dev.js:5143)
    at createComponentInstanceForVnode (VM1544 vue.common.dev.js:3286)
    at init (VM1544 vue.common.dev.js:3117)
    at createComponent (VM1544 vue.common.dev.js:5969)
    at createElm (VM1544 vue.common.dev.js:5916)
    at VueComponent.patch [as __patch__] (VM1544 vue.common.dev.js:6466)
    at VueComponent.Vue._update (VM1544 vue.common.dev.js:3942)
    at VueComponent.updateComponent (VM1544 vue.common.dev.js:4063)
    at Watcher.get (VM1544 vue.common.dev.js:4474)
    at new Watcher (VM1544 vue.common.dev.js:4463)
    at mountComponent (VM1544 vue.common.dev.js:4070)
    at VueComponent.Vue.$mount (VM1544 vue.common.dev.js:9040)
    at VueComponent.Vue.$mount (VM1544 vue.common.dev.js:11940)
    at mount (vue-test-utils.js:13847)
    at _callee$ (ToDoItem.spec.js? [sm]:6)
    at l (runtime.js:45)
    at Generator._invoke (runtime.js:274)
    at Generator.forEach.e. [as next] (runtime.js:97)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at eval (asyncToGenerator.js:32)
    at new Promise ()
    at Object.eval (asyncToGenerator.js:21)
    at utils.js:115
    at new Promise ()
    at t.callAsyncFn (utils.js:102)
    at run-circus.ts:136
    at l (runtime.js:45)
    at Generator._invoke (runtime.js:274)
    at Generator.forEach.e. [as next] (runtime.js:97)
    at r (asyncToGenerator.js:3)
    at i (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise ()
    at asyncToGenerator.js:21
    at run-circus.ts:124
    at run-circus.ts:109
    at l (runtime.js:45)
    at Generator._invoke (runtime.js:274)
    at Generator.forEach.e. [as next] (runtime.js:97)
    at r (asyncToGenerator.js:3)
    at i (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise ()
    at asyncToGenerator.js:21
    at run-circus.ts:91

[elbojoloco]

Is there any update on this? I can't write any vue tests for my single file components because of this error. All the other suggestions online are "clean up node_modules", but that's not possible in a sandbox.

[anzuj]

Hello everyone, 🙂

Is this still an issue for you? I just tested all the sandboxes from the OP and comments, and they all work for me. The tests ones give some errors (which seem to be related to the tests themselves), but not the original Cannot read property 'Ctor' of undefined one.

@lbogdan I'm experiencing the same when trying to run unit tests in my single file component sandbox here

If I may add, this page: https://codesandbox.io/docs/tests could use an update as well since there are quite some caveats to modifying your repository. For example my Vue CLI project did not render Jest tests at all until I manually included "@vue/test-utils" under dependancies while in the real repo I instead have "@vue/cli-plugin-unit-jest" which did not work. So some guidelines of a standard package.json for Vue/React projects would save a lot of time for people trying to import their github projects for demonstration purposes. Also "vue-template-compiler" had to be moved from devDependancies to dependancies

[anzuj]

Maybe it helps someone, but in this repo you can see romans.spec.js test processes fine since it just tests JS logic, but counter.spec.js that tries to shallowMmount a Counter.vue fails with the same 'Ctor' error.

[SeriousHorncat]

I can second what the other recent posts are saying. This is incredibly frustrating not being able to have unit tests run with the project.

@lbogdan I am also getting this error now. Sandbox with Issue occurring. It looks like versioning issues but unable to resolve them due being unsure how the package.json is being processed for VueJS.

[github-actions[bot]]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[tony19]

Still unresolved

[MichaelViveros]

I found a work-around by defining my component in the test file as mentioned in https://stackoverflow.com/questions/63150352/vue-test-utils-unable-to-mount-imported-vue.

[github-actions[bot]]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[tony19]

Still unresolved

[florianschepp]

Got it as well

[gdimitropoulos]

is there any solution to this problem ?

[lifubang]

Any update of this problem? We can't run unit test for vue in codesandbox now.

[lifubang]

@JamesACS PTAL. Thanks very much.

[lifubang]

https://codesandbox.io/s/vue-test-utils-jest-example-forked-4ge3n?file=/package.json:447-462

[str1x]

try dynamic import for components in tests

import { shallowMount } from "@vue/test-utils";
const Game = async () => (await import("/src/Game.vue")).default;

describe("Game", () => {
  it("mounts", async () => {
    const wrapper = shallowMount(await Game());

    expect(wrapper.exists()).toBe(true);
  });
});

[joshua-farmlink]

This issue started appearing for me a few weeks ago, in any Vue 2 templates.

TypeError: Cannot read properties of undefined (reading 'Ctor')
    at eval (https://0gti42.csb.app/node_modules/vue-hot-reload-api.js?25cdd719:223:16)
    at Object.eval [as reload] (https://0gti42.csb.app/node_modules/vue-hot-reload-api.js?25cdd719:119:7)
    at eval (https://0gti42.csb.app/src/components/Movies.vue:34:12)
    at $csb$eval (https://0gti42.csb.app/src/components/Movies.vue:39:3)
    at H (https://codesandbox.io/static/js/sandbox.204e2cfc5.js:1:99766)
    at K.evaluate (https://codesandbox.io/static/js/sandbox.204e2cfc5.js:1:112485)
    at https://codesandbox.io/static/js/sandbox.204e2cfc5.js:1:122257
    at Array.forEach (<anonymous>)
    at ge.evaluateModule (https://codesandbox.io/static/js/sandbox.204e2cfc5.js:1:122244)
    at https://codesandbox.io/static/js/sandbox.204e2cfc5.js:1:317554
    at c (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:4328)
    at Generator._invoke (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:4081)
    at forEach.t.<computed> [as next] (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:4685)
    at e (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:206)
    at a (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:417)
Something went wrong during Vue component hot-reload. Full reload required. 

[kikoshoung]

Same issue with Vue2 templates: https://codesandbox.io/s/3y37yt?file=/src/App.vue&utm_medium=sandpack. In App.vue, HMR only works with style part, template and script don‘t. Is there any official solution for this?

TypeError: Cannot read properties of undefined (reading 'Ctor')
    at eval (https://2w52gr.csb.app/node_modules/vue-hot-reload-api.js?25cdd719:151:14)
    at Object.eval [as rerender] (https://2w52gr.csb.app/node_modules/vue-hot-reload-api.js?25cdd719:119:7)
    at $csb$eval (https://2w52gr.csb.app/src/App.vue?47f6f59c:8:71)
    at H (https://codesandbox.io/static/js/sandbox.c736ef00e.js:1:100045)
    at K.evaluate (https://codesandbox.io/static/js/sandbox.c736ef00e.js:1:112764)
    at https://codesandbox.io/static/js/sandbox.c736ef00e.js:1:122536
    at Array.forEach (<anonymous>)
    at ge.evaluateModule (https://codesandbox.io/static/js/sandbox.c736ef00e.js:1:122523)
    at https://codesandbox.io/static/js/sandbox.c736ef00e.js:1:322189
    at c (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:4328)
    at Generator._invoke (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:4081)
    at forEach.t.<computed> [as next] (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:4685)
    at e (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:206)
    at a (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:417)

Something went wrong during Vue component hot-reload. Full reload required.

[q479902964]

Same issue with Vue2 templates: https://codesandbox.io/s/3y37yt?file=/src/App.vue&utm_medium=sandpack. In App.vue, HMR only works with style part, template and script don‘t. Is there any official solution for this?

TypeError: Cannot read properties of undefined (reading 'Ctor')
    at eval (https://2w52gr.csb.app/node_modules/vue-hot-reload-api.js?25cdd719:151:14)
    at Object.eval [as rerender] (https://2w52gr.csb.app/node_modules/vue-hot-reload-api.js?25cdd719:119:7)
    at $csb$eval (https://2w52gr.csb.app/src/App.vue?47f6f59c:8:71)
    at H (https://codesandbox.io/static/js/sandbox.c736ef00e.js:1:100045)
    at K.evaluate (https://codesandbox.io/static/js/sandbox.c736ef00e.js:1:112764)
    at https://codesandbox.io/static/js/sandbox.c736ef00e.js:1:122536
    at Array.forEach (<anonymous>)
    at ge.evaluateModule (https://codesandbox.io/static/js/sandbox.c736ef00e.js:1:122523)
    at https://codesandbox.io/static/js/sandbox.c736ef00e.js:1:322189
    at c (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:4328)
    at Generator._invoke (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:4081)
    at forEach.t.<computed> [as next] (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:4685)
    at e (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:206)
    at a (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.7424373eb.chunk.js:1:417)

Something went wrong during Vue component hot-reload. Full reload required.

I also encountered the same problem. Is there any official solution for this?

[arcturus011]

i found a solution. https://github.com/codesandbox/codesandbox-client/pull/8140