React: Schedule, SSR, window.addEventListener is not a function

[stasoft91]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
window.addEventListener is not a function in node_modules/schedule/cjs/schedule.development.js:366:10

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

• Build server.bundle.js for ssr (node) as usual
• Try to run it with "node server.bundle.js"
• See "window.addEventListener is not a function in node_modules/schedule/cjs/schedule.development.js:366:10"
• console.log(window) 1 line before 366 returns "{ navigator: {}, server: true }"

What is the expected behavior?
working as usual

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react": "^16.3.2"
Well, it worked just fine before I did yarn upgrade, first since March, I guess.

[gaearon]

Hmm. It's very strange that you have a server environment that defines a fake window global that doesn't behave like a real window. We could possibly check more checks but it's kind of an arbitrary line.

Can you get rid of the fake window in your server environment?

[stasoft91]

@gaearon Wow, some bizzare legacy fun here.
I found

global.window = {
navigator: {},
server: true,
};

In server.js entry file and added addEventListener: () => {} there and now it works just like it should. So I am guessing it was added to bypass some other errors like this one in some other strange places.

console.log(global.window) above that going undefined, if anyone wonder.

[swashcap]

Our team is seeing something similar in React Native (0.55.4):

We're just seeing this runtime crash. I haven't dug in to the Metro internals to see whether window is defined, but this seems like a likely cause to the problem due to the recent 0.5.0 bump:

$ npm info schedule --json | jq -r .time
{
  "modified": "2018-09-18T19:31:15.459Z",
  "created": "2014-01-10T16:49:13.168Z",
  "0.1.0": "2014-01-10T16:54:02.004Z",
  "0.2.0": "2018-09-04T01:47:44.503Z",
  "0.3.0": "2018-09-06T16:44:42.736Z",
  "0.4.0": "2018-09-13T18:34:20.651Z",
  "0.5.0-alpha.0": "2018-09-17T22:11:31.273Z",
  "0.5.0": "2018-09-18T19:31:04.668Z"
}

[swashcap]

When inspecting our bundle we see the development version is included:

