I'm trying to debug my VueJs3 application. Often I find that the debug messages shown in the console are cryptic and non-specific. This is an example of what I recently received:
runtime-core.esm-bundler.js?5c40:958 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions')
at shouldUpdateComponent (runtime-core.esm-bundler.js?5c40:958)
at updateComponent (runtime-core.esm-bundler.js?5c40:4448)
at processComponent (runtime-core.esm-bundler.js?5c40:4402)
at patch (runtime-core.esm-bundler.js?5c40:3993)
at patchBlockChildren (runtime-core.esm-bundler.js?5c40:4307)
at patchElement (runtime-core.esm-bundler.js?5c40:4215)
at processElement (runtime-core.esm-bundler.js?5c40:4073)
at patch (runtime-core.esm-bundler.js?5c40:3990)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4608)
at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
Unfortunately these messages do not help narrow down the specific component or line where an object is null. In fact these lines dont reference any of my files. I do have Vue Chrome extension installed, but that doesn't show any debug information. I'm used to working with python/django where an exception triggers a beautiful cascade of stack trace which helps to easily debug errors. How can I be more productive in solving errors in Vue?
Related
I deploy my next.js app in cPanel. The app is working properly in localhost but in cPanel it shows error of
TypeError: Cannot read properties of null (reading 'content')
at main-aff9f5cd95c9bd16.js:1:10552
at main-aff9f5cd95c9bd16.js:1:11029
at Array.forEach (<anonymous>)
at Object.updateHead (main-aff9f5cd95c9bd16.js:1:10400)
at Object.t [as _pendingUpdate] (main-aff9f5cd95c9bd16.js:1:90322)
at main-aff9f5cd95c9bd16.js:1:90761
at ri (framework-4556c45dd113b893.js:1:93730)
at Ss (framework-4556c45dd113b893.js:1:113957)
at is (framework-4556c45dd113b893.js:1:106214)
at jl (framework-4556c45dd113b893.js:1:46913)
I am disturbed by this error because I am not using any content variable in my project. I don't know from where this error is occurred. Kindly tell me how to solve this error.
I am debugging an application that throws me the error of
ERROR Error: Invalid hook call. Hooks can only be called inside of the body of a
function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See react-invalid-hook-call for tips about how to debug and fix this problem.
[Fri Oct 23 2020 09:04:14.325] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
But it doesn't say where is the source file of the error... since it is a big application I am having trouble finding where this error is located.
I am able to compile the application but the error happens on the initialization.
When I run the debugger it says the following on the developers console...
Unable to symbolicate stack trace: The stack is null
Plus the previous errors.
Any idea how I could locate the source file of this errors?
Thank you for your help!
Trying to integrate Angular 4 + #ngx-translate. Everything is executing and working properly with npm start. Problem arises when I tries to npm test run Karma test cases. All these started after adding #ngx-translate capabilities.
Console get below error:
20 09 2017 14:24:30.334:INFO [Chrome 60.0.3112 (Windows 7 0.0.0)]: Connected on socket n1uvSjMzMfCGU26zAAAA with id 7587189
Chrome 60.0.3112 (Windows 7 0.0.0) ERROR
Uncaught TypeError: Cannot read property 'Injectable' of undefined
at node_modules/#ngx-translate/core/bundles/core.umd.js:817
On browser console:
Uncaught TypeError: Cannot read property 'Injectable' of undefined
at Object.<anonymous> (core.umd.js:817)
at __webpack_require__ (core.umd.js:30)
at Object.module.exports (core.umd.js:1421)
at __webpack_require__ (core.umd.js:30)
at module.exports (core.umd.js:76)
at core.umd.js:79
at webpackUniversalModuleDefinition (core.umd.js:9)
at core.umd.js:10
ng-bootstrap.js:9 Uncaught TypeError: Cannot read property 'core' of undefined
at webpackUniversalModuleDefinition (ng-bootstrap.js:9)
at ng-bootstrap.js:10
On browser:
OtherComponent when inside a test host should process Instance name
TypeError: Cannot read property 'bpmWrapWorkItemList' of undefined
TypeError: Cannot read property 'bpmWrapWorkItemList' of undefined
Please help !!! I am new to Angular 4..
Please put beforeEach block to update language for translateservice
beforeEach(inject([TranslateService], (service: TranslateService) => {
service.use('de');
}));
I had a similar issue, and was able to resolve the problem by removing two script definitions in .angular-cli.json.
I replaced
"scripts": [
"../node_modules/#ngx-translate/core/bundles/core.umd.js",
"../node_modules/#ngx-translate/http-loader/bundles/http-loader.umd.js"
],
with
"scripts": [],
While this resolves the problem, and the translate service still works, I do not know why those scripts are required in the first place, and if it's okay to remove them.
I am working on augmenting the example found here. So first of all it works great if I call npm start. Now I wanted to try and get it to work with an existing ExpressJS project. To do this in a quick and dirty way I copy the three js files to the ./public/javascripts folder and create the following index.jade...
extends layout
block content
my-app Loading....
script(type="text/javascript", src="http://localhost:3000/javascripts/polyfills.js")
script(type="text/javascript", src="http://localhost:3000/javascripts/vendor.js")
script(type="text/javascript", src="http://localhost:3000/javascripts/app.js")
but now I get....
Error: Uncaught (in promise): Failed to load %5Bobject%20Object%5D
at resolvePromise (zone.js:538)
at PromiseCompleter.reject (zone.js:515)
at application_ref.js:349
at ZoneDelegate.invoke (zone.js:323)
at Object.NgZoneImpl.inner.inner.fork.onInvoke (ng_zone_impl.js:48)
at ZoneDelegate.invoke (zone.js:322)
at Zone.run (zone.js:216)
at zone.js:571
at ZoneDelegate.invokeTask (zone.js:356)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (ng_zone_impl.js:39)
at ZoneDelegate.invokeTask (zone.js:355)
at Zone.runTask (zone.js:256)
at drainMicroTaskQueue (zone.js:474)
at XMLHttpRequest.ZoneTask.ZoneTask.cancelFn.invoke (zone.js:426)
zone.js:461 Unhandled Promise rejection: Failed to load %5Bobject%20Object%5D ; Zone: angular ; Task: Promise.then ; Value: Failed to load %5Bobject%20Object%5DconsoleError # zone.js:461_loop_1 # zone.js:490drainMicroTaskQueue #zone.js:494ZoneTask.ZoneTask.cancelFn.invoke # zone.js:426
Current project is available here
So for some reason this worked with the built in webpack server
styleUrls: [String(require('./navbar.component.styl'))]
This of course should be
styles: [String(require('./navbar.component.styl'))]
I've simply installed the aurelia-dialog plugin, version 1.0.0-beta.1.1.0, and registered it with aurelia, but I'm getting an error:
aurelia.use
.plugin('aurelia-dialog');
dialog-configuration.js:65 Uncaught (in promise) TypeError: _aureliaPal.DOM.injectStyles is not a function(…)
_apply # dialog-configuration.js:65
configure # aurelia-dialog.js:73
(anonymous function) # aurelia-framework.js:272
I just experienced the same problem - solved it by running "jspm update", which caused several aurelia packages to be updated from beta-1.2.1 or beta-1.2.2 to rc-1.0.0 and added various other packages. Hence, the problem seems to be caused by some kind of version conflict.