ERR_INVALID_REDIRECT when running PWA server - javascript

I've recently been looking into building a PWA, using angular 6 and Node.js, and have been following the tutorial found here
. I have followed the steps up until the lighthouse portion and upon calling http-server I received a ERR_INVALID_REDIRECT when opening the server. Upon further inspection it appears that I am receiving an unexpected token error. This has led me to believe that there is an encapsulation issue in the program but I have been unable to find anything on the issue. Specifically, I believe the browser is interpreting some JS as HTML but I've had little luck finding where it is occurring. Has anyone encountered a similar issue before? Thank you in advance.
I am able to serve the page up by using the command ng serve --open.
Looking in the developers tool it appears that it request is stalling.
Changing the Authentication in the ISS manager resulted in the same issue.
References:
Unexpected token < in first line of HTML
https://github.com/typeorm/typeorm/issues/3629
Final Project:
https://github.com/techiediaries/angular-pwa

Try to access to index.html directly, it might be related to https://github.com/indexzero/http-server/issues/525

Faced the same issue as well opening a PWA on localhost. As suggested by #ssh-uunen , i tried opening the url by appending index.html at the end and it opened eg: http://127.0.0.1:8080/index.html.
The issue was due to http-server version (https://github.com/http-party/http-server/issues/525).
Try to upgrade/downgrade http-server version in your project.
1.npm uninstall http-server
2.npm install http-server#0.12.0

Related

SyntaxError: Unexpected token in JSON at position 0 in meteor

I am getting an error when running meteor.js. This is the following error:
PS C:\Users\ketan\Documents\Meteor> meteor run
C:\Users\ketan\AppData\Local\.meteor\packages\meteor-tool\2.1.1\mt-os.windows.x86_64\dev_bundle\lib\node_modules\meteor-promise\promise_server.js:218
throw error;
^
SyntaxError: Unexpected token in JSON at position 0
at JSON.parse (<anonymous>)
at ProjectContext._readResolverResultCache (C:\tools\project-context.js:605:16)
at ProjectContext.reset (C:\tools\project-context.js:245:10)
at new ProjectContext (C:\tools\project-context.js:60:8)
at Command.doRunCommand [as func] (C:\tools\cli\commands.js:356:24)
at C:\tools\cli\main.js:1528:15
I can't understand the error. Please tell me the solution for this.
Note: My laptop shut down in the previous session of the meteor.
The Solution
How I ultimately ended up fixing this was just by re-cloning the repository I was working on from GitHub - after this, my application ran fine.
NOTE: I've edited this answer because I originally thought Jankaput's answer worked for me, but after digging a little further I found that it didn't.
More Info
I ran into the same problem after a shutdown while a previous Meteor process was running.
For me, running meteor reset and re-installing node_modules seemed to prevent the mentioned error from happening, but when I ran the application, I noticed odd behavior from several different sections of the application (i.e. certain packages wouldn't work, some methods that normally run fine on startup threw errors, etc.)
This makes me think that some sort of project setting was corrupted due to the meteor server I was running ending abnormally when I force shut down my computer. I'm not sure why whatever setting was corrupted managed to stay that way across a meteor reset (since meteor --help specifies that it 'Resets the project state'), but the fact that a re-cloning work makes me think that it did.
Due to the fact that it seems like running meteor reset could allow some corrupted project settings to fly under the radar after this issue pops up, I personally feel that it's probably just best to re-clone your project if this happens to you, just to be sure that nothing about the project is corrupted.
This appears to me that you have a syntax error in a JSON file that is being read by the Meteor build tool. Do you have a settings.json file in use in your project? If so, check for trailing commas or keys missing double quotes as these are the most common errors introduced to a JSON file.

Crbug/1173575, non-JS module files deprecated. chromewebdata/(index)꞉5305:9:5551

I just created a new project and have run it for the first time using F5 or Ctrl + F5. The result in Chrome is:
The site can't be reached
err_connection_refused
I checked the option at the breakpoints for "Exceptions caught" and the following error is displayed.
Without "Exceptions caught" checked, the next error raised:
I tried to run "ng s -o" from the terminal and all work fine. The site is working well on port 4200, but I like to debug.
Here is my launch.json file, all by default:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
Why is this happening?
I also had this issue and none of the solutions listed were helpful.
However, the problem was rather easy to solve.
Just go into the Network tab of the Chrome Developer Console. Be sure that the connection is on No throttling and not Offline.
This misleading error message seemingly has nothing to do with Chrome or any deprecated functionality. It can have many root causes and seems to occur whenever connectivity can't be established.
I got this while following the React tutorial for Visual Studio Code. In that tutorial you start by creating a template with npx and then running it with npm start. That worked, and I could see that it was using http://localhost:3000 for the URL in the browser.
However, when I changed the code as the tutorial requested and set a breakpoint to debug, I got the error in the OP's post, both with Chrome and with Edge.
Visual Studio Code was creating a default launch.json file for debugging and populating it like this:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
And I needed to manually change the 8080 to 3000 which fixed the problem.
The key for me was configuring the breakpoint to catch the exception like the OP described (note - you can only configure that with the Debug icon selected in the far left icon menu). While the emitted error message is still the misleading "deprecated" one, there was a message that "the site can't be reached" which you can find if you dig a little - as shown here:
I imagine that practically any configuration issue that causes the connection to fail will cause this error. So firewall issues, missing host program, bad configuration (like mine), etc.
I had the same issue and the problem was with the URL. It was https://localhost:8000; in place of http://localhost:8000.
So try checking your URL and routes.
My server was just not running locally. :) Starting localhost solved it.
For me, the issue was a React/Next.js application was not running.
Basically, you have to keep the application running in a separate window/terminal to be able to attach the debugger. This is unlike the other application where it starts from debug console itself.
In my case, it got resolved by closing the browser and recompiling the app.
Instead of launching your application using the option "Launch Chrome against localhost", rather set your application name for launching - Resolved.
See the attached image for more context.
I had this same error and I resolved it by turning off my plugins. Specifically a CORS plugin I have been using.
Try this:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"request": "launch",
"name": "Launch Chrome against localhost",
"type": "dart"
}
]
}
I've tried many of the solutions suggested, and found someplace else this tip that was helpful:
I was unable to reach http://localhost:3000 from npm start run in a react app. So I tried: http://127.0.0.1:3000 and to my surprise it worked!
After some googling, I tried a suggestion to erase my browser cache, so I did it. All cached images and files (Google Chrome) and boom! It worked once again.
I have seen a lot of solutions for this problem, but nothing worked.
After a little debugging and commenting out many parts of the code, I managed to locate the issue.
Basically, it occurs on the backend; not the frontend.
There was an infinite loop that kept responses stuck. Fixing that issue, solved it for me.
I think we should just remove the cookies in that URL:
I displayed a similar message in my debug console and the problem was that the local web server was turned off and therefore unreachable.
I turned on the server in the virtual machine and the app started working again :-)
In my case, I had a Blazor solution and began receiving the "Crbug/1173575, non-JS module files deprecated message". Besides this, I also received a 404 error for the Index.html file!
The cause was that I inadvertently removed the reference in the .Server project to the .Client project. The project compiled fine without the reference, but I guess ASP.NET Core does some sort of reflection-based analysis on the dependencies to dynamically build the route map.
Restoring the reference to the .Client project on the .Server project fixed the problem.
In my case, the problem was because port 4200 was taken by another application (Docker). As soon as I changed the port to 4201 by adding the next structure in the serve section of angular.json file the problem was solved.
"options": {
"port": 4201
}
This may be of use to someone working on a project that communicates across iframes, I found this warning within a current web application: Crbug/1173575, non-JS module files deprecated.
In my case, the reason was that the resource iframe origin wasn't being served meaning the Iframe request URL was not accessible. When serving the resource the warning disappeared.
I had the error crbug/1173575, non-JS module files deprecated with some PDF files displayed in an iframe.
It was because they had a comma (",") in the filename. After renaming the file, everything was OK.
My problem was in the network settings of my Windows 10 computer, not on the browser. I have tried my URL in another computer and mobile browsers, and it was working fine.
So, I have fixed the issue by resetting my network settings
To do that, go to Settings → Network and Internet → Scroll down to Network reset.
Wait for 5 minute until it restarts.
I faced this issue while debugging in Visual Studio Code for an Angular application.
The probable causes may be the server is not up and listening to port. You may start the server manually by ng serve --port with port number. Also compare the URL in launch.json and compare the port number.
In my case it was caused by uBlock Origin. Disabling it on the website promptly fixed the error.
I was adding links to Amazon Affiliate while all of a sudden I faced this error.
To solve it, just stop your adblocker.
To add another angle to this. I named my JavaScript modules with .mjs. After setting my web server to serve mjs with MIME type application/javascript. I got the error
'crbug/1173575, non-JS module files deprecated.'
None of the answers here helped. To fix it I gave a path to the module.
From
<script type="module" src="xxx.mjs"></script>
To
<script type="module" src="./xxx.mjs"></script>
And the error went away.
I ran into this error on three separate Next.js projects. It was the same error in Chrome, Chrome Incognito, Firefox, and Edge.
It happened on a production build (next build && next start) and development server (next dev). After trying a number of fixes – ensuring I was on HTTP, not HTTPS, checking if the port was in use, deleting folder node_modules and running npm install, etc. – the thing that finally worked was restarting my computer...
For aiohttp.
I've stumbled upon this issue with an aiohttp server.
By default it was running on 0.0.0.0:8000 The solution was to change the host and the port to localhost:8080 in main.py file:
web.run_app(app, host='localhost', port=8080)
I had a similar issue. However, I discovered a different solution. It's still worth checking the steps in the GitHub link from the OP’s solution.
The project I was working on was made in an older version, and the launch.json URL had // delimiters. Replacing these with no delimiters resolved the issue.
from
"url":"file:///C://exampleParent//exampleChild//file.txt"
to
"url":"file:///c:/exampleParent/exampleChild/file.txt"
When I try and follow the steps described on Chrome Debugging with Angular CLI, I get a message that the library is no longer supported and a link to this article:
Request’s Past, Present and Future #3142
I had encountered the same problem in Visual Studio Code when I tried to debug a Python file. I resolved it by deleting the previous launch.json file and create a new one for this file.
I had a similar encounter in a JavaScript project. But I hadn’t learned JSON, but I just deleted the last three commands in
the JSON file that is removed the names "url" and "webroot".
I had the same issue with an app that needed to run navigator.geolocation.getCurrentPosition in my React application which of course needs HTTPS.
// .env.local HTTPS is set to true
HTTPS=true
The problem - I was loading the page with HTTP and not HTTPS.
Error Screenshot
Checking point (if you are working with a folder/file)
Check the folder/file name
Remove special characters (the folder/file name does not allow special characters)
Debug you code carefully (Java catch exception can't catch those errors)

Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'

I am developing a mobile app with using react-native on WebStorm and trying to test it via an Android emulator(Pixel API 28) which I created via using AVD Manager of Android Studio. The problem is when I run the react-native run-android command, I get the following error:
Could not determine the dependencies of task ':app:preDebugBuild'.
> Could not resolve all task dependencies for configuration
':app:debugRuntimeClasspath'.
> Could not resolve com.facebook.react:react-native:+.
Required by:
project :app
> Failed to list versions for com.facebook.react:react-native.
> Unable to load Maven meta-data from
https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml.
> Could not HEAD
'https://jcenter.bintray.com/com/facebook/react/react-native/maven-metadata.xml'.
> Connect to jcenter.bintray.com:443 [jcenter.bintray.com/35.158.228.205, jcenter.bintray.com/3.120.47.203] failed: Read timed out
I tried to clean up the cache with using the command below but it did not worked:
npm cache clean --force
I could not find some similar problems on the web and I am not sure what to show related with this problem.
When I try to run one of my previous project which was perfectly running, after getting this error and I saw that it also throws the same error. Similarly, when I create a new react-native project and try to run it, then I also got the same error. How can I solve this?
I am still loking for a solution. Anyone knows how to solve it?
I finally figured out the problem. I was connecting to internet via my school's network and it was restricting some downloads. So, that is why I got this error. For the ones who encountered with the same error, try to connect to the link in the error to if it is forbidden or not.

Error: GET http://localhost:4200/assets/vendor.js net::ERR_INVALID_CHUNKED_ENCODING, on Ember.js server

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

kurento's remote stream is not working

I installed kurento-media-server-6.0 and I turn on media-server and Hello World!(Tutorial 1, Version - node.js). But when I click a start button, Remote stream does not work.
Console >>> TypeError: videoStream.addEventListener is not a function
Please give help to me, who knows why this error happens.
You are missing the appropriate js dependencies at the browser side. This should be fixed executing 'bower install' in the root folder of the tutorial (as specified in the corresponding tutorial documentation), in case of a fresh installation; or executing 'bower update' in case you had the tutorial installed previously.
In addition, double check that tht tutorial is in the appropriate version (6.0.0 tag). Sometimes mixing 5.x client code with 6.x media server generates that type of problems with dependencies.

Categories