How to debug angular library error? - javascript

I'm using Angular in a website in which I just upgraded angular, angular-route and angular-ui-router to the latest bower versions. But suddenly I get this error in the console:
TypeError: a.remove is not a function
at Object.H.removeListener (main.js:7)
at Object.b.module.service.a.removeEvents (angular-google-maps.min.js?version=2.2.1:5)
at angular-google-maps.min.js?version=2.2.1:8
at n.a.$get.n.$broadcast (angular.js:16311)
at n.a.$get.n.$destroy (angular.js:15923)
at j (angular-ui-router.min.js?version=0.2.15:7)
at angular-ui-router.min.js?version=0.2.15:7
at angular.js:7554
at k (angular-ui-router.min.js?version=0.2.15:7)
at angular-ui-router.min.js?version=0.2.15:7
The problem is now that I'm unsure of how to debug this. In the trace above I see two libs: angular-ui-router and angular-google-maps. Should I start looking through the source of these libs, or is there something I'm missing in this trace which shows me how to solve this?
All tips are welcome!
[EDIT]
As suggested in the comments by #charlietfl I checked the dependencies of angular-google-maps in the bower.json file:
"dependencies": {
"angular": "1.2 - 1.4",
"angular-simple-logger": "~0.0.1",
"lodash": ">=3.8.0"
},
Currently I've got:
angular version 1.4.7
angular-simple-logger version 0.0.4
lodash version 3.10.1
From this only angular-simple-logger seems to be off. But I'm unsure what to do from here. Should I downgrade angular-simple-logger to version 0.0.1, should I change "~0.0.1", to ">=0.0.1", or is there anything else I could do?

I can't see your source code, so this looks like it might be pretty specific to your application. Especially with ui-router, state parameters can muck up a lot of things.
If this were my application, I would first turn these settings on in the Chrome debugger.
Then I would run the code and step through until the exception was thrown in angular-ui-router.min.js, since that's furthest back in the stack trace.
To make things readable, you click this handy button:
It might not be the quickest solution, but it will get you the details you need to further diagnose the problem.

Related

can I run a package that is installed on the "client" project from my own project?

I know this sounds like a weird question, let me try explaining it further with examples:
First of all, I'm trying to add some functionality to JSDoc in a simple library. Let's call it jsdoc-extra.
When a project includes my library, it should also have jsdoc installed. I have listed jsdoc as a dependency on my own library as well.
jsdoc-extra > package.json
{
[...]
"dependencies": {
[...]
"jsdoc": "^3.6.6",
[...]
}
}
And let's suppose a "sample" project is trying to use my library (this is what I actually have running for now, installed from the file)
{
[...]
"dependencies": {
"jsdoc": "^3.6.6",
"jsdoc-cov": "file:../jsdoc-cov",
"jsdoc-ts-utils": "^1.1.2"
}
}
From my jsdoc-extra code I can search and find the sample/node_modules/jsdoc/jsdoc.js that is installed on the "client" application (sample), or use my own jsdoc-extra/node_modules/jsdoc/jsdoc.js instead when the first one is not available. I can then execute it with spawn
So far so good. However:
The "client" (sample project in this case) might be using some plugins on their jsdoc setup, like you can see in the previous code snippet, I have ts-utils installed as an example.
So when I'm inside the sample project, and try running:
node_modules/jsdoc/jsdoc-extra.js -c jsdoc.json
(jsdoc.json is the standard jsdoc config file that I just pass through to it)
I get this kind of errors:
(node:3961) UnhandledPromiseRejectionWarning: Error: ERROR: Unable to find the plugin "jsdoc-ts-utils"
It seems my app (jsdoc-extra) cannot use jsdoc-ts-utils that is installed on the client (sample) project, even when I run sample's own installed jsdoc.
I want to be able to execute it like this so the "client" project can execute jsdoc-extra without extra jsdoc configuration, it will use whatever it's already using for regular jsdoc operations.
I'm beginning to think that my best options is to actually write a jsdoc plugin...
I know this is a lot, and probably confusing, I'll gladly provide more info if you think it's necessary. Thanks!
I decided to close this and instead just write a jsdoc plugin. It's the easier way to hack into the data it generates to do what I want. My extra functionality will be tied in with the doc generation, which is not ideal, but I'll deal with it...

Can't build or install React Native app after installing React Navigation

I've just started building my first React Native app with minimal success. I've built my boilerplate code but now I want to add a separate screen to it. Cue React Navigation.
Having tried twice to install the module, I've not had much luck. I used both Facebook's documentation and the Getting Started guide from React Navigation themselves. Still no luck.
The error I get is something to do with the build.gradle file in my android folder. As per the Getting Started guide, I did add two lines into my dependencies area but this doesn't appear to have had any effect.
The error message is as follow:
Could not compile build file:
'C:\Users\USERNAME\Documents\ReactNative\WasteAway\android\app\build.gradle\'
> startup failed
General error during semantic analysis: Unsupported class file major version 57
My dependencies in the build.gradle file are as follows:
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
if (enableHermes) {
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
implementation jscFlavor
}
}
Am I missing something obvious here or have I skipped a step on the tutorials? I can't see where I'm going wrong here, folks. Any help is greatly appreciated.
Answering this since I've been advised on the solution:
It looks like it was the version of the JDK that I was using which was causing problems. Strangely enough, I was using too new a version that was notoriously buggy. Uninstalling and reverting JDK1.8 solved my issues. Explanation here.

