CODEWITHSUNDEEP
node.jsangularapachegoogle-chromeangular6
Danchat
Danchat

Reputation: 156

Error Loading Chunk and Unexpected Token '<' on Google Chrome

I am running an Angular 6 application with Node.js as a backend. I am experiencing an odd error that only occurs in Google Chrome: 

Uncaught SyntaxError: Unexpected Token '<'
Error: Uncaught (in promise): Error: Loading chunk # failed.

At seemingly random points in my application for only some of my users, this error appears (and each user has a different chunk number that appears, a chunk between 1 to 18). Some users can log in to my application then run into a "chunk 12 failed" code, and others can't log in and run into a "chunk 16 failed" code. This would happen whenever a new route would be attempted to be opened (what I mean is going from www.website.com/dashboard to www.website.com/forms).

I have attempted to clear cookies from Chrome's cache, but that did not get rid of the error. My application does not get this error when running on Internet Explorer or Firefox, so it's apparently a Chrome-only bug. I also read on another Stack Overflow issue that the issue might be related to a dependency called Webpack, so I tried updating that and a bunch of other modules, but the error still occurs.

One user discovered that this bug can be bypassed by simply opening the route in a new tab. I can't figure out why that would solve the problem, but changing routes from the same tab would not work. Any help would be appreciated!

Upvotes: 2

Views: 2767

Answers (1)

Danchat
Danchat

Reputation: 156

Found a solution on this - the issue was triggered by old caches from users' sessions that were open while updates were being pushed. This caused random issues to components that were edited in the updates. The solution was to target the error in a global error catcher and do a hard refresh, which forces the update to happen and thus eliminates the chunk error.

export class ErrorNotificationService implements ErrorHandler {


handleError(error: any) {
 const chunkFailedMessage = /Loading chunk [\d]+ failed/;

 if (chunkFailedMessage.test(error.message)) {
   alert("This is an outdated version of this webpage. This page will now be 
refreshed.")
   window.location.reload();
 }
}

And import it into the parent component as a provider:

providers: [
   { provide: ErrorHandler, useClass: ErrorNotificationService },
],

I also found a couple alternative ways to do this that avoids having the user to get their webpage refreshed. See here Auto reload for clients after deploy in Angular 7

Upvotes: 3

Related Questions