codesandbox / codesandbox-client

An online IDE for rapid web development
https://codesandbox.io
Other
13.06k stars 2.28k forks source link

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

Open tony19 opened 5 years ago

tony19 commented 5 years ago

🐛 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
screenshot of error

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

henryachen commented 4 years ago

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

Anyone find clues to solving this?

JFGHT commented 4 years ago

Still not fixed.

lbogdan commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

Sandboxes:

tony19 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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] commented 3 years ago

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 commented 3 years ago

Still unresolved

MichaelViveros commented 3 years ago

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] commented 3 years ago

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 commented 3 years ago

Still unresolved

florianschepp commented 3 years ago

Got it as well

gdimitropoulos commented 3 years ago

is there any solution to this problem ?

lifubang commented 2 years ago

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

lifubang commented 2 years ago

@JamesACS PTAL. Thanks very much.

lifubang commented 2 years ago

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

str1x commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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