Error: Unable to retrieve InstantSearch's server state in `getServerState()`. Did you mount the <InstantSearch> component?

[sasastevcic]

🐛 Bug description

Hey folks, having some issues with SSR and the getServerState function. I followed the steps from the docs and it's still the same. I cannot set Sandbox since it's a private repo, and if I do it from scratch I cannot reproduce the issue. I'll provide some screenshots below, maybe you see something I don't.

💭 Expected behavior

Is there any other way to connect the provider with the InstantSearch instance? What is the other best way to fetch initial results on the serverSide?

🖥 Screenshots

Environment

• React InstantSearch Hooks version: 6.31.1
• React version: 17.0.2
• Browser: Brave Version 1.41.100 Chromium: 103.0.5060.134 (Official Build) (x86_64)
• OS: macOS

[FabienMotte]

Hello @sasastevcic!

It's hard to tell without a reproduction Sandbox. By looking at your screenshots, everything seems correct as described in the guide "Server-Side Rendering with React InstantSearch Hooks > With Next.js" .

Are you importing <InstantSearchSSRProvider> and <InstantSearch> components from the react-instantsearch-hooks-web package? Did you try to replace the content of the <InstantSearch> component with a basic widget to see if the error is still happening?

[sasastevcic]

Hey @FabienMotte, thanks for the quick response!

Yes, all imports are from react-instantsearch-hooks-web, I tried with react-instantsearch-hooks as well, but no luck. I used exactly the same code from the docs. I removed all the additional project-related stuff from the _app.tsx and copied index.tsx. Here are some additional screenshots, I know it is not really helpful.

It's the same even without widgets, and I tried also API keys from the official example.

Not sure what else I could try, it just seems that the provider cannot find InstantSearch as children.

[FabienMotte]

Hi @sasastevcic!

Could you give me (FabienMotte) access to your repository (or a repo with a minimal boilerplate as you have in your last screenshots)? That would help figure out the cause of the issue.

Thank you!

[octalpixel]

Hi, were you guy able to solve this ? Getting the same error atm

[FabienMotte]

Hi @octalpixel! Could you provide a reproduction sandbox or repository?

Thank you!

[sasastevcic]

Hey @FabienMotte,

Sorry for the late response.

Our code is on GitLab, can you share your GitLab account? Or if it's easier for you, I can send you a zipped repo. I just need your email address.

Thanks!

[FabienMotte]

Hi @sasastevcic, my GitLab account: https://gitlab.com/FabienMotte

Thanks!

[sasastevcic]

Hey @FabienMotte,

We added you to the repo. Let me know if all good

Thanks

[octalpixel]

Hey @FabienMotte , You got added to the repo. Let me know how we can move forward with this. Thanks!

[filippolcr]

Same error here. Please @FabienMotte, report if you find something helpful. 🙏

[FabienMotte]

Hey @sasastevcic and @octalpixel, thanks for the access to the repos, @aymeric-giraudet should take a look a the issue tomorrow.

Thanks for your patience!

[octalpixel]

Hey @sasastevcic and @octalpixel, thanks for the access to the repos, @aymeric-giraudet should take a look a the issue tomorrow.

Thanks for your patience!

Great thanks @FabienMotte . Let us know how we can keep communication to better explain the issue

[aymeric-giraudet]

Hi @octalpixel, I checked for you and I would like to know which page has problems exactly ? It works fine for me on pages/product/[id].js. I see that pages/category/[slug].js imports InstantSearch from react-instantsearch-dom which could be the problem I guess. Can you provide more info ? Also your repo did not include any lockfile like package-lock.json or yarn.lock, it would be nice to have one so I have the exact same versions as you do.

Checking for Saša now :)

[octalpixel]

Hi @octalpixel, I checked for you and I would like to know which page has problems exactly ? It works fine for me on pages/product/[id].js. I see that pages/category/[slug].js imports InstantSearch from react-instantsearch-dom which could be the problem I guess. Can you provide more info ? Also your repo did not include any lockfile like package-lock.json or yarn.lock, it would be nice to have one so I have the exact same versions as you do.

Checking for Saša now :)

@aymeric-giraudet the category page is the issue you mentioned. The error I was able to fix this by adding the react-instantsearch-dom but it is still not getting SSR and the HTML is empty.

[aymeric-giraudet]

@sasastevcic I was able to reproduce the issue. Can you try updating react-instantsearch-hooks-server and react-instantsearch-hooks-web to 6.33.0 ? It seems to solve it :)

