Can't find source of: `uncaught syntaxerror` (only occurs in cypress)

Question

Looking for suggestions on how to pinpoint the actual source of the invalid/unexpected token.

I'm running tests with cypress, and most of the time (though not consistently), I'm getting this error from all my tests.

Uncaught SyntaxError: Invalid or unexpected token

This error originated from your application code, not from Cypress.

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the 'uncaught:exception' event.

https://on.cypress.io/uncaught-exception-from-application

So let's be clear; I do understand that it's an issue with my application code, rather than my test code. My issue is that I have yet to see anything pointing to an actual location of the syntax error . Furthermore, I run the app in chrome 72 (not through cypress) and I have no issue . There only seems to be an issue when I run the app through cypress ( also using chrome 72 because I'm using --browser chrome when i run the cypress specs).

I've added fail , and uncaught:exception handlers to my tests to catch the output, though I still can't find anything to direct me to where the actual source of the error is.

by breaking in the uncaught:exception handler, there are two args passed, 1) the error (same as above); 2) the mocha(i think) runnable:

Hook {title: ""before all" hook", fn: ƒ, body: "function () {↵    var _this = this;↵↵    debugger;…   cy.visit("/#/account-management");↵    });↵  }", async: 0, sync: true, …}

    $events: {error: Array(1)}
    async: 0
    body: "function () {↵    var _this = this;↵↵    debugger;↵    cy.on('fail', event_handler_functions_1.failHandler.bind(this));↵    cy.on('uncaught:exception', function (e, r) {↵      console.log(e, r);↵      debugger;↵    });↵    cy.fixture(Cypress.env("environmentSettings")).then(function (fixture) {↵      _this.environmentData = environmentData = fixture;↵      cy.launchApp(environmentData.baseUrl, environmentData.username, environmentData.password↵      /*, 300000*/↵      );↵      cy.visit("/#/account-management");↵    });↵  }"
    callback: ƒ done(err)
    ctx: Context {currentTest: Test, _runnable: Hook, test: Hook, environmentData: {…}}
    fn: ƒ ()
    hookId: "h1"
    hookName: "before all"
    id: "r3"
    parent: Suite {title: "Account Management", ctx: Context, suites: Array(0), tests: Array(3), pending: false, …}
    pending: false
    sync: true
    timedOut: false
    timer: null
    title: ""before all" hook"
    type: "hook"
    _currentRetry: 0
    _enableTimeouts: false
    _retries: -1
    _slow: 75
    _timeout: 4000
    _trace: Error: done() called multiple times at Hook.Runnable (https://localhost:44399/__cypress/runner/cypress_runner.js:30161:17) at new Hook (https://localhost:44399/__cypress/runner/cypress_runner.js:26593:12) at Suite.beforeAll (https://localhost:44399/__cypress/runner/cypress_runner.js:31573:14) at before (https://localhost:44399/__cypress/runner/cypress_runner.js:26770:17) at context.describe.context.context (https://localhost:44399/__cypress/runner/cypress_runner.js:26666:10)
    __proto__: Runnable

---

I've stepped through before() in my test, with "Pause on Exceptions" enabled in the chrome debugger. Nothing errors until after I've stepped through everything in before() and have to then "Resume script execution". Note, I don't have a beforeAll() hook in my test, just a before() .

I haven't made an recent changes which use unusual syntax (so far as I can tell), and I haven't ran the test suite in my local environment for a few weeks, so there are many changes - too many for me to feel like sifting through them one by one would be worthwhile.

---

here's the test from that error instance for reference, though they're all having the same issue.

import { failHandler } from "..\\..\\support\\event-handler-functions"
describe('Account Management', function () {
    var environmentData: CypressTypings.EnvrionmentSettings;

    before(function () {
        debugger;
        cy.on('fail', failHandler.bind(this))
        cy.on('uncaught:exception', (e, r) => {console.log(e, r); debugger;})
        cy.fixture(Cypress.env("environmentSettings")).then((fixture) => {
            (<any>this).environmentData = environmentData = fixture

            cy.launchApp(environmentData.baseUrl, environmentData.username, environmentData.password/*, 300000*/);
            cy.visit("/#/account-management");
        });
    })

    beforeEach(() => {
        Cypress.Cookies.preserveOnce(environmentData.cookieName)
    })

    it('Loads Governments', function () {
        cy.get("[data-cy=government-panel]", { timeout: 20000 }).should("have.length.gte", 1);
    })

    it('Users Page Loads', function () {
        cy.get("[data-cy=government-panel]").first().find(".fa-users").click();
        cy.get("tbody", { timeout: 20000 }).find("tr").should("have.have.length.greaterThan", 0);
        cy.get("[data-cy=return-to-organization-button]").click();
        cy.get("[data-cy=government-panel]").should("exist");
    })
    it('Service Area Page Loads', function () {
        cy.get("[data-cy=government-panel]").first().find(".fa-globe").click();
        cy.get("tbody", { timeout: 20000 }).find("tr").should("have.have.length.greaterThan", 0);
        cy.get("[data-cy=return-to-organization-button]").click();
        cy.get("[data-cy=government-panel]").should("exist");
    })
})

Also worth noting: the launchApp() step actually occurs - the app is logged in, and then it appears to be as the app is loading in, that the syntax error is raised and the visit() step is never actually executed.

Answer 1

If someone else runs into this in the future, mine was down to trying to load a non existent JS file(from my index page).

Cypress seems to hide the error, so logging it helped;

Cypress.on('uncaught:exception', (err, runnable) => {
  console.log(err);
  return false;
})

Answer 2

I trimmed down our npm packages , suspecting that maybe a package which was added might have introduced the SyntaxError. I removed about 1/4 of our npm packages (which was long overdue anyways), and cleaned up our dependencies. After all that, the Uncaught SyntaxError went away.

---

I suspect it was one of the following packages which introduced the error, though I can't say definitively because I never actually pinpointed the source of the error.

Packages which I ended removing (some of which we likely updated recently):

@types/plotly.js
aurelia-animator-css
@types/jest
@types/node
@types/pikaday
ajv
d3
jest
jest-cli
jquery-sparkline
nps-utils
opn
protractor
ts-jest
ts-node
uglify-js
vinyl-fs
wait-on