Components does not work in a fresh Nuxt 3 project

[Jakub Andrzejewski]

Bug 🐞

What is the current behavior?

Make a sandbox with the current behavior

1. Create new nuxt 3 project.
2. Follow the tutorial here https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/vue/#with-nuxt (but use vue-instantsearch/vue3/es instead)
3. See the error

Template: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/vue-instantsearch

What is the expected behavior?

It should render the components correctly

Does this happen only in specific situations?

Always

What is the proposed solution?

Review this hogan library.

What is the version you are using?

"algoliasearch": "^4.11.0",
"vue-instantsearch": "^4.3.1"

Always try the latest one before opening an issue.

[Haroen Viaene]

Thanks for leaving this comment, I haven't yet had the chance to try out nuxt 3 since it's out of private beta.

However, hogan should not even be imported, as it's not imported in files used by Vue InstantSearch (only vanilla) 🤔

[Haroen Viaene]

The main issue seems to be that ESM is set up to be more strict in this version of vite, so we'll need to do the same changes as algolia/react-instantsearch#3232 and algolia/react-instantsearch#3257

If I did those changes manually I have a working project (no server side rendering yet): https://github.com/Haroenv/nuxt3-vue-instantsearch-demo

[Jakub Andrzejewski]

Thanks @Haroenv for the update. Are there any plans to update vue instantsearch accordingly to your changes in the demo repo similar to react-instantsearch? Or should I use the package with patch for the nuxt module for algolia?

[Haroen Viaene]

We hadn't anticipated any changes needed, so this still needs to become prioritised etc. I'd expect a couple weeks before we can finish this out of the box, the patches would work for the time being, or a pull request is also welcome of course!

[Jakub Andrzejewski]

I see. Should I create a PR with the changes from your repository? I am not sure if that won't break the current package for Vue 3 projects though

[Haroen Viaene]

the changes I made in the patches should be done in the style of algolia/react-instantsearch#3232 and algolia/react-instantsearch#3257 if you would like to do a pull request, including the babel plugin. That would be very helpful!

[Jakub Andrzejewski]

I see @Haroenv I tried it out and the patch seems to solve the problem for simple Nuxt app. However I cannot use it to apply this patch to vue-instantsearch to a root node_modules (as I have created a nuxt 3 module and would like to ship vue-instantsearch with it). Unless you know how to apply such a patch from the nested package level?

I looked at the PRs you linked and I think this mayb be too difficult for me as I have been just using vue-instansearch so I have no knowledge how it was built. And considering how fast you applied these changes, I have been thinking that maybe you could release a new version with these changes. BTW do you have some roadmap for the upcoming features?

I have the code ready for the new version of Algolia module for Nuxt (that will involve support for Vue-instantsearch) and it is working really well. The last step needed before releasing are the changes you listed in a previous message that needs to be applied to correctly build the package.

[Haroen Viaene]

That makes sense! As it's a fair amount of things to change and needs to be tested, It will take a bit of time before it can be fully finished, but glad to hear it works in your use case with those fixes.

As an in-between solution, I wonder if you can use the /cjs build, as it's less strict than esm?

[Jakub Andrzejewski]

Nuxt recommends to use ESM modules so I am not sure if I can use CJS here. https://v3.nuxtjs.org/concepts/esm/

I have tried to include vue-instantsearch and instantsearch.js/es in transpile options but it makes the hogan error appearing again. Maybe you will have more luck trying it out.

[Haroen Viaene]

We have now planned this issue for early February, thanks for standing by!

[Jakub Andrzejewski]

Awesome, I will be following the progress of that. If you will need some testing it out on Nuxt 3 let me know. I will be glad to help :)

[Chris Jayden]

Happy to test as well! Running into the same issue

[CapitaineToinon]

I managed to get vue-instantsearch + MeiliSearch to work on a Nuxt 3 project by installing

"@meilisearch/instant-meilisearch": "^0.6.0",
"instantsearch.css": "^7.4.5",
"vue-instantsearch": "^4.3.2"

Installing InstantSearch as a client side only plugin using plugins/instantSearch.client.ts (notice the .client in the filename. I followed the Vue Plugin section of nuxt's documentation) :

import { defineNuxtPlugin } from "#app";
import InstantSearch from "vue-instantsearch/vue3/es";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(InstantSearch);
});

When trying with a regular plugin, I was having the m.default is not a function error but that's not the case with client side only. And finally created a simple modal search exemple like this

<script setup lang="ts">
import "instantsearch.css/themes/satellite-min.css";
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";

const searchClient = instantMeiliSearch("http://localhost:7700", "");
</script>

<template>
  <div class="modal modal-open">
    <div ref="modal" class="modal-box">
      <ais-instant-search :search-client="searchClient" index-name="game">
        <ais-search-box />
        <ais-hits>
          <template v-slot:item="{ item }">
            <h2>{{ item.name }}</h2>
          </template>
        </ais-hits>
      </ais-instant-search>
    </div>
  </div>
</template>

And this gives me a simple search modal. I did not have to add vue-instantsearch to the transpile option in my nuxt config.

I haved not tried with algolia as the searchClient though.

[Haroen Viaene]

I haven't yet tried a nuxt 3 setup myself yet, but I think, based on experience from other libraries that #1111 should solve this issue. You can try it out by following the instructions in the comment left by codesandbox. Don't hesitate replying to say it worked or it didn't yet work.

cc @CapitaineToinon, @Baroshem, @multiplehats as you asked to be pinged when an official solution can be tried

[Haroen Viaene]

I have tried out Nuxt 3 now, and have a working solution user land like this: https://github.com/Haroenv/nuxt3-vue-instansearch-example/blob/main/search.vue#L26-L61

[Jakub Andrzejewski]

You are completely right! I so make it possibile to have these components to work in my module (now moved to nuxt-community) https://github.com/nuxt-community/algolia-module

Thanks! ❤️

[Haroen Viaene]

The release including those fixes will be done in a couple minutes @Baroshem :)