[aymeric-giraudet]

@octalpixel Maybe it did work for me because there was no lockfile, can you try to either update dependecies to their latest versions or delete your lockfile and node_modules and rerun an install ?

[sasastevcic]

Hey @aymeric-giraudet ,

It's still the same for me. Updated both packages, rimrafed modules, removed lock file, used boilerplate code from the example...

Not sure what else can I try

[aymeric-giraudet]

Hi @sasastevcic,

Still works for me like this, although I had to remove storyblok stuff cause I don't have API key.

I replaced pages/candidates/jobs/index.tsx with the following :

import algoliasearch from 'algoliasearch'
import {
  InstantSearch,
  InstantSearchServerState,
  InstantSearchSSRProvider
} from 'react-instantsearch-hooks-web'
import { getServerState } from 'react-instantsearch-hooks-server'
import { history } from 'instantsearch.js/es/lib/routers/index.js'
import { GetServerSidePropsContext } from 'next'

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
)

type SearchPageProps = {
  serverState?: InstantSearchServerState
  serverUrl: string
}

export default function SearchPage({
  serverState,
  serverUrl
}: SearchPageProps) {
  return (
    <InstantSearchSSRProvider {...serverState}>
      <InstantSearch
        searchClient={searchClient}
        indexName="instant_search"
        routing={{
          router: history({
            getLocation: () =>
              (typeof window === 'undefined'
                ? new URL(serverUrl)
                : window.location) as Location
          })
        }}
      >
        {/* Widgets */}
      </InstantSearch>
    </InstantSearchSSRProvider>
  )
}

export async function getServerSideProps({ req }: GetServerSidePropsContext) {
  const protocol = req.headers.referer?.split('://')[0] || 'https'
  const serverUrl = `${protocol}://${req.headers.host}${req.url}`
  const serverState = await getServerState(<SearchPage serverUrl={serverUrl} />)

  return {
    props: {
      serverState,
      serverUrl
    }
  }
}

And running this bash command to input versions :

node --eval="process.stdout.write(require('./node_modules/react-instantsearch-hooks-web/package.json').version)" && echo && node --eval="process.stdout.write(require('./node_modules/react-instantsearch-hooks-server/package.json').version)" && echo && node --eval="process.stdout.write(require('./node_modules/instantsearch.js/package.json').version)"

Returns this :

6.33.0
6.33.0
4.46.2%                                                                                                                  

Maybe you can also try to rm -rf .next ? Are you running npm run dev ?

[sasastevcic]

Hey @aymeric-giraudet ,

Still no luck :disappointed:

Can you please checkout to the WEBP-000_getServerState-implementation and see if it's working without any changes?

Node eval returns the same versions as yours and tried with rm -rf .next. Yes, running npm run dev

Thanks!

[aymeric-giraudet]

Seems like our package-lock.json are different, I copied the one I had to yours and it now works. https://gist.githubusercontent.com/aymeric-giraudet/33e3517bd9080ffb3e9eef23a33b7f46/raw/a6ea0cae48a77785037359462d4beca92224bcee/gistfile1.txt try with this please, in the meantime I'll investigate why it does that

[sasastevcic]

Hey @aymeric-giraudet,

It does work with your lock file :tada:

Thanks a lot! I'll see also what can be different. But please, let me know if you find something as well.

Can you share your node -v/npm -v?

Cheers

[aymeric-giraudet]

Yup @sasastevcic :

• node v16.16.0
• npm v8.11.0

[FabienMotte]

Hey @aymeric-giraudet,

It does work with your lock file 🎉

Thanks a lot! I'll see also what can be different. But please, let me know if you find something as well.

Can you share your node -v/npm -v?

Cheers

You can try to run npm dedupe in your project folder. I tried on my side and it solved the dependencies nesting issue in the lock file.

Hope that helps!

[octalpixel]

@octalpixel Maybe it did work for me because there was no lockfile, can you try to either update dependecies to their latest versions or delete your lockfile and node_modules and rerun an install ?

I was able to fix the issue in a new implementation. If you check the dev branch, you will find "category" and "category-old". The latter does not seem to be working with the new versions either. Can you review both and see what messed up if you get the time?

@aymeric-giraudet also what version are you using ?

[sasastevcic]

Hey @aymeric-giraudet @FabienMotte,

It's all good now. Thanks a lot! :raised_hands: