setImmediate is not defined on Meteor + React

react-instantsearch: 2.1.0 Latest versions of Chrome and FF.

Hello, I’ve just started setup react-instantsearch on my Meteor project and have strange bug.

I’m following steps from the React Instant Search Getting Started Tutorial and when I insert first widget (<Hits /> for example) I have an error in console:

modules.js?hash=35e875d…:110624 Uncaught ReferenceError: setImmediate is not defined
    at scheduleUpdate (modules.js?hash=35e875d…:110624)
    at Object.registerWidget (modules.js?hash=35e875d…:110633)
    at new Connector (modules.js?hash=35e875d…:109693)
    at modules.js?hash=35e875d…:11541
    at measureLifeCyclePerf (modules.js?hash=35e875d…:11321)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (modules.js?hash=35e875d…:11540)
    at ReactCompositeComponentWrapper._constructComponent (modules.js?hash=35e875d…:11526)
    at ReactCompositeComponentWrapper.mountComponent (modules.js?hash=35e875d…:11434)
    at Object.mountComponent (modules.js?hash=35e875d…:4461)
    at ReactDOMComponent.mountChildren (modules.js?hash=35e875d…:10623)

It refers to this code:

exports.default = createWidgetsManager;                                                                                // 6
function createWidgetsManager(onWidgetsUpdate) {                                                                       // 7
  var widgets = [];                                                                                                    // 8
  // Is an update scheduled?                                                                                           // 9
  var scheduled = false;                                                                                               // 10
                                                                                                                       // 11
  // The state manager's updates need to be batched since more than one                                                // 12
  // component can register or unregister widgets during the same tick.                                                // 13
  function scheduleUpdate() {                                                                                          // 14
    if (scheduled) {                                                                                                   // 15
      return;                                                                                                          // 16
    }                                                                                                                  // 17
    scheduled = true;                                                                                                  // 18
    setImmediate(function () {                                                                                         // 19
      scheduled = false;                                                                                               // 20
      onWidgetsUpdate();                                                                                               // 21
    });                                                                                                                // 22
  }                    

[damonmaria]

I can confirm that changing import algoliasearch from 'algoliasearch' in dom.js to import algoliasearch/src/browser/builds/algoliasearch instead gets this working in Meteor.

[mthuret]

Hi @Kolyasya,

Currently we are using setImmediate to perform some scheduling and it seems that this function isn’t available with meteor. We are going to change this code to be compatible with the largest lib, but in the meantime one thing you can do is using a setImmediatepolyfill like this one: https://github.com/YuzuJS/setImmediate. I tried it with a small meteor app and it seems to work fine.

Also you are going to have another issue because of the algoliaClient we use under the hood of react-instantsearch. To bypass this issue, you can retrieve the algoliaSearch client like describe here https://github.com/algolia/algoliasearch-client-javascript/issues/292 and use the algoliaClientprop on the <InstantSearch/> component to instantiate it.

Here a working example:

import algoliaClient from 'algoliasearch/src/browser/builds/algoliasearch'

<InstantSearch
        indexName="xxx"
        algoliaClient={algoliaClient('appId', 'apiKey')}
      >
</InstantSearch>

Let me know if this help 😃