React-instantsearch: Error: Cannot declare two hierarchical facets with the same name

[harshmaur]

Hello,

I am using react-instantsearch on next.js with ssr support.
The problem I am getting is super difficult to reproduce but once it comes, it affects the whole project I can give the code and the stacktrace to help it debug properly.

Error: Cannot declare two hierarchical facets with the same name: `hierarchicalCategories.lvl0`
    at SearchParameters.addHierarchicalFacet (/cm-frontend-react/node_modules/algoliasearch-helper/src/SearchParameters/index.js:946:13)
    at Object.getSearchParameters (/cm-frontend-react/node_modules/react-instantsearch/src/connectors/connectHierarchicalMenu.js:1:3303)
    at c.filter.reduce._algoliasearchHelper.SearchParameters.index (/cm-frontend-react/node_modules/react-instantsearch/src/core/createInstantSearchServer.js:1:4336)
    at Array.reduce (native)
    at findResultsState (/cm-frontend-react/node_modules/react-instantsearch/src/core/createInstantSearchServer.js:1:4286)
    at Function._callee$ (/cm-frontend-react/.next/dist/pages/product-listing.js:411:54)
    at tryCatch (/cm-frontend-react/node_modules/regenerator-runtime/runtime.js:65:40)
    at Generator.invoke [as _invoke] (/cm-frontend-react/node_modules/regenerator-runtime/runtime.js:303:22)
    at Generator.prototype.(anonymous function) [as next] (/cm-frontend-react/node_modules/regenerator-runtime/runtime.js:117:21)
    at step (/cm-frontend-react/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /cm-frontend-react/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
    at propagateObWrapper (/cm-frontend-react/node_modules/opbeat/lib/instrumentation/async-hooks.js:453:25)
    at instrumented (/cm-frontend-react/node_modules/opbeat/lib/instrumentation/index.js:102:27)
    at /cm-frontend-react/node_modules/opbeat/lib/instrumentation/async-hooks.js:490:70
    at instrumented (/cm-frontend-react/node_modules/opbeat/lib/instrumentation/index.js:102:27)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:169:7)

<HierarchicalMenu
     key="categories"
     attributes={[
     'hierarchicalCategories.lvl0',
     'hierarchicalCategories.lvl1',
     'hierarchicalCategories.lvl2',
     'hierarchicalCategories.lvl3',
     'hierarchicalCategories.lvl4',
     'hierarchicalCategories.lvl5',
     'hierarchicalCategories.lvl6'
     ]}
     showParentLevel={false}
/>

My Hierarchical Widget looks like the above.

[Haroenv]

Do you have multiple <HierarchicalMenu>s?

[harshmaur]

Nope, My whole project has just one mention of which is on the product Listing page. I am wondering if this could be an issue with SSR, since initially it renderes on the server and then frontend kicks in which replaces the whole instance and before unmounting the previous one, the new one mounts.

[mthuret]

Hi @harshmaur,

I tried adding:

<HierarchicalMenu
              attributes={['category', 'sub_category', 'sub_sub_category']}
            />

to our next-app recipes and it works fine.

Maybe you can do a small repo that is reproducing your issue? Are you doing something specific with the attributes?

Thanks!

[harshmaur]

Hi @mthuret Yes, I understand that it works fine, it works fine for me as well. However in my production application, many users are using it having different configurations so its coming for them. Sometimes it came for us as well during development. Kind of super hard to reproduce. I am trying to do it. However I am not sure how to fix it properly.

[mthuret]

Well I'm not sure that's related to SSR then, as it should have failed with the basic example I tried.
This error happens if two hierarchical menu widgets having the same attributes are mounted at the same time. That's why I was asking if you have some kind of dynamic way of setting the attributes? Also are you doing some kind of conditional display?

[harshmaur]

Okay so this is kind of weird, its coming up when the server is running on an ubuntu machine. While on a mac machine its fine. I dont know what could be the reason.

[Haroenv]

Do you have a different version of node on these?

[harshmaur]

The server, my mac machine and the ubuntu machine all run on 8.1.2
Also I added NoSSR around the hierarchical refinement and now its fine. So I am assuming there is something going on with NextJS specifically too since, all of my pages stop working when that error comes even though the code is only on product-listing page.

[mthuret]

@harshmaur I'll tried with our example hosted on zeit to see what's going on.

If you have a fallback in the mean time that's good!

[mthuret]

Should be ok on 4.1.0-beta.5. Can you try @harshmaur?

[harshmaur]

Thanks a lot, I will check.

[harshmaur]

Works!

[discussion4all]

Well I'm not sure that's related to SSR then, as it should have failed with the basic example I tried.
This error happens if two hierarchical menu widgets having the same attributes are mounted at the same time. That's why I was asking if you have some kind of dynamic way of setting the attributes? Also are you doing some kind of conditional display?

what if I specifically want 2 hierarchical menu widgets having the same attributes. can I somehow do that?

[Haroenv]

@discussion4all could you open a new issue with reproducible sandbox? We have a template available for that purpose here. Having two identical hierarchical menus shouldn't be an issue