Debug and Hot Reload not working with NativeScript in VS Code - vue.js

I have just installed NativeScript and the VS Code extension for it, and built a sample 'empty' Vue app as directed.
The build worked with no errors (although took a long time!) and the basic app is running on my Android device. But breakpoints don't work , and changes in the .vue files are not being hot-reloaded to the device. The debug console has
Successfully applied update
whenever i make a change (just a small message text edit) but nothing happens on the device. But I also have this error in the console:
Error when trying to require webpack.config.js file from path 'C:\Users\quilk\source\repos\NStest\nstest\webpack.config.js'. Error is: Error: Cannot find module 'C:\Users\quilk\AppData\Local\Programs\Microsoft VS Code\package.json'
and sure enough, there is no package.json at that location.
Running the command tns doctor reports no errors.
There's a similar question here but it's 4 years old and maybe things have moved on since then?
I can probably work without hot reload, but debugging with breakponits will be essential.

Related

Vue - build shows infinite loading tab

I have a tiny project with a bunch of images and vuetify.js library
Project works fine with vue serve or npm run serve
I then do npm run build, copy dist folder to my Raspberry Pi Zero v1.3 where it already runs a few other websites and they work fine
But when I open the built project in browser it just gives me infinite loading tab
Browser also throws "this tab is slowing down browser. Stop it?" kinda error
If I DO stop it I sometimes get this warning in console
"Script terminated by timeout at:" referring to chunk-vendors.js in FireFox or "RESULT_CODE_HUNG" in Chrome
Do I need to deploy code on the same computer I develop it on? Are there any spec requirements or do I need npm packages or something?
Also when I open the tab I can hear the fans in my PC speed up a bit if that helps
Also if I stop the tab the HTML structure is being shown but without images. Can that be the cause of this?
What version of vuetify.js are you using, there was a bug before version 3 in the v-slider: https://github.com/vuetifyjs/vuetify/issues/4746

React-native app failed to build suddenly

My app is giving me this huge block of error when I run 'react-native run-android'.
I'm sorry but I don't remember what/when/how things went wrong. Here are some things I remember doing since the last time it was working:
Tried to open the android project in Android Studio to check if I should update the gradle (I didn't) but I'm assuming this is where something must have gone wrong.
Tried to add async to my SQLite functions (ended up removing it).
Added Stack navigation in App.tsx.
package.json

Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle index.android.bundle is packaged

So this has been asked before but I'm asking it again because nothing has worked, I've read through all of the similar posts I could find and all but one has semi fixed the problem.
https://medium.com/#adityasingh_32512/solved-unable-to-load-script-from-assets-index-android-bundle-bdc5e3a3d5ff
This medium article is the only solution that i can find that will get debug builds running again but that is only because it is pre packaging the javascript bundle and not really fixing the problem of the app not connecting to the metro server, once the debug build is running via this method I'm unable to shake the device and get the debug menu to show up.
I've been developing this app for probably 10 months, live for 3-4 months, and can usually trudge through these errors that pop up but this one is tricky.
I've been using cleartextTrafficPermitted="true", tried implementing a custom network security config android:networkSecurityConfig="#xml/network_security_config", tried a different physical device, cleared the metro cache, deleted .gradle/ build folders, cleaned, rebuilt.. All with the same end result of the app crashing on boot and the same error in logcat Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.
Release builds work but that's because its not trying to connect to the metro server, pretty stumped on this one.
Answering this for others that might find it useful. Still not sure what I did wrong but in the process of setting up a CI/CD pipeline for the app I re cloned the project and magically android debug builds started working again. No changes to the code, the android project must have gotten corrupted somehow so recloning allowed android studio to start from square one. Weird one.

React native chrome debugger not showing that console.log and default logs

i recently upgraded from RN 0.61.5 to 0.62.2.
However, chrome debugger won't work from some point on. This means that the debugger and simulator are well connected, but I don't see any of the basic logs that I use console.log, or that first pops up logs.
So, i try some solutions.
first, I reset the project. and run react-native init <my-project>. and copy & paste past source code(Except for system files or node_modules) that src, .gitignore etc
but, this situations keep goes on now.
second, git revert when it worked well before upgrade.
but this is same bad result like above. everything is good. project's Run or Build ยทยทยท.
ONLY NOT WORKING debugger..
what should i do ?
Thank you in advance for your help.
Please look this picture
SELF ANSWER
One of the Babel packages I'm using, the Babel-plugin-transform-remove-console, had eliminated all the logs even in development mode.
If you remove this from the project, it works normally.

Vue Deployment - modules[moduleId] is undefined on page load

Currently have an Azure pipeline that is watching the staging branch and building on changes using npm and Vue CLI 3. Everything has been working fine until there was a new merge and build, which caused the error t[e] is undefined to show up. I removed minification and saw that the error was module[moduleId] is undefined on page load. Everything runs fine locally, and everything had been running fine deployed prior to this.
There was a Vuetify plugin update that has since been reverted without change. I've also had this issue with the D3 library (which is currently in use), but I'm wondering if the issue is just that the building is no longer working in the pipeline, or if everything needs to be rebuilt from scratch or a cache needs to be cleared (I'm not a DevOps guy).
Anyone have any insight for an app suddenly breaking like this?
EDIT: Seems to be related to the d3 library. Any reason why it would work locally but not when deployed? And with no errors on building?