React InstantSearch HierarchicalMenu always throwing error w/ Next.js

[popjmbenfield]

🐛 Current behavior

I am working in a Next.js 13.0.4 project (TypeScript) that uses the Algolia React InstantSearch package and no matter how this HierarchicalMenu is used, it will always throw an error of:

Error: Cannot declare two hierarchical facets with the same name: '...'

Here is the source (which is as barebones as possible):

import { InstantSearch, HierarchicalMenu } from 'react-instantsearch-dom';
import { SearchIndex } from '@/lib/types/algolia';
import algoliasearch from 'algoliasearch/lite';
import config from '@/config/public';
import { useState } from 'react';

const searchClient = algoliasearch(
    config.algolia.application_id,
    config.algolia.search_api_key,
);

export default function ListingsHome() {

    const [ searchIndex, setSearchIndex] = useState<SearchIndex>('xxxx');

    return (
        <InstantSearch
            key={searchIndex}
            indexName={searchIndex}
            searchClient={searchClient}
        >
            <HierarchicalMenu
                attributes={[
                    'categories.grouped',
                    'categories.known_as',
                    'categories.specific'
                ]}
            />
        </InstantSearch>
    );

}

No matter what I change, which attributes I use, the amount of attributes I use, on load I will still get the above error. The faceting is properly setup on Algolia, it's the only other component used on this page, and the code is as simple as it gets which is why I am so confused it's throwing this error.

I also created another Next.js app with updated versions:

• next 13.1.6 vs 13.0.4
• typescript 4.9.5 vs 4.9.3
• algoliasearch 4.14.3 vs algoliasearch 4.14.2
• react-instantsearch-dom 6.39.0 vs react-instantsearch-dom 6.38.2

And the same error occurs w/ the same exact code above.

🔍 Steps to reproduce

1. Create a Next.js 13 App w/ TypeScript
2. Install algoliasearch & react-instantsearch-dom
3. Use a HierarchicalMenu component w/ React InstantSearch

Live reproduction

(Code Above)

💭 Expected behavior

The HierarchicalMenu component should render without any error occurring, since the code above is valid.

Package version

algoliasearch 4.14.2, react-instantsearch-dom 6.38.2

Operating system

Windows 10 Pro 19044.2486

Browser

Chrome 109

Code of Conduct

• I agree to follow this project's Code of Conduct

[Aymeric Giraudet]

Hi @popjmbenfield,

Are you using React strict mode ? You can check in your next.config.js file if the option reactStrictMode is set to true.
If that's the case, this is probably the reason why, the component mounts twice so this problem happens, and we haven't updated react-instantsearch and react-instantsearch-dom to handle strict mode as they are legacy versions which will be deprecated soon in favor of the hooks version.

Is there a particular reason you are using react-instantsearch-dom rather than the hooks version ? If you're still migrating to the newer lib I think if it's just one page with a HierarchicalMenu only you can probably just use react-instantsearch-hooks-web and it could work right off the bat, plus with Next.js doing code splitting page by page and tree shaking the bundle should stay pretty lean.

[popjmbenfield]

@aymeric-giraudet

Thank you for the response, that was exactly it. I didn't expect reactStrictMode to affect react-instantsearch-dom. Also, I will be taking your advice and be using the react-instantsearch-hooks-web version of Algolia InstantSearch as well, since it's almost a drop-in replacement which means I can keep reactStrictMode set true for ease of debugging, along with a good bit of code. Thanks for the help!