How to create Web Worker in a SvelteKit app on Vercel? - javascript

I've created a SvelteKit webapp that works great on my desktop in my local environment. I launch the browser/webserver with:
npm run dev -- --open
Now I've just deployed to Vercel. Everything works great, except the JavaScript command I use to launch my Web Worker gives a 404 error in the browser console:
new Worker('./lib/game/runs_thread.js')
Sure enough, if I copy /lib/game/runs_thread.js into my browser after my domain name, I get a 404 error. Where is my runs_thread.js and how can I launch my Worker?

I think what you need to do is replace
new Worker('./lib/game/runs_thread.js')
with
import workerURL from './lib/game/runs_thread.js?url';
//...
new Worker(workerURL)

Alternatively,
import MyWorker from "./path/to/worker.js?worker"
new MyWorker()
From vite's documentation

Related

Weird CORS errors on fresh vue cli project

I just started building my second Vue project, and for the first time I wanted to use the Vue CLI and NPM rather than just loading Vue via CDN.
Installing the CLI and setting up the project worked without problems, but when I ran "npm run serve" and navigated to localhost:8080 in my browser (latest Firefox) to see if it worked, I got the following error message in my browser console multiple times:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://10.126.86.51:8080/sockjs-node/info?t=1584021154635. (Reason: CORS request did not succeed).
I also get this error message once right after loading the page:
[WDS] Disconnected!
Does anyone know what these errors mean, why I get them and how I can get rid of them?
The first one seems to be related to some kind of cross-origin call that the app is making using the host's actual IP rather than localhost, but I can't think of any reason why it would, given that I literally just installed and served the example project and did not change anything after running "vue create"
Edit: I am on Ubuntu 19.10 Desktop
First of all, what kind of OS you are working on? If you are working on unix based systems, a service (like nginx) could produce this error. If so, try stopping it.
Afterwards I would try to run your application from vue ui.
Type in your terminal:
vue ui
This starts the web based graphical user interface of vue cli. You can handle your app development from there by starting your service and run your build command.
ATTENTION: you must add (import, NOT create) your project (root folder) to the UI.
If you get the same error inside your browser console, set up a vagrant box. First steps are explained here:
https://www.vagrantup.com/intro/getting-started/
Follow instructions for project setup.
Simplest way would be running
vagrant init
inside your project folder. Therefore you don't have to setup a new project.
After running the init command, try running
npm run serve
or use vue UI instead (as explained above), if you prefer it.
If the problem still exists, more infos about your OS would be helpful.

Web Worker not working after deployment but woking in local

I am using z bar processor for barcode reading .I have used web worker to use path of zbar-processor.js.
var worker = new Worker('scripts/directives/zbar-processor.js');
The above code is working fine when running on localhost but gives 404 file not found when i deploy build using grunt clean build.

Getting a 404 error when trying to setup WebStorm IDE JavaScript debugger for a create-react-app

When following an article entitled, "Debugging React apps created with Create React App in WebStorm", the Debugger says it's connected to the JetBrains IDE Chrome Extension, but I can't get breakpoints to execute when using port 3000 and when I try to use the default debug port 63342 a 404 error is shown.
Here is a recording of my settings in Chrome and Webstorm 2016.2 IDE when trying to debug: http://recordit.co/MQ3LICuUIc
Steps Taken:
I've created a new JS debug configuration with the name 'ERS React Debug', the browser set to Chrome, and I've tried using the following URLs in the configuration:
http://localhost:3000/
http://localhost:3000/ers_react/public/index.html
http://localhost:63342/ers_react/public/index.html
(YT video I watched used the debug port, which is what is in my recording)
I also setup the mapping to webpack:///src as recommend in the article.
Default ReactJS app created with create-react-app is designed to be hosted on webpack server started with react-scripts start, that builds the application and starts the server. You won't be able to open this application on the simple built-in webserver (localhost:63342).
To be able to debug modern React app, you need upgrading Webstorm to the most recent version - debugging will work out of the box. Fot Webstorm 2016.2, you can try specifying URL mappings... For "react-scripts": "1.0.17", it should be http://localhost:3000/static/js/full/path to project, like http://localhost:3000/static/js/C:/WebstormProjects/untitled if the project path is C:/WebstormProjects/untitled should work:
Note that you would need to refresh the browser page to get breakpoints in code executed on pagfe loading hit

How to deploy Selenium-python on Heroku

So I'm trying to deploy on heroku my app that uses node.js and python. it works on my computer but when i try to run it on heroku i get an error:
from selenium import webdriver
ImportError: no module named selenium
I have added Chrome, chromedriver, and selenium as buildpacks and in my Procfile i even have:
worker: pip install selenium
worker: python scraper.py
I am current just trying to get my python to work as i have already confirmed my javascript works.
The best way i found after along search over the internet, is using PhantomJs() web driver from selenium
from selenium import webdriver
driver = webdriver.PhantomJS()
#your code here
driver.quit()
and then use this buildpackge https://github.com/stomita/heroku-buildpack-phantomjs
$ heroku create --stack cedar --buildpack https://github.com/stomita/heroku-buildpack-phantomjs.git
# or if your app is already created:
$ heroku buildpacks:add https://github.com/stomita/heroku-buildpack-phantomjs
$ git push heroku master
and it shall work for you :)
module dependencies don't go in the procfile, they go in the requirement.txt file on the root of your project.
When you deploy on Heroku, you should see the log of the modules that were installed.
Also, you probably don't want to use Chromedriver unless you're running Chrome Headless on Heroku, because Heroku cannot open a browser on the server: it has no graphic interface.
You might want to use something like PhantomJS or Chrome Headless to make this work.

Yeoman angularjs-cordova app - what is next?

I created the app according to this article: https://www.npmjs.com/package/generator-angularjs-cordova with yeoman and angularjs-cordova generator.
At creation app time, I was prompted to choose plugins that I want to use in my app.
I added next cordova plugins:
cordova.device, cordova.camera and cordova.vibration.
I run the app in browser with "grunt serve" command and it works!
Now, how can I get the device data?
I tried to check the device global object in app\js\application.js but it's undefined...
EDIT:
In firebug console I get the next errors:
"NetworkError: 404 Not Found - http://127.0.0.1:9000/cordova.js"
"ReferenceError: jQuery is not defined"
Why those modules were not connected automatically?
Where do I need to place the connection to the modules?
The answer is simple!
Device is not exists on the web browser.
When I run it on the android smartphone - everything is OK.
* Remember to copy all files from the app folder to the www folder!

Categories