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

Created on 13 Jun 2019 · 14Comments · Source: codesandbox/codesandbox-client

🐛 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

🎒 Bundler 🐛 Bug

Source

tony19

👍7

Most helpful comment

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.

elbojoloco on 21 Oct 2020

👍2

All 14 comments

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

idmick on 27 Jun 2019

👍2

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.

sybrendotinga on 17 Sep 2019

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

ChristophWalter on 27 Sep 2019

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

Anyone find clues to solving this?

henryachen on 6 Nov 2019

Still not fixed.

JFGHT on 8 Jan 2020

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?

lbogdan on 28 Jan 2020

👍2

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!

sybrendotinga on 29 Jan 2020

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 :).

JFGHT on 30 Jan 2020

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:

derberg on 17 Feb 2020

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

tony19 on 14 May 2020

👍2

elbojoloco on 21 Oct 2020

👍2

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 on 5 Nov 2020

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.

anzuj on 5 Nov 2020

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.