Instantsearch.js: Meteor compatibility

[devwax]

Im using:

• Meteor 1.4.1.2
• React as an npm module: [email protected]
• Flow Router 1.12.1

In my main <App/> component I import the library from npm:

import { InstantSearch } from 'react-instantsearch';

And I add the instantsearch react component:

<InstantSearch
  appId={"****"}
  apiKey={"****"}
  indexName={"****"}
>
  {/* components go here */}
</InstantSearch>

Then when Meteor starts up I get this error in the console:

ReferenceError: document is not defined
W20161012-21:11:07.957(-7)? (STDERR)     at module.exports (/Users/******/galaxy/rigconfig/node_modules/insert-css/index.js:8:75)
W20161012-21:11:07.958(-7)? (STDERR)     at Object.<anonymous> (/Users/******/galaxy/rigconfig/node_modules/react-instantsearch/src/widgets/Hits/Hits.js:36:25)
W20161012-21:11:07.958(-7)? (STDERR)     at Module._compile (module.js:409:26)
W20161012-21:11:07.958(-7)? (STDERR)     at Object.Module._extensions..js (module.js:416:10)
W20161012-21:11:07.958(-7)? (STDERR)     at Module.load (module.js:343:32)
W20161012-21:11:07.958(-7)? (STDERR)     at Module.Mp.load (/Users/******/.meteor/packages/babel-compiler/.6.9.1_1.1one49w++os+web.browser+web.cordova/npm/node_modules/reify/node/runtime.js:16:23)
W20161012-21:11:07.959(-7)? (STDERR)     at Function.Module._load (module.js:300:12)
W20161012-21:11:07.959(-7)? (STDERR)     at Module.require (module.js:353:17)
W20161012-21:11:07.959(-7)? (STDERR)     at require (internal/module.js:12:17)
W20161012-21:11:07.959(-7)? (STDERR)     at Object.<anonymous> (/Users/******/galaxy/rigconfig/node_modules/react-instantsearch/src/widgets/Hits/index.js:11:13)
=> Exited with code: 1                        

Any help would be great. Thanks.

Ps. I haven't tried yet, but I can probably get around this for now by adding Meteor environment conditionals like Meteor.isClient or React lifecycle methods, etc.

I was curious if there was another way, though, because I would like to try server-side rendering if possible so the initial default view is sent as plain html. Then the Algolia library takes over on the client. But this as a bit of early optimization on my part, admittedly.

[vvo]

Hi @rigconfig indeed it seems like right now we are only browser compatible. Ultimately we need to solve this for the release.

Deciding to style using class names and inserting <style> tags may not be good for: react native, server side rendering.

We will need to work on that.

Then the Algolia library takes over on the client. But this as a bit of early optimization on my part, admittedly.

Yes indeed, if you can work around it for now that would be easier. Thanks for trying this preview, please keep providing awesome feedback!

[vvo]

linked to the whole server side and simple CSS stack subject

[vvo]

Will be tackled with #1531