Cypress: Cypress unable to run test (Uncaught Uncaught TypeError: Cannot read property 'bind' of null)

[RichieMerchant]

Running tests fail with the following error. Although the image attached does say the error is generated in the application, there is nothing to indicate from the application itself.

I've added this to the support index to catch errors but test not timeout

Cypress.on('uncaught:exception', (err, runnable) => {
  // returning false here prevents Cypress from
  // failing the test
  return false
})

What I have noticed is that none of the button click work within the Cypress interface. No errors are fired when clicking either. But if I open the same link in the browser, the buttons work fine.

Desired behavior:

Tests should run as normal without any failure or provide better stack tracing of this issue so that I can debug it better.

Steps to reproduce: (app code and test code)

I have a monorepo setup and the frontend is using nextjs 9 with babel 7. Prior the this I was using nextjs 7 with babel 7 bridge and all worked fine before the upgrade to next 9. I've just gone through the upgrade steps for next js 9 and started receiving the abou

Versions

Cypress: 3.4.1 & 3.6.1
Chrome v78
Mac OS v10.13.6

[Jekiwijaya]

@RichieMerchant do you have any workaround? I also get this error

[jennifer-shehane]

@RichieMerchant Can you open your Chrome DevTools and click the yellow error? Can you share what is printed to the console (including the stacktrace) - this should give more indication of where the error is being thrown from.

[Jekiwijaya]

@jennifer-shehane
this is my case

cypress_runner.js:157775 Uncaught TypeError: Cannot read property 'bind' of undefined

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

