Vue-instantsearch: AisCurrentRefinements app crash - cannot read property `reduce` of undefined

[jackwkinsey]

Bug 🐞

What is the current behavior?

Making use of AisCurrentRefinements causes the app to crash with the error:

TypeError: Cannot read property 'reduce' of undefined

Make a sandbox with the current behavior

Sandbox

Some configuration is required:

You'll need to copy .env.example to .env.local and provide the following in that file:

VUE_APP_ALGOLIA_APP_ID
VUE_APP_ALGOLIA_INDEX_NAME

To run, execute npm run ssr:serve then navigate to the search page and select a refinement to filter by (which should change your url; i.e. /search?brand=somebrand). If the app hasn't crashed yet then refresh and you should see the error since the page should crash.

This sandbox mimics our project's setup and uses the AisCurrentRefinements component (though this issue also exists with the AisClearRefinements component). Using this component causes the app to crash. We're gracefully handling this crash in our actual project so the component crashing doesn't crash the whole app and allows everything to work as expected, but we do get an error logged in our system.

What is the expected behavior?

The AisCurrentRefinements component should work as expected without causing a crash.

Does this happen only in specific situations?

It seems to be caused by an initial render of the component.

What is the proposed solution?

From the error log it appears that ./node_modules/instantsearch.js/es/connectors/current-refinements/connectCurrentRefinements.js calls reduce on an array that can be undefined in the render method. (Note: a similar issue exists in connectClearRefinements.js)

Specifically, the render function has these lines:

var scopedResults = _ref3.scopedResults;
...
var items = scopedResults.reduce(...)

For some reason, scopedResults can be undefined (seems to be on initial render; we are using uvue and SSR which may be a cause for this) which causes the reduce call to blow up. If a check is added then the app nor the component crashes and everything works as expected (i.e. the AisCurrentRefinements component works as intended).

What is the version you are using?

vue-instantsearch: 3.1.0

[jackwkinsey]

It seems like this is really related to something with SSR. In our app where we prevent the app from crashing, we see the selected filters "pop in" since it has to happen client side which signals that something is failing server side. Ideally, when the user refreshes the page with filters selected, those items are rendered server side and we won't see them "pop in" on the page.

[kevintruby]

I have run into similar issues, attempting to upgrade from version 2.7.0 to 3.1.0 of vue-instantsearch. In order to get my baseline query to render a template, the AisClearRefinements widget, and a custom widget extending AisCurrentRefinements had to be commented out.

My error stack trace also pointed to the use of scopedResults.reduce(...) that you highlighted in the issue description. For each component, it was traced to the subcomponents' created() hook, by use of widget.render() from within the createServerRoot mixin's __forceRender() function. I'm not sure if widget.render() is supposed to be sending a scopedAttributes value within its object payload as defined by the createServerRootMixin, or if there is a problem with instantsearch.js/src/widgets/index.ts use of resolveScopedResultsFromIndex() attempt to find/create the value.

Unfortunately this is about as far as I've managed to trace the issue, and would need to dig into the other libraries to better understand the expected architecture.

For what it's worth, I have been trying to define the createServerRootMixin integration not at the app's entry-level, where a new Vue() is declared, but in a @/views subcomponent that is one of only a few page types that relies on SSR of serialized search parameters, or programmatically pre-filtered via the filters searchParameter option.

[yannickcr]

Thanks for your detailed report, we identified the issue and will try to fix it ASAP.

[Haroenv]

This has now been released in 3.2.0 (as well as preventing double widgets on change before start) @kevintruby & @jackwkinsey