createServerRootMixin throws error on Nuxt + Heroku

I managed to set up Vue Instantsearch on Nuxt by following this helpful tutorial.

You could see the screenshot below where it works nicely on “dev” or “prod” locally.

The issue happened when I deployed my site to Heroku.

The component isn’t rendered and when I checked the devtool, it gives me the following error:

Error: "createServerRootMixin requires searchClientandindexName in the first argument"

Any idea how to fix this? It works locally in both dev and prod mode.

The website url is https://www.clinicnearme.sg/

Upon further investigation, seems like by adding the AisInstantSearchSsr, it’s causing more issues on the page.

For example:

  1. The “typed js” component. that’s used to animate the heading
  2. The SVG component for the logo aren’t rendered as well.

If I navigate to other page such as https://www.clinicnearme.sg/browse, the SVG logo is rendered normally.

Hi there!

This error is a precondition that throws whenever the createServerRootMixin module doesn’t have access to either the searchClient or the indexName.

If this works well on your machine, but not once you deploy to Heroku, one likely error is that you may be retrieving this data from an environment-specific source, such as an .env file. If that’s the case, but you didn’t set the variables in your CI environment, then that could explain the issue.

Would you be able to provide a link to your source code so we can investigate further?

1 Like

Hi Sarah,

I’ve added the necessary data onto the Heroku’s env.

It will take some time for me to be able to share the complete source code. But if it helps, I added a “hidden” div on the homepage after the main heading where I printed the value of searchClient and indexName which seems to be fine, as the env vars are passed to the code correctly.

You could inspect the homepage to find the value:

https://www.clinicnearme.sg/

As for the createServerRootMixinbit, these are the codes:

const searchClient = algoliasearch(
  process.env.ALGOLIA_ID,
  process.env.ALGOLIA_KEY
)

const indexName = process.env.ALGOLIA_INDEX

mixins: [
    createServerRootMixin({
      searchClient,
      indexName,
    }),
  ],

Hi Sarah, upon further investigation on the env vars, I added the env in nuxt.config.js following this tutorial rather than getting the env from .env directly and it seems to work.

The autocomplete now is working on https://www.clinicnearme.sg/

Thanks for putting me in the right direction!