Next.js: Edge: Object doesn't support property or method "finally'

Created on 23 Apr 2019 · 4Comments · Source: vercel/next.js

Bug report

Describe the bug

While in development mode, when starting my app in Edge, I receive a TypeError stating that Object doesn't support property or method 'finally'.

TypeError: Object doesn't support property or method 'finally'

FetchTransport.prototype.open
./node_modules/next/dist/client/event-source-polyfill.js:473
  470 | var signal = controller.signal; // see #120
  471 | 
  472 | var textDecoder = new TextDecoder();
> 473 | unfetch_1.default(url, {
      | ^
  474 |   headers: headers,
  475 |   credentials: withCredentials ? 'include' : 'same-origin',
  476 |   signal: signal,

onTimeout
./node_modules/next/dist/client/event-source-polyfill.js:920
  917 | }
  918 | 
  919 | try {
> 920 |   transport.open(xhr, onStart, onProgress, onFinish, requestURL, withCredentials, requestHeaders);
      | ^
  921 | } catch (error) {
  922 |   close();
  923 |   throw error;

start
./node_modules/next/dist/client/event-source-polyfill.js:931
  928 |   es.readyState = CONNECTING;
  929 |   es.withCredentials = withCredentials;
  930 |   es._close = close;
> 931 |   onTimeout();
  932 | }
  933 | 
  934 | EventSourcePolyfill.prototype = (0, _create.default)(EventTarget.prototype);

EventSourcePolyfill
./node_modules/next/dist/client/event-source-polyfill.js:654
  651 |   this.readyState = undefined;
  652 |   this.withCredentials = undefined;
  653 |   this._close = undefined;
> 654 |   start(this, url, options);
  655 | }
  656 | 
  657 | var isFetchSupported = unfetch_1.default != undefined && Response != undefined && 'body' in Response.prototype;

init
./node_modules/next/dist/client/dev-error-overlay/eventsource.js:24
  21 | }, options.timeout / 2);
  22 | 
  23 | function init() {
> 24 |   source = new window.EventSource(options.path);
     | ^
  25 |   source.onopen = handleOnline;
  26 |   source.onerror = handleDisconnect;
  27 |   source.onmessage = handleMessage;

EventSourceWrapper
./node_modules/next/dist/client/dev-error-overlay/eventsource.js:16
  13 |   options.timeout = 20 * 1000;
  14 | }
  15 | 
> 16 | init();
     | ^
  17 | var timer = setInterval(function () {
  18 |   if (new Date() - lastActivity > options.timeout) {
  19 |     handleDisconnect();

getEventSourceWrapper
./node_modules/next/dist/client/dev-error-overlay/eventsource.js:64
  61 | if (!window.__whmEventSourceWrapper[options.path]) {
  62 |   // cache the wrapper for other entries loaded on
  63 |   // the same page with the same options.path
> 64 |   window.__whmEventSourceWrapper[options.path] = EventSourceWrapper(options);
     | ^
  65 | }
  66 | 
  67 | return window.__whmEventSourceWrapper[options.path];

connect
./node_modules/next/dist/client/dev-error-overlay/hot-dev-client.js:110
  107 |   });
  108 | }
  109 | 
> 110 | eventsource_1.getEventSourceWrapper(options).addMessageListener(function (event) {
      | ^
  111 |   // This is the heartbeat event
  112 |   if (event.data === "\uD83D\uDC93") {
  113 |     return;

exports.default
./node_modules/next/dist/client/webpack-hot-middleware-client.js:24
  21 | var options = {
  22 |   path: "".concat(assetPrefix, "/_next/webpack-hmr")
  23 | };
> 24 | var devClient = hot_dev_client_1.default(options);
     | ^
  25 | devClient.subscribeToHmrEvent(function (obj) {
  26 |   if (obj.action === 'reloadPage') {
  27 |     return window.location.reload();

./node_modules/next/dist/client/next-dev.js
./node_modules/next/dist/client/next-dev.js:45
  42 | var _window = window,
  43 |     assetPrefix = _window.__NEXT_DATA__.assetPrefix;
  44 | var prefix = assetPrefix || '';
> 45 | var webpackHMR = webpack_hot_middleware_client_1.default({
  46 |   assetPrefix: prefix
  47 | });
  48 | window.next = next;

__webpack_require__
./webpack/bootstrap:788
  785 | // Execute the module function
  786 | var threw = true;
  787 | try {
> 788 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^
  789 |     threw = false;
  790 | } finally {
  791 |     if(threw) delete installedModules[moduleId];

checkDeferredModules
./webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^
  46 |  }
  47 | }
  48 | return result;

webpackJsonpCallback
./webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^
  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;

To Reproduce

Direct the browser to any page of the application.

Expected behavior

The error should be avoided and the app should load normally.

System information

OS: Windows 10
Browser (if applies) Edge
Version of Next.js: 8.0.4

Additional context

This issue appears to be related to the development mode only, when the app is compiled and run it works fine in Edge. Also, everything appears to be fine in IE 11, I am only having this issue in Edge.

Source