Nativescript Vue DevTools - vue-devtools stuck "Waiting for connection..." - vue.js

I cannot manage to get the Vue DevTools running with my iOS Nativescript Project. I followed exactly the instruction on https://nativescript-vue.org/en/docs/getting-started/vue-devtools/ but the Nativescript App does not connect to vue-devtools.
I'm working on a Mac having latest Nativescript 8.1.3 installed, nativescript-vue-devtools is version 1.5.1.
One thing I notice is the error message ReferenceError: SocketManager is not defined as soon as I put Vue.use(VueDevtools) into the code. This error message always appears, I tried several Simulators with different iOS version, I also tried a physical device. I also tried with a "fresh" blank Vue project, leaving completely unchanged but just adding the Vue Devtools, same error.
Anyone out there who managed to get this working?
Thank you for your help.

Related

React Native TypeError: Cannot read property 'indexOf' of undefined, js engine: hermes

I am working on a react-native project. I have been running the application on Android and iOS devices for the past 6 months. I haven't faced any problems till now. But suddenly today, while I am trying to run the application I am getting a compile error with the description. TypeError: Cannot read property 'indexOf' of undefined, js engine: hermes. I tried to debug the issue and found that there is an issue while connecting to the remote debugger. But the strange thing here is even I haven't selected the remote debugging option from either of emulator or simulator.
So, I have enabled the remote debugging option from the emulator to get a quick fix. It is working fine. But why is it connected to the remote debugger even after the fresh installation? And the quick fix comes with its own issues. The application is functioning a bit lag and inconsistent. I suspect there is an issue with the metro bundler. I have removed the cache using rm -rf /tmp/metro-* command, cleaned gradle using ./gradlew clean command, and cleaned iOS build by deleting derived Data. But still, the issue persists.
Is there any other step am I missing here? If it is the issue with the metro bundler, is there any way to reset it completely? Please check the attached image for more information.
The reason for this issue in my case is not with the metro bundler or its cache but with one of the third-party dependency named auth0-js(In your case it would be different). It is adding some global or window properties which are causing the above-mentioned issue. I have removed it and replaced with the library which is closed to react-native ecosystem which eventually resolved the issue.

Vue devtools stops after refresh

I open vscode and start my development server via npm run serve. My app loads into chrome and upon inspection under the vue tab vuex I can see my store.
Now when I refresh the page under the vue tab it says "No App" and can no longer see my vuex store. Any thought on why the devtools stops working after a refresh? If i stop the server and restart the devtools work... but on refresh is stops.
I'm using vue devtools version 6.0.0 beta updated June 28, 2021, and chrome version 72.0.4515.131. My app is using vue 2.
Thanks for any help you can provide.
There is a similar open issue in Vue devtools version 6.0.0-beta.15 posted on their github. Seems like yours is a bug as well, you should add your own issue and steps to reproduce the issue. In the meanwhile you can downgrade the Vue devtools to a stable version.
Are you using the development or production version of Vue?
The solution for me was to use the latest development version of Vue.
You can find more about it in their documentation.

Expo debug remote JS causes unresponsiveness in UI

I upgraded a react native project recently from expo SDK 36 to 38. It compiles now, but anytime I click on "Debug Remote JS", it causes the UI to become slow and unresponsive, only occasionally picking up the on click events. I created a bare bones project to duplicate it. To verify, either run expo init from cli or here's a project https://github.com/seniordevops/tab-application.git. Click the tabs without the debugger on, then turn on debug remote JS and watch the slow down. Happens on both Mac and PC. Any ideas on the root cause?
This is mostly due to the fact that the clock on your PC and mobile are not synchronized.
You either have to synchronize them or have the phone clock one second earlier than your PC/Mac.
I suspect the reason could be an upstream problem of react-native. Please check this expo-cli issue:
https://github.com/expo/expo-cli/issues/2405
a maintainer reports:
when you are debugging on your device, the javascript is being
executed in your browser on your computer :(

"Unable to resolve module" debuggerWorker errors in recent react-native releases

I keep my project(s) relatively up to date with the latest RN releases. This error seems to be coming up more and more lately.
Error: Unable to resolve module `./debugger-ui/debuggerWorker.d9da4ed7` from ``:
None of these files exist:
* debugger-ui/debuggerWorker.d9da4ed7(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
Really makes it hard when trying to debug issues and a debugger statement does noting and errors are not reported to the browser tab where the console output goes.
I've already tried wiping node_modules. Is this a known issue with a concrete fix available?
Got stuck with this exact issue for hours. Just found that this occurs only on device where app is already installed with debug mode enabled.
I fixed it by:
uninstalling manually app from device (cmd+H to display simulator home) then long click on app icon and click on cross to delete app => this forces disabling debug mode,
then run app again from xcode.
Enabling debug mode after that works normally.
I had to come across a similar issue after updating #react-native-community/cli-debugger-ui to 4.2.1. Tried out several methods, nothing worked. Reverting #react-native-community/cli-debugger-ui back to 3.0.0 resolved the issue for me.
I closed the app (pressing home twice and swiping up), then started it again from the simulator and it worked.
Happens to me recently using expo and android.
The solution was to clear all Expo Go data:
Long press the Expo go icon
Then select App info
At the bottom of the screen, press Clear Data
And press Clear all data
Relaunch expo go and the react native app

Cannot attach debugger to chrome in React-native with unauthorized error

I am a newbie to React-native Development. I am able to run my app on android emulator by changing port to 8088 as my organization is using McAfee in port 8081. Everything is working fine but i am not able to debug my app in chrome. Whenever I press 'Debug JS remotely' I am getting unauthorised error in console and debugger-ui is not using react-native developer tools. I tried a lot and found some links to the problem.
This link addresses the problem but I am not getting how to pull the code from react-native master branch.
It has been two days and I am still struggling to find the solution. I will be thankful if someone helps me out there. Thanks in advance.
Remove "ALLOW-CONTROL-FLOW-ORIGIN" from chrome extention.
Uninstall build from device or Simulator/Emulator
Run Again
Hope it will be fixed.