Vue - build shows infinite loading tab - vue.js

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

Related

Debug and Hot Reload not working with NativeScript in VS Code

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.

React Native project not opening Metro Bundler in Browser

App is working fine. Also working fine on Emulator and my mobile phone. But the problem is that it is not showing this page on my browser. Open Image
I created this project in react native, Using following commands.
expo init DoneWithIt
choses a Manage workflow with blank template
When I type "npm start" in terminal (using VS code terminal)
it shows Open Image
It is not opening in browser like this
Open Image
Have you tried opening your browser manually at localhost and port 19000? Or simply press "w" in the same terminal after it starts so it opens for you the browser as you can see in the second image.
The Web UI is now deprecated in favor of a more advance terminal interface: https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206
To me the "w" option is grey out but I can still run it and it will let me know that some dependencies are missing. I try to install them but it doesn't succeed. I guess just made sure that the Web UI will not work anymore.
You will see the below error if the 'w' option is grayed out or if the 'w' doesn't work,
It looks like you're trying to use web support but don't have the required dependencies installed.
Please install react-native-web#~0.18.9, react-dom#18.1.0, #expo/webpack-config#^0.17.2 by running:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2
If you're not using the web, please ensure you remove the "web" string from the platform's array in the project Expo config.
install the mentioned packages and re-start the app(npm start).
Enter w, this should work.
The reason why the application is not giving you the web browser ability is because you're missing some packages. Thus far this is the version that's support out there. Try and run this code below:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2

NPM Run Start / Local Host is not loading and making my computer very slow

I am developing a react app, when I run npm run start it will not respond in the browser. (this only started happening last night, and only with this specific app. All my other projects work fine)
In windows terminal it shows a successful compile with no errors, but the localhost:3000 browser (after loading for 5 mins) shows an alert window, and it makes my computer very slow.
I uninstalled react-spring, which was the latest dependency I had installed, but it made no difference.
Any ideas or any additional info I should provide?
package.json

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 :(

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.