Error while using nuxt/algolia+vue-instant-search on server side
Dante3003 opened this issue · comments
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
Linked:
#132 (comment)
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.
@Baroshem
So you are saying that this error is related to the vue-instant-search library?
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 :)
But i copy this code from docs about using nuxt/algolia and vue-instantsearch with SSR. It says that this method works in SSR
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:
@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,
});
});
Let me know if the answer from @camaech works for you. I will then merge the PR assigned to it with corrected docs :)
Awesome. I will merge this PR -> #149 as it includes proper docs about it.
Thank you for the info.
I will close this issue then.
Happy coding :)