Error: Support for the experimental syntax 'optionalChaining' isn't currently enabled, but it is

I've followed the instructions here and here and I've added the following to my package.json
},
"babel": {
"plugins": [
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-proposal-optional-chaining"
]
},
"dependencies": {
But I'm still getting the error
Support for the experimental syntax 'optionalChaining' isn't currently enabled
What am I doing wrong here?
Okay I am bit late here, but I can see the question is still active, for those come later:
At the time of writing, optional chaining might not work in NUXT project with node > 12, try using the current LTS version (node 12).
I think the issue might related to one or more dependencies of NUXT but we didn't investigate further, using node 12 resolves the issue for us.
I had a similar problem,
I was using Vue CLI ,the reason is that the scaffolding version is too low (plugins installed separately seem to be ignored), you can check and upgrade your project scaffolding

react-native metro throws error in traverseDependency, can package-lock.json be the reason?

The error I get is described here on github in detail. Basically the metro bundler fails with the following error:
error: bundling failed: TypeError: Cannot read property 'map' of undefined
at resolveDependencies (C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:370:18)
at C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
at Generator.next ()
at step (C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)
at C:\Apps\MyProject\rnw\node_modules\metro\src\DeltaBundler\traverseDependencies.js:309:15
at
DELTA [android, dev] ....../index.js ▓▓░░░░░░░░░░░░░░ 14.7% (221/612), failed.
This error message does not help me much, as I am not deep into how the metro bundler works.
So I checked recent changes I did in the code, e.g. I added the following to my project:
"react-native-tab-view": "^1.3.2",
After that, I have a weird change in package-lock.json. It seems react-native-tab-view was already existing there, I guess because it is a dependency of another project I imported before. Here is the first change in package-lock.json:
Ok so whatever, this looks still ok to me. What is weird is the second change I see:
Wait, what? A dependency to react-native-tab-view was added to react-navigation-deprecated-tab-navigator with the old version number 0.0.77? That looks strange, at least for me.
Can somebody help me out here - is this change normal, or can this be the reason why metro bundler fails?
Any input appreciated!
I solved the issue by emptying the C:\Users\\AppData\Local\Temp folder.
No Need to Empty whole folder
I solved the issue by deleting only one folder metro-cache
Path : C:\Users\Harsh1311\AppData\Local\Temp

#types/react cannot find name 'HTMLDialogElement'

I am encountering a weird build issue with typescript and #types/react. I have two typescript config files: one for files which use react, and one for those that don't. When building the portion of my project which doesn't use react, I see the following error:
node_modules/#types/react/index.d.ts(3508,58): error TS2304: Cannot
find name 'HTMLDialogElement'.
node_modules/#types/react/index.d.ts(3508,78): error TS2304: Cannot
find name 'HTMLDialogElement'.
node_modules/#types/react/index.d.ts(3782,72): error TS2304: Cannot
find name 'HTMLDialogElement'.
node_modules/#types/react/index.d.ts(3782,92): error TS2304: Cannot
find name 'HTMLDialogElement'.
I was able to reproduce the error with a minimal example:
node_modules/typescript/bin/tsc typescript/foo.ts --outDir static/js/src --module none
The file typescript/foo.ts is a minimal file I used to reproduce the problem, and is deliberately short:
function printNumber(n: number) {
console.log(n);
}
let x = 3;
x *= 4;
printNumber(x);
Note that foo.ts does not have any references to react whatsoever. The weirdest part of this is when I uninstall #types/react, the error messages go away.
What's going on?
EDIT: I found this issue which manifests when tsc version > 2.3.2. I downgraded tsc to version 2.3.2 but the problem persists.
As fair as I understand the typescript's policies, this is relative to the version you are using. When typescript 2.3.2 was out the definition for HTMLDialogElement was not included in #types/react, so you see this error. You can read more about this in this github issue.
Probably, even if you don't include React on your foo.ts, the typescript compiler will include and check all the definitions that you've got, even those in node_modules. This will explain why you have this error even without including React.
Now that I think about it, I don't event include the definitions that I wrote - but they're used by the transpiler.
I had the same issue on a project recently cloned yesterday; I fixed it by updating typescript to ^2.7.0.
I had the same problem. tried all the upgrades and downgrades mentioned here.but, nothing worked for me. finally ended up commenting out the 'dialog' from line number 3782 and 3508 in node_modules/#types/react/index.d.ts
This is only a quick fix.
I had the same issue (latest create-react-app, with typescript version 2.5.3) and after I ejected the app (npm run eject) and updated typescript by hand to current version in package.json to current 2.7.2 this works again.
Seems to be some very strange bug (on Windows) cause my college (same installation) doesn't have this bug. When searching for this, you will find it appearing every 2 month or so, so that I guess, that it is not only this issue ( https://github.com/Microsoft/TypeScript/issues/16880 ) Duma pointed to, cause the project we're working on started somewhere in December.

Categories