Error while using nuxt/algolia+vue-instant-search on server side

[Dante3003]

I try to use this library with vue-instant-search and copy code example from docs: algolia.nuxtjs.org/advanced/vue-in... but get error: XMLHttpRequest is not defined.

Version

@nuxtjs/algolia: 1.5.1 nuxt: 3.4.0

Reproduction Link

https://codesandbox.io/p/sandbox/cranky-williamson-71kdm0?file=%2Fapp.vue%3A7%2C11

Steps to reproduce

Write code from docs about nuxt/algolia and vue-instant-search with ssr and run project

What is Expected?

vue-instant-search and algolia search work with SSR

What is actually happening?

got error on server side: XMLHttpRequest is not defined. And nuxt/algolia not working on server side

[Bcavez]

Linked: https://github.com/nuxt-modules/algolia/issues/132#issuecomment-1515820905

[Baroshem]

Hey @Dante3003

Check out the comment from @Bcavez. There is a thread about using VueInstantSearch with Nuxt. Also, You seem to be using Algolia only as useAlgoliaRef (which under the hood does nothing more thatn wrapping algoliasearch so this error does not seem to be related to the module itself but rather a package.

[Dante3003]

@Baroshem So you are saying that this error is related to the vue-instant-search library?

[Baroshem]

More like it is not related to the module. I checked your code and you are not using module specific composables.

Because of that you are using just official algoliasearch package and vue instantsearch without any modification.

The error you get is related to the fact that you are trying to use client library on the server

If you want to mitigate this issue you would need to use algolisearch with certain transporter.

Check out the source code of the useAsyncAlgoliaSearch or the transporter section in the official docs.

This should help you get the your code working :)

[Dante3003]

But i copy this code from docs about using nuxt/algolia and vue-instantsearch with SSR. It says that this method works in SSR

[Baroshem]

I see.

As mentioned in the comment in the linked issue. I think that you need to use different environment for registering algolia in that case. The default one uses the browser. You can check how to change the transporter in the usage of useAsyncAlgoliaSearch like following: https://github.com/nuxt-modules/algolia/blob/f6e1135c217fb532c73945b9f9d78f51c5ac869d/src/runtime/composables/useAsyncAlgoliaSearch.ts#L19

[camaech]

@Dante3003 I was able to make this work by doing the following:

const { data: algoliaState } = await useAsyncData('algolia-state', async () => {
    if (process.server) {
        const nuxtApp = useNuxtApp();
        nuxtApp.$algolia.transporter.requester = (
            await import('@algolia/requester-node-http').then(
                (lib) => lib.default || lib
            )
        ).createNodeHttpRequester();
    }
    return instantsearch.findResultsState({
        // IMPORTANT: a component with access to `this.instantsearch` to be used by the createServerRootMixin code
        component: {
            $options: {
                components: {
                    AisInstantSearchSsr,
                    AisIndex,
                    AisConfigure,
                    AisRefinementList,
                    AisHits,
                    AisHighlight,
                    AisSearchBox,
                    AisStats,
                    AisPagination,
                },
                data() {
                    return { instantsearch };
                },
                provide: { $_ais_ssrInstantSearchInstance: instantsearch },
                render() {
                    return h(AisInstantSearchSsr, null, () => [
                        // Include any vue-instantsearch components that you use including each refinement attribute
                        h(AisHits),
                    ]);
                },
            },
        },
        renderToString,
    });
});

[Baroshem]

@Dante3003

Let me know if the answer from @camaech works for you. I will then merge the PR assigned to it with corrected docs :)

[Dante3003]

@Baroshem Yes, the way @camaech suggested solves the problem.

[Baroshem]

Awesome. I will merge this PR -> https://github.com/nuxt-modules/algolia/pull/149 as it includes proper docs about it.

Thank you for the info.

I will close this issue then.

Happy coding :)