How I resolve SyntaxError: expected expression, got '<'

[motss]

Description

Have been dealing with the evil SyntaxError: expected expression, got '<' on Firefox in the last couple of days and had totally no idea what had been gone wrong. Everything worked fine and great on Chrome 55, Opera 41, Safari 10 but not FF 50+.

***Update: This error SyntaxError: expected expression, got '<' is most likely to happen when Service Workers is enabled and working fine on the browser. Since Service Worker in SPA will re-route basically anything that is not found to /index.html (according to default configuration) and so it does the same for .js. That's why when app-indexeddb-mirror is looking for its .js files Service Worker couldn't find it and just routed it to /index.html which then caused SyntaxError. In order to resolve that, we have to deliberately tell Service Worker to cache all the .js files within app-indexeddb-mirror like the following:

// sw-precache-config.js

module.exports = {
  staticFileGlobs: [
    '/index.html',
    '/manifest.json',
    '/bower_components/webcomponentsjs/webcomponents-lite.min.js',
    '/bower_components/app-storage/app-indexeddb-mirror/app-indexeddb-mirror-worker.js', // Ask sw to cache `app-indexeddb-mirror`'s .js files
    '/bower_components/app-storage/app-indexeddb-mirror/common-worker-scope.js' // Ask sw to cache `app-indexeddb-mirror`'s .js files
  ],
  navigateFallback: '/index.html',
  navigateFallbackWhitelist: [ /^\/[^\_]+\/?/ ] // Firebase Auth's exception route.
};

***Additional step for Firefox: Head over to about:debugging#workers in Firefox and unregister all service workers. Clear your offline storage in FF. Do a page refresh and boom!!! Everything works as expected without throwing SyntaxError anymore. Hope this will help those struggling with the evil SyntaxError. 😄

Expected outcome

app-indexeddb-mirror caches all JSONs from Firebase for offline use on all modern browsers.

Actual outcome

FF50+ suffers from SyntaxError: expected expression, got '<'.

Live Demo

N/A

Steps to reproduce

Browsers Affected

• Chrome 55+
• Firefox 50+
• Safari 10+
• Edge 14+
• IE 11

[chwzr]

have the same issue on chrome 61 for android (but not on desktop)!

[ky213]

same problem happened to me, but worked fine on a localhost server

[ky213]

are using service workers ?
if you are using service workers just update the filenames to be cached after you make a build, it should work fine after deployment, because it did for me.

[arockia-probytes]

are using service workers ?
if you are using service workers just update the filenames to be cached after you make a build, it should work fine after deployment, because it did for me.

**I got same error in my React project. It fixed while I put my external jQuery files and CSS files to puplic folder and Images in src folder

include script in public/index.html like below and put jquery-1.12.4.min.js file inside puplic/assets/etc,

<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>**