Because this error occurred during a 'before each' hook we are skipping the remaining tests in the current suite: 'Register page'
    at Object../node_modules/next/dist/build/polyfills/fetch/index.js (http://localhost:3000/_next/static/runtime/main.js?ts=1574858733209:4662:40)
    at __webpack_require__ (http://localhost:3000/_next/static/runtime/webpack.js?ts=1574858733209:793:31)
    at fn (http://localhost:3000/_next/static/runtime/webpack.js?ts=1574858733209:151:20)
    at Object../node_modules/next/dist/client/dev/event-source-polyfill.js (http://localhost:3000/_next/static/runtime/main.js?ts=1574858733209:5481:39)
    at __webpack_require__ (http://localhost:3000/_next/static/runtime/webpack.js?ts=1574858733209:793:31)
    at fn (http://localhost:3000/_next/static/runtime/webpack.js?ts=1574858733209:151:20)
    at Object.<anonymous> (http://localhost:3000/_next/static/runtime/main.js?ts=1574858733209:7562:51)
    at Object../node_modules/next/dist/client/next-dev.js (http://localhost:3000/_next/static/runtime/main.js?ts=1574858733209:7642:30)
    at __webpack_require__ (http://localhost:3000/_next/static/runtime/webpack.js?ts=1574858733209:793:31)
    at checkDeferredModules (http://localhost:3000/_next/static/runtime/webpack.js?ts=1574858733209:46:23)
From previous event:
    at run (http://localhost:3000/__cypress/runner/cypress_runner.js:79929:15)
    at Object.cy.<computed> [as visit] (http://localhost:3000/__cypress/runner/cypress_runner.js:80290:11)
    at Context.runnable.fn (http://localhost:3000/__cypress/runner/cypress_runner.js:80477:20)
    at callFn (http://localhost:3000/__cypress/runner/cypress_runner.js:30713:21)
    at Hook.../driver/node_modules/mocha/lib/runnable.js.Runnable.run (http://localhost:3000/__cypress/runner/cypress_runner.js:30706:7)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:84151:28
From previous event:
    at Object.onRunnableRun (http://localhost:3000/__cypress/runner/cypress_runner.js:84140:17)
    at $Cypress.action (http://localhost:3000/__cypress/runner/cypress_runner.js:78413:30)
    at Hook.Runnable.run (http://localhost:3000/__cypress/runner/cypress_runner.js:82943:20)
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:31056:10)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:31078:5
    at timeslice (http://localhost:3000/__cypress/runner/cypress_runner.js:26146:27)

[RichieMerchant]

@jennifer-shehane at first glance it's the same stacktrace as @Jekiwijaya

cypress_runner.js:177907 Console was cleared
cypress_runner.js:177904 Uncaught TypeError: Cannot read property 'bind' of null

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
    at Object../node_modules/next/dist/build/polyfills/fetch/index.js (http://localhost:8080/_next/static/runtime/main.js?ts=1574859801081:22812:40)
    at __webpack_require__ (http://localhost:8080/_next/static/runtime/webpack.js?ts=1574859801081:793:31)
    at fn (http://localhost:8080/_next/static/runtime/webpack.js?ts=1574859801081:151:20)
    at Object../node_modules/next/dist/client/dev/event-source-polyfill.js (http://localhost:8080/_next/static/runtime/main.js?ts=1574859801081:23631:39)
    at __webpack_require__ (http://localhost:8080/_next/static/runtime/webpack.js?ts=1574859801081:793:31)
    at fn (http://localhost:8080/_next/static/runtime/webpack.js?ts=1574859801081:151:20)
    at Object.<anonymous> (http://localhost:8080/_next/static/runtime/main.js?ts=1574859801081:25712:51)
    at Object../node_modules/next/dist/client/next-dev.js (http://localhost:8080/_next/static/runtime/main.js?ts=1574859801081:25792:30)
    at __webpack_require__ (http://localhost:8080/_next/static/runtime/webpack.js?ts=1574859801081:793:31)
    at fn (http://localhost:8080/_next/static/runtime/webpack.js?ts=1574859801081:151:20)
From previous event:
    at run (http://localhost:8080/__cypress/runner/cypress_runner.js:100291:15)
    at Object.cy.<computed> [as visit] (http://localhost:8080/__cypress/runner/cypress_runner.js:100658:11)
    at Context.runnable.fn (http://localhost:8080/__cypress/runner/cypress_runner.js:100845:20)
    at callFn (http://localhost:8080/__cypress/runner/cypress_runner.js:30931:21)
    at Test.../driver/node_modules/mocha/lib/runnable.js.Runnable.run (http://localhost:8080/__cypress/runner/cypress_runner.js:30924:7)
    at http://localhost:8080/__cypress/runner/cypress_runner.js:103715:28
From previous event:
    at Object.onRunnableRun (http://localhost:8080/__cypress/runner/cypress_runner.js:103704:17)
    at $Cypress.action (http://localhost:8080/__cypress/runner/cypress_runner.js:97393:30)
    at Test.Runnable.run (http://localhost:8080/__cypress/runner/cypress_runner.js:102641:20)
    at Runner.../driver/node_modules/mocha/lib/runner.js.Runner.runTest (http://localhost:8080/__cypress/runner/cypress_runner.js:31398:10)
    at http://localhost:8080/__cypress/runner/cypress_runner.js:31504:12
    at next (http://localhost:8080/__cypress/runner/cypress_runner.js:31318:14)
    at http://localhost:8080/__cypress/runner/cypress_runner.js:31328:7
    at next (http://localhost:8080/__cypress/runner/cypress_runner.js:31260:14)
    at http://localhost:8080/__cypress/runner/cypress_runner.js:31296:5
    at timeslice (http://localhost:8080/__cypress/runner/cypress_runner.js:26364:27)
logError @ cypress_runner.js:177904
(anonymous) @ cypress_runner.js:177577
emit @ cypress_runner.js:141534
(anonymous) @ cypress_runner.js:121842
emit @ cypress_runner.js:141534
emit @ cypress_runner.js:121874
_onErrorClick @ cypress_runner.js:120759
(anonymous) @ cypress_runner.js:121993
executeAction @ cypress_runner.js:161190
res @ cypress_runner.js:161181
ca @ cypress_runner.js:169208
ja @ cypress_runner.js:169209
ka @ cypress_runner.js:169209
wa @ cypress_runner.js:169211
Aa @ cypress_runner.js:169212
ya @ cypress_runner.js:169212
Da @ cypress_runner.js:169215
Ad @ cypress_runner.js:169278
Gi @ cypress_runner.js:169444
Kb @ cypress_runner.js:169233
Dd @ cypress_runner.js:169280
(anonymous) @ cypress_runner.js:169445
./node_modules/react-dom/node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority @ cypress_runner.js:169524
Ii @ cypress_runner.js:169445
Cd @ cypress_runner.js:169279

[RichieMerchant]

Hi @jennifer-shehane, something I have noticed while poking around is that the events attached to buttons and links seem to not disappeared.

[PetrSnobelt]

The same problem happens for me, below is pretty printed relevant code, maybe it remains something to cypress team. I tried to add source map,s but so far no luck

tNLw: function(e, t, n) {
        n("I0vN"),
        e.exports = self.fetch.bind(self)
    },

But what is really interesting is that once I click on tested URL, cypress open it in another tab, and there are no error in a new tab and then when I retry test it passes

[PetrSnobelt]

it is probably related to this code:

// enable using window fetch in cy.wait
  // https://github.com/cypress-io/cypress/issues/95
  on("window:before:load", win => {
    // remove fetch so it uses polyfill
    win.fetch = null // eslint-disable-line
  })

[ns6482]

@Jekiwijaya also experiencing this. Noticed you are also using next.js, can I ask what version you are using? This appeared for me once upgrading to version 9.1.4

[Jekiwijaya]

@ns6482 i'm also [email protected]

[RichieMerchant]

@Jekiwijaya not yet i'm afraid. I have seen an issue raised on NextJS issues with exactly the same issue. If I find it I'll post it here but from the discussion on there here's what I think maybe the issue. (I have not confirmed this so its just a hunch)

Cypress can not track requests using fetch so and to ensure fetch is not available, you can delete it from the window before tests. In the recent updates to Next JS that are polyfilling fetch in a way the Cypress is not understanding. Apparently version 9.1.2 may work but I have not tested it yet.

[RichieMerchant]

@jennifer-shehane I've been able to verify a couple of assumptions mentions in my last message.

Node v12.13.0|Node v10.15.3
Cypress v3.7.1
Next JS v9.1.2 to v9.1.4
Works when I remove

Cypress.on('window:before:load', win => {
  win.fetch = null;
});

Hope this helps in identifying what was causing the problem

[zvictor]

This problem feels a lot like combining Mentos and Coca-Cola. Cypress maintainers will say that you should patch nextjs and vice-versa.

The simplest workaround I came up with is this:

Cypress.on('window:before:load', win => {
  fetch('https://unpkg.com/unfetch/dist/unfetch.umd.js')
    .then(stream => stream.text())
    .then(response => {
      win.eval(response)
      win.fetch = win.unfetch
    })
})

Make sure you use the snippet above instead of win.fetch = null. Other than that, there is not much that can be done until https://github.com/cypress-io/cypress/issues/687 is done. Thus, this issue should probably be closed.

[AnderssonChristian]

@zvictor any idea of how to do this if you have unfetch installed as a dev dependency?

[Clement-Bresson]

@zvictor solution worked for me! (using next version 9.1.1 and isomorphic-unfetch 3.0.0)

[jennifer-shehane]

Closing as resolved.

Additionally, the experimentalFetchPolyfill configuration option has been released as part of 4.9.0. When this option is true, Cypress will automatically replace window.fetch with a polyfill that Cypress can spy on and stub.

You should be able to remove any of the following code:

Cypress.on('window:before:load', (win) => { 
  delete win.fetch  
})  

or

cy.visit('/', { 
  onBeforeLoad (win) {  
    delete win.fetch    
  },    
})  

And replace it with the below in your configuration file (cypress.json)

{
  "experimentalFetchPolyfill": true
}

You can see a full example of this in use here: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__window-fetch

If you encounter any issues with the new experimentalFetchPolyfill, please open a new issue with a reproducible example.

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.