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.
Related
I am making a MERN e-commerce project with redux.
I have hosted my backend in Heroku and my frontend is hosted in vercel .
everything running fine from localhost but when I open hosted site
then it shows "o.map is not a function" on console
Here is my project github link-
Frontend- https://github.com/arijitdas13105/Ashop-frontend-new
Backend- https://github.com/arijitdas13105/ashop-backend
My hosted website link - https://ashop-frontend-99x2ayoh7-arijitdas13105.vercel.app/products
My backend Product API - https://ashop-server.herokuapp.com/api/products
let me know anything else need.
When you host in vercel, your JS code is minified with react-scripts build (You can see it in your package.json). This o.map is other variable in your code, probably the products.map. You can solve this issue using products?.map instead, so it will try to render the elements only when it has content.
If the data is not load and you don't know why, I recommend you to run it with npm run dev and figure out the reason (you can use debugger or console.log).
You can see the Network Tab in your devtools to see what the backend is returning as well.
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
Edit: It works on iOS, the problem is therefore limited to Android.
I just found out, that in my Meteor production app, Hot Code Push is broken. I don't know when it started to occur, but here are the facts (in no particular order):
When I upload new binaries to Google Play/iOS App Store a new version is downloaded by all devices
When I update the server only, the Android App does not update, even when manually forcing a window.location.reload() in the app.
After the server update, in the browser the app reloads as it should be (to the new version)
https://myapp.com/__cordova/manifest.json is served as it should be
I am using mup 1.3.5 on the server
In development mode (on localhost) Hot Code Push works perfectly
When using git checkout on an older commit and building the app locally via meteor run android-device --mobile-server https://myapp.com I can see the following console output:
Download failure
com.meteor.webapp.WebAppException: Error downloading asset manifest
at com.meteor.webapp.AssetBundleManager$1.onFailure(AssetBundleManager.java:97)
at okhttp3.RealCall$AsyncCall.execute(RealCall.java:140)
at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
at java.lang.Thread.run(Thread.java:818)
Caused by: java.net.ProtocolException: Expected ':status' header not present
at okhttp3.internal.http.Http2xStream.readHttp2HeadersList(Http2xStream.java:266)
at okhttp3.internal.http.Http2xStream.readResponseHeaders(Http2xStream.java:149)
at okhttp3.internal.http.HttpEngine.readNetworkResponse(HttpEngine.java:723)
at okhttp3.internal.http.HttpEngine.access$200(HttpEngine.java:81)
at okhttp3.internal.http.HttpEngine$NetworkInterceptorChain.proceed(HttpEngine.java:708)
at okhttp3.internal.http.HttpEngine.readResponse(HttpEngine.java:563)
at okhttp3.RealCall.getResponse(RealCall.java:241)
at okhttp3.RealCall$ApplicationInterceptorChain.proceed(RealCall.java:198)
at okhttp3.RealCall.getResponseWithInterceptorChain(RealCall.java:160)
at okhttp3.RealCall.access$100(RealCall.java:30)
at okhttp3.RealCall$AsyncCall.execute(RealCall.java:127)
... 4 more
Download failure
com.meteor.webapp.WebAppException: Error downloading asset manifest
at com.meteor.webapp.AssetBundleManager$1.onFailure(AssetBundleManager.java:97)
at okhttp3.RealCall$AsyncCall.execute(RealCall.java:140)
at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
at java.lang.Thread.run(Thread.java:818)
Caused by: java.net.ProtocolException: Expected ':status' header not present
at okhttp3.internal.http.Http2xStream.readHttp2HeadersList(Http2xStream.java:266)
at okhttp3.internal.http.Http2xStream.readResponseHeaders(Http2xStream.java:149)
at okhttp3.internal.http.HttpEngine.readNetworkResponse(HttpEngine.java:723)
at okhttp3.internal.http.HttpEngine.access$200(HttpEngine.java:81)
at okhttp3.internal.http.HttpEngine$NetworkInterceptorChain.proceed(HttpEngine.java:708)
at okhttp3.internal.http.HttpEngine.readResponse(HttpEngine.java:563)
at okhttp3.RealCall.getResponse(RealCall.java:241)
at okhttp3.RealCall$ApplicationInterceptorChain.proceed(RealCall.java:198)
at okhttp3.RealCall.getResponseWithInterceptorChain(RealCall.java:160)
at okhttp3.RealCall.access$100(RealCall.java:30)
at okhttp3.RealCall$AsyncCall.execute(RealCall.java:127)
... 4 more
"Error: Error downloading asset manifest", source: http://localhost:12128/packages/webapp.js?hash=e448c6ebb2384292f7c97e676471a51951a04169 (71)
This suggests that some kind of :status header is missing for the asset manifest. How can I fix this?
I had this exact same problem with the same console error logs. Using Meteor 1.6.1 and mup 1.4.3. In the end I fixed it by upgrading the cordova-plugin-meteor-webapp with:
meteor add cordova:cordova-plugin-meteor-webapp#1.6.0
and then redeploying. Then hot code push worked on Android!
Edit: To give more background - I think the problem is caused by a problem with okhttp and HTTP/2 on certain version of nginx. See this question. The updated cordova-plugin-meteor-webapp plugin uses a newer version of okhttp.
I'm trying to create a website in Angular 4. It is a base of my personal study.
My website is up and running but I'm trying to improve it. I checked and apparently my website is not SEO Friendly. I make some changes and I discovered this sample https://oliverveits.wordpress.com/2017/07/05/server-side-rendering-in-angular-4-with-universal/ That show an Angular 4 app with Page Source code.
I make the changes, I started to use Webpack and other features sugared by in the link. When I run the command "npm run start" and I access http://localhost:8000 I can see the Page Source. But when I copy the dist to my server on Godaddy domain I can't.
I'm not sure about what I have to do. If I need put my website in a node.js server or if I'm not compiling it correctly to have what I'm expecting.
I'm open to different approachs.
Well, I found the what causes this issue.
I think many of new Angular devs possible have the same problem.
When you run "npm start" or "ng s" what are you doing is put the node to listen a specific port. In other words, you are running a node server.
In another approach, copy the files to an IIS server or Apache Server. This doesn't make the Node Server run. In this scenario, the pages are download to the client browser and run as HTML/javascript page. And because of this when I try to see the Page source I saw the Angular files.
Took me a while to understand it. My background is .Net development.
Now a day my website is running in one of the many node.js servers. evennode.com, on this server instead of to have an IIS or Apache, they set up a Node Server to listing a specific port and then you are able to run all your development on the server side.
I found easier use a node js server like evennode them set tup node js run on my Goddady account.
I am just getting started with Ember.js at v2.9.0, followed the tutorial on their page https://guides.emberjs.com/v2.9.0/tutorial/ember-cli/, all good, save for one detail: Whenever I tried to refresh or load the development web app on Chrome browser after executing ember server on the cmd, the app would not load in browser and provide the following error most of the time (there were other errors as well but seem to be related to this one):
GET http://localhost:4200/assets/vendor.js net::ERR_INVALID_CHUNKED_ENCODING
, and one of the related errors is:
Uncaught ReferenceError: define is not defined
at application.js:1
I have searched for this specific error but without luck, I tried some fix hints found, such as clearing some persistent data with the netsh command, doing an npm cache clean bower cache clean, deleting the node_modules and the bower_components folders and reinstalling dependencies; also ensuring that there was no weird proxy configuration in my LAN settings, etc.
I have encountered this error while following the tutorial, and it would kind of be bypassed by refreshing the browser a few times until the app displayed. That was before, but now the refresh does not work when working on an existing application.
I am on:
Windows 10
ember-cli v.2.9.1
node.js LTS v.6.9.1
I need to get going with this rather soon, so any hint to resolve this issue is appreaciated. Thanks!
Might be a conflicting process running... Are you working over a VPN? If so, take a look at https://superuser.com/questions/893908/err-invalid-chunked-encoding-from-chrome