Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 of 5 tasks
motss opened this issue Dec 12, 2016 · 4 comments
Open
1 of 5 tasks

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

motss opened this issue Dec 12, 2016 · 4 comments

Comments

@motss
Copy link
Contributor

motss commented Dec 12, 2016

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
Copy link

chwzr commented Sep 12, 2017

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

@ky213
Copy link

ky213 commented Aug 2, 2018

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

@ky213
Copy link

ky213 commented Aug 2, 2018

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
Copy link

arockia-probytes commented Sep 27, 2019

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>**

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants