Use with Server-Side Rendering about worker-timers

[chrisguttandin]

Hi @newyork-anthonyng, good to know that this package is actually used by someone else. It is meant to be used as a frontend package. Therefore there are no checks for browser APIs like Blob.

I’m more of an Angular guy and therefore don’t know much about React’s server side rendering quirks. Do you have the chance to replace a certain package? A super simple replacement could look like this:

export { clearInterval, clearTimeout, setInterval, setTimeout };

It does just export the global timers which are also available on Node.js.

I don't really want to include that fallback in the worker-timers module because it would mean that it will silently fail in browsers without Web Worker support. Does that make sense to you?

[newyork-anthonyng]

@chrisguttandin Okay, cool.

I'm doing something similar to what you're suggesting, where I am using webpack.NormalModuleReplacementPlugin to replace worker-timers.

And not wanting to include the fallback in the worker-timers module makes sense 👍

I'll close this issue.

[mationai]

Ran into the same situation.

@chrisguttandin Can you please let me know what exactly to take out and replace?

Thank you.

[chrisguttandin]

@fuzzthink I'm not really sure what exact configuration you have. But in general it's best to not use the package outside of the browser. All functions (setInterval, setTimeout, clearInterval, clearTimeout) have the same signature as the builtin functions on Node.js with the equivalent names. So the trick is to configure webpack, browserify, or whatever you use to use the builtin functions on the server.

I hope that helps.

[newyork-anthonyng]

@fuzzthink I created this repository which shows a solution I used. Let me know if you have questions about this.

@chrisguttandin Do you think it's worth adding a note on how to handle this in the README.md?

[mationai]

@newyork-anthonyng Thank you for taking the time to create the repo. It looks like a simple for webpack users. I tried a custom solution before reading your response. Here's my hackish solution:

npm install worker-timers-broker (or yarn add)

import {load as workerTimersBrokerLoad} from 'worker-timers-broker'

const worker = "!function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var r={};t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,\"a\",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p=\"\",t(t.s=0)}([function(e,t,r){\"use strict\";Object.defineProperty(t,\"__esModule\",{value:!0});var n=r(1);addEventListener(\"message\",function(e){var t=e.data;try{if(\"clear\"===t.method){var r=t.id,i=t.params,o=i.timerId,a=i.timerType;if(\"interval\"===a)Object(n.a)(o),postMessage({error:null,id:r});else{if(\"timeout\"!==a)throw new Error('The given type \"'+a+'\" is not supported');Object(n.b)(o),postMessage({error:null,id:r})}}else{if(\"set\"!==t.method)throw new Error('The given method \"'+t.method+'\" is not supported');var s=t.params,u=s.delay,c=s.now,d=s.timerId,l=s.timerType;if(\"interval\"===l)Object(n.c)(u,d,c);else{if(\"timeout\"!==l)throw new Error('The given type \"'+l+'\" is not supported');Object(n.d)(u,d,c)}}}catch(e){postMessage({error:{message:e.message},id:t.id,result:null})}})},function(e,t,r){\"use strict\";r.d(t,\"a\",function(){return o}),r.d(t,\"b\",function(){return a}),r.d(t,\"c\",function(){return c}),r.d(t,\"d\",function(){return d});var n=new Map,i=new Map,o=function(e){var t=n.get(e);if(void 0===t)throw new Error('There is no interval scheduled with the given id \"'+e+'\".');clearTimeout(t),n.delete(e)},a=function(e){var t=i.get(e);if(void 0===t)throw new Error('There is no timeout scheduled with the given id \"'+e+'\".');clearTimeout(t),i.delete(e)},s=function(e,t){var r=void 0,n=void 0;if(\"performance\"in self){var i=performance.now(),o=Math.max(0,i-t);r=i,n=e-o}else r=Date.now(),n=e;return{expected:r+n,remainingDelay:n}},u=function e(t,r,n,i){var o=\"performance\"in self?performance.now():Date.now();o>n?postMessage({id:null,method:\"call\",params:{timerId:r,timerType:i}}):t.set(r,setTimeout(e,n-o,t,r,n,i))},c=function(e,t,r){var i=s(e,r),o=i.expected,a=i.remainingDelay;n.set(t,setTimeout(u,a,n,t,o,\"interval\"))},d=function(e,t,r){var n=s(e,r),o=n.expected,a=n.remainingDelay;i.set(t,setTimeout(u,a,i,t,o,\"timeout\"))}}]);";
let workerTimers = {}
if (global.Blob){
  const blob = new Blob([worker],{ type:'application/javascript; charset=utf-8'})
  workerTimers = workerTimersBrokerLoad(URL.createObjectURL(blob))
}
else{
  workerTimers.clearInterval = clearInterval
  workerTimers.clearTimeout = clearTimeout
  workerTimers.setInterval = setInterval
  workerTimers.setTimeout = setTimeout
}
export default workerTimers

Not too elegant, but seems to work.

@chrisguttandin Maybe you can just make a note of the potential problem and link this issue in README per anthony's suggestion. Thank you by the way for the repo, extremely useful.

[chrisguttandin]

@fuzzthink I think it's a good idea to add a paragraph to the readme file which is explaining the problem. I've already done it.

@newyork-anthonyng Many thanks for providing the example. I included it in the readme.