Exception when unmounting react component with declared index

Hello,

I have built a react app in TypeScript and I am using the React components provided by Algolia (InstantSearch, Index, Hits etc.) and have encountered an exception that is proving difficult to debug.

Conditions:

  • App component creates InstantSearch component in renderer
  • App component routes to different views
<InstantSearch
  appId=“REDACTED"
  apiKey="REDACTED"
  indexName=“AN_INDEX_NAME"
>
  <div className="App">
    <Switch>
      <Route path="/" exact={true} component={Home} />
      <Route path="/somepath/:someid?" component={OtherComponent} />
    </Switch>
  </div>
</InstantSearch>
  • Home component uses the index AN_INDEX_NAME
  • Home does is not wrapped in an Index component it uses the index specified in the InstantSearch component.

Excerpt from Home component

...
   <RefinementList attributeName="tags" />
   <Hits hitsComponent={MyFirstHitRenderer} />
...
  • OtherComponent is wrapped in an Index component
<Index indexName="A_DIFFERENT_INDEX_NAME">
   <RefinementList attributeName="tags" />
   <Hits hitsComponent={MyOtherHitRenderer} />
</Index>

Situation:

The home component renders just fine. Results are shown and there are no errors. I can even jump to the OtherComponent using my navigation and I get the results I expect and the correct hits are rendered. However…

When I jump back to the home component quickly (eg. a few seconds after visiting OtherComponent) I see the following exception in the browser console:

indexUtils.js:139 Uncaught TypeError: Cannot read property 'A_DIFFERENT_INDEX_NAME' of undefined
    at cleanUpValue (indexUtils.js:139)
    at _cleanUp (connectRefinementList.js:75)
    at Connector.cleanUp (connectRefinementList.js:192)
    at Connector.componentWillUnmount (createConnector.js:188)
    at callComponentWillUnmountWithTimer (react-dom.development.js:8732)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at safelyCallComponentWillUnmount (react-dom.development.js:8739)
    at commitUnmount (react-dom.development.js:8865)
    at commitNestedUnmounts (react-dom.development.js:8901)
    at unmountHostComponents (react-dom.development.js:9184)
    at commitDeletion (react-dom.development.js:9234)
    at commitAllHostEffects (react-dom.development.js:9926)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at commitRoot (react-dom.development.js:10015)
    at performWorkOnRoot (react-dom.development.js:11017)
    at performWork (react-dom.development.js:10967)
    at batchedUpdates (react-dom.development.js:11086)
    at batchedUpdates (react-dom.development.js:2330)
    at dispatchEvent (react-dom.development.js:3421)
cleanUpValue @ indexUtils.js:139
_cleanUp @ connectRefinementList.js:75
cleanUp @ connectRefinementList.js:192
componentWillUnmount @ createConnector.js:188
callComponentWillUnmountWithTimer @ react-dom.development.js:8732
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
safelyCallComponentWillUnmount @ react-dom.development.js:8739
commitUnmount @ react-dom.development.js:8865
commitNestedUnmounts @ react-dom.development.js:8901
unmountHostComponents @ react-dom.development.js:9184
commitDeletion @ react-dom.development.js:9234
commitAllHostEffects @ react-dom.development.js:9926
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
commitRoot @ react-dom.development.js:10015
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421

index.js:2177 The above error occurred in the <AlgoliaRefinementList(Translatable(RefinementList))> component:
    in AlgoliaRefinementList(Translatable(RefinementList)) (created by Projects)
    in li (created by ListGroupItem)
    in ListGroupItem (created by Projects)
    in ul (created by ListGroup)
    in ListGroup (created by Projects)
    in div (created by Panel)
    in Panel (created by Uncontrolled(Panel))
    in Uncontrolled(Panel) (created by Projects)
    in div (created by Col)
    in Col (created by Projects)
    in div (created by Projects)
    in Projects (created by Connect(Projects))
    in Connect(Projects) (created by Route)
    in Route (created by Routing)
    in div (created by Index)
    in Index (created by CreateIndex)
    in CreateIndex (created by Routing)
    in Switch (created by Routing)
    in div (created by Routing)
    in div (created by InstantSearch)
    in InstantSearch (created by CreateInstantSearch)
    in CreateInstantSearch (created by Routing)
    in Routing (created by Connect(Routing))
    in Connect(Routing) (created by Route)
    in Route (created by PrivateRoute)
    in PrivateRoute (created by Connect(PrivateRoute))
    in Connect(PrivateRoute) (created by App)
    in Switch (created by App)
    in div (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by withRouter(Connect(App)))
    in withRouter(Connect(App))
    in Router
    in Provider

React will try to recreate this component tree from scratch using the error boundary you provided, OtherComponent.

__stack_frame_overlay_proxy_console__ @ index.js:2177
logCapturedError @ react-dom.development.js:9747
captureError @ react-dom.development.js:10540
safelyCallComponentWillUnmount @ react-dom.development.js:8742
commitUnmount @ react-dom.development.js:8865
commitNestedUnmounts @ react-dom.development.js:8901
unmountHostComponents @ react-dom.development.js:9184
commitDeletion @ react-dom.development.js:9234
commitAllHostEffects @ react-dom.development.js:9926
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
commitRoot @ react-dom.development.js:10015
performWorkOnRoot @ react-dom.development.js:11017
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421

indexUtils.js:139 Uncaught TypeError: Cannot read property 'A_DIFFERENT_INDEX_NAME' of undefined
    at cleanUpValue (indexUtils.js:139)
    at _cleanUp (connectRefinementList.js:75)
    at Connector.cleanUp (connectRefinementList.js:192)
    at Connector.componentWillUnmount (createConnector.js:188)
    at callComponentWillUnmountWithTimer (react-dom.development.js:8732)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at safelyCallComponentWillUnmount (react-dom.development.js:8739)
    at commitUnmount (react-dom.development.js:8865)
    at commitNestedUnmounts (react-dom.development.js:8901)
    at unmountHostComponents (react-dom.development.js:9184)
    at commitDeletion (react-dom.development.js:9234)
    at commitAllHostEffects (react-dom.development.js:9926)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at commitRoot (react-dom.development.js:10015)
    at performWorkOnRoot (react-dom.development.js:11017)
    at performWork (react-dom.development.js:10967)
    at batchedUpdates (react-dom.development.js:11086)
    at batchedUpdates (react-dom.development.js:2330)
    at dispatchEvent (react-dom.development.js:3421)

Question:

What might be causing this? It feels like it could be a timing issue with the OtherComponent unmounting vs when the context holding the Index A_DIFFERENT_INDEX_NAME is cleaned up. I am struggling to make sense of this and hope to get wisdom from the community on a good strategy to figure this out.