Algolia instantsearch.js Minified exception occurred; invariant - algolia

Question

I'm getting an error from instantsearch.js that doesn't make any sense to me. The error is:
Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
I've created a fiddle with the code in question:
https://jsfiddle.net/qkqzgsv9/
Here's the HTML:
<div type="text" id="search-box" class="form-control"></div>
<table class="table table-striped">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Starts</th>
<th>Duration</th>
<th>Room</th>
<th><span class="glyphicon glyphicon-info-sign"></span></th>
</tr>
</thead>
<tbody id="hits-container">
</tbody>
</table>
<div id="pagination-container"></div>
And here's the Javascript:
var search = instantsearch({
appId: '5V0BUFDX8J',
apiKey: 'a25692c12853aea7a77c5a7125498512',
indexName: 'C86FE050-6C48-11E5-84AA-BA5F164D0BA4_events',
urlSync: { useHash: true }
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#search-box',
autofocus: true,
placeholder: 'Search for events by keyword, description, or event number.'
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits-container',
templates: {
empty: 'No events found',
item: '<tr><td>{{event_number}}</td><td>{{name}}</td><td>{{startdaypart_name}}</td><td>{{duration_name}}</td><td>{{room_name}}</td><td><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" title="{{description}}"></span></td></tr>'
},
})
);
search.addWidget(
instantsearch.widgets.pagination({
container: '#pagination-container'
})
);
search.start();
It happens in both Safari and Chrome. And I'm not even using the minified version of instantsearch.js. Any idea what's causing it?

Answer 1

This is a tricky bug and it is generated becauses this widget uses React internally.
The widget tries to render a div that will contain your template. But this is incorrect because your template contains td's which can't be rendered in div's, so the browser tries to fix that. This leads to React throwing an invariant violation error because the DOM is not what it expected. And finally you can see this specific error because React is minified in the build.
The fix would be to not use td's or wait for this issue https://github.com/algolia/instantsearch.js/issues/707 to be fixed.