@@ -2634 +2634 @@ __d(function(t,s,c,e,i){'use strict';c.exports=s(i[0])},2632,[2633]);
-__d(function(e,n,t,l,u){'use strict';Object.defineProperty(l,"__esModule",{value:!0});var o=!("undefined"==typeof window||!window.document||!window.document.createElement),i=Date,a="function"==typeof setTimeout?setTimeout:void 0,r="function"==typeof clearTimeout?clearTimeout:void 0,c="function"==typeof requestAnimationFrame?requestAnimationFrame:void 0,d="function"==typeof cancelAnimationFrame?cancelAnimationFrame:void 0,f="object"==typeof performance&&"function"==typeof performance.now;if(l.unstable_now=void 0,f){var s=performance;l.unstable_now=function(){return s.now()}}else l.unstable_now=function(){return i.now()};if(l.unstable_scheduleWork=void 0,l.unstable_cancelScheduledWork=void 0,o){var m=null,v=null,w=-1,b=!1,p=!1,_=void 0,h=void 0,k=function(e){_=c(function(n){r(h),e(n)}),h=a(function(){d(_),e(l.unstable_now())},100)},y=0,T=33,g=33,x={didTimeout:!1,timeRemaining:function(){var e=y-l.unstable_now();return 0<e?e:0}},W=function(e,n){var t=e.scheduledCallback,u=!1;try{t(n),u=!0}finally{l.unstable_cancelScheduledWork(e),u||(b=!0,window.postMessage(C,"*"))}},C="__reactIdleCallback$"+Math.random().toString(36).slice(2);window.addEventListener("message",function(e){if(e.source===window&&e.data===C&&(b=!1,null!==m)){if(null!==m){var n=l.unstable_now();if(!(-1===w||w>n)){e=-1;for(var t=[],u=m;null!==u;){var o=u.timeoutTime;-1!==o&&o<=n?t.push(u):-1!==o&&(-1===e||o<e)&&(e=o),u=u.next}if(0<t.length)for(x.didTimeout=!0,n=0,u=t.length;n<u;n++)W(t[n],x);w=e}}for(e=l.unstable_now();0<y-e&&null!==m;)e=m,x.didTimeout=!1,W(e,x),e=l.unstable_now();null===m||p||(p=!0,k(M))}},!1);var M=function(e){p=!1;var n=e-y+g;n<g&&T<g?(8>n&&(n=8),g=n<T?T:n):T=n,y=e+g,b||(b=!0,window.postMessage(C,"*"))};l.unstable_scheduleWork=function(e,n){var t=-1;return null!=n&&"number"==typeof n.timeout&&(t=l.unstable_now()+n.timeout),(-1===w||-1!==t&&t<w)&&(w=t),e={scheduledCallback:e,timeoutTime:t,prev:null,next:null},null===m?m=e:null!==(n=e.prev=v)&&(n.next=e),v=e,p||(p=!0,k(M)),e},l.unstable_cancelScheduledWork=function(e){if(null!==e.prev||m===e){var n=e.next,t=e.prev;e.next=null,e.prev=null,null!==n?null!==t?(t.next=n,n.prev=t):(n.prev=null,m=n):null!==t?(t.next=null,v=t):v=m=null}}}else{var S=new Map;l.unstable_scheduleWork=function(e){var n={scheduledCallback:e,timeoutTime:0,next:null,prev:null},t=a(function(){e({timeRemaining:function(){return 1/0},didTimeout:!1})});return S.set(e,t),n},l.unstable_cancelScheduledWork=function(e){var n=S.get(e.scheduledCallback);S.delete(e),r(n)}}},2633,[]);
+__d(function(e,n,t,o,i){'use strict';Object.defineProperty(o,"__esModule",{value:!0});var u=null,l=!1,r=!1,a="object"==typeof performance&&"function"==typeof performance.now,s={timeRemaining:a?function(){var e=b()-performance.now();return 0<e?e:0}:function(){var e=b()-Date.now();return 0<e?e:0},didTimeout:!1};function f(){if(!l){var e=u.timesOutAt;r?w():r=!0,p(d,e)}}function c(){var e=u,n=u.next;if(u===n)u=null;else{var t=u.previous;u=t.next=n,n.previous=t}e.next=e.previous=null,(e=e.callback)(s)}function d(e){l=!0,s.didTimeout=e;try{if(e)for(;null!==u;){var n=o.unstable_now();if(!(u.timesOutAt<=n))break;do{c()}while(null!==u&&u.timesOutAt<=n)}else if(null!==u)do{c()}while(null!==u&&0<b()-o.unstable_now())}finally{l=!1,null!==u?f():r=!1}}var v,m,p,w,b,y=Date,_="function"==typeof setTimeout?setTimeout:void 0,h="function"==typeof clearTimeout?clearTimeout:void 0,k="function"==typeof requestAnimationFrame?requestAnimationFrame:void 0,x="function"==typeof cancelAnimationFrame?cancelAnimationFrame:void 0;function A(e){v=k(function(n){h(m),e(n)}),m=_(function(){x(v),e(o.unstable_now())},100)}if(a){var T=performance;o.unstable_now=function(){return T.now()}}else o.unstable_now=function(){return y.now()};if("undefined"==typeof window){var M=-1;p=function(e){M=setTimeout(e,0,!0)},w=function(){clearTimeout(M)},b=function(){return 0}}else if(window._schedMock){var F=window._schedMock;p=F[0],w=F[1],b=F[2]}else{"undefined"!=typeof console&&("function"!=typeof k&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),"function"!=typeof x&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"));var O=null,g=!1,q=-1,j=!1,D=!1,S=0,W=33,C=33;b=function(){return S};var E="__reactIdleCallback$"+Math.random().toString(36).slice(2);window.addEventListener("message",function(e){if(e.source===window&&e.data===E){g=!1;var n=o.unstable_now();if(e=!1,0>=S-n){if(!(-1!==q&&q<=n))return void(j||(j=!0,A(I)));e=!0}if(q=-1,n=O,O=null,null!==n){D=!0;try{n(e)}finally{D=!1}}}},!1);var I=function(e){j=!1;var n=e-S+C;n<C&&W<C?(8>n&&(n=8),C=n<W?W:n):W=n,S=e+C,g||(g=!0,window.postMessage(E,"*"))};p=function(e,n){O=e,q=n,D?window.postMessage(E,"*"):j||(j=!0,A(I))},w=function(){O=null,g=!1,q=-1}}o.unstable_scheduleWork=function(e,n){var t=o.unstable_now();if(e={callback:e,timesOutAt:n=void 0!==n&&null!==n&&null!==n.timeout&&void 0!==n.timeout?t+n.timeout:t+5e3,next:null,previous:null},null===u)u=e.next=e.previous=e,f();else{t=null;var i=u;do{if(i.timesOutAt>n){t=i;break}i=i.next}while(i!==u);null===t?t=u:t===u&&(u=e,f()),(n=t.previous).next=t.previous=e,e.next=t,e.previous=n}return e},o.unstable_cancelScheduledWork=function(e){var n=e.next;if(null!==n){if(n===e)u=null;else{e===u&&(u=n);var t=e.previous;t.next=n,n.previous=t}e.next=e.previous=null}}},2633,[]);

The addition doesn't have a UMD wrapper, which is odd. Trying to track down a link to the files, but it seems schedule has been renamed!

[gaearon]

Where does schedule standalone package come from in RN 0.55? I wouldn't expect it to be used there.

[gaearon]

Moreover I don't understand what brings in the 0.5.0 version. Can you run yarn why schedule?

[bvaughn]

Moreover I don't understand what brings in the 0.5.0 version.

Maybe they're installing a newer version of the react package like on that other issue?

[gaearon]

Oh maybe. Well. That's not supported and has never been.

[swashcap]

Where does schedule standalone package come from in RN 0.55?

Yeah, I think we're somehow getting it from a dependency that depends on react-dom. Bad dependency tree on our part. Our build tooling's a bit complicated, but I will try to yarn why it out. Thanks!

[vinsonxing]

This issue should be caused by react-dom with the latest version, I got this issue fixed after I downgraded it to a previous version 16.4.2

[bvaughn]

Yeah, the schedule dependency was added to react-dom in version 16.5.0. If you need to not depend on it for the time being, 16.4.2 would be a reasonable version to pin to.

[sundbry]

Running RN 57.0 with React 16.5.2, got the same error about window.addEventListener. Downgrading React and react-dom to 16.5.1 resolved the problem.

[gaearon]

We should fix this to unblock RN then.