react-instantsearch Could not import ReactDOMServer

🐛 Bug description

ERROR	Error: Could not import ReactDOMServer.
    at file:///var/task/node_modules/.pnpm/[email protected]_fzyfqr3mixyxftdbf7mmfo2jb4/node_modules/react-instantsearch-hooks-server/dist/es/getServerState.js:166:13
    at async getServerSideProps (/var/task/site/.next/server/pages/algolia.js:98:25)
    at async Object.renderToHTML (/var/task/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/render.js:512:20)
    at async doRender (/var/task/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/base-server.js:642:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/var/task/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/base-server.js:747:28)
    at async /var/task/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/server/response-cache/index.js:80:36 {  page: '/algolia'}
RequestId: 3de89872-78cc-4717-adcf-7b57a96a1de9 Error: Runtime exited with error: exit status 1
Runtime.ExitError

I'm using react-instantsearch-hooks-server with Next.js (vercel/commerce) and I have this error only in production (Vercel), in local dev environment it works as expected. The error started to appear with React 18, with 17 it worked.

🔍 Bug reproduction

I tried to reproduce the bug in a codesandbox but it doesn't happen. I've setup a repo with an example at https://github.com/slackerzz/vercel-commerce It is a clean vercel/commerce with a route /algolia where i use the ssr provider. The code is availabel at https://github.com/slackerzz/vercel-commerce/blob/main/site/pages/algolia.tsx The index used is from https://codesandbox.io/s/github/algolia/react-instantsearch/tree/master/examples/hooks-next

In a local environment running pnpm dev the /algolia route works as expected:

Schermata 2022-09-23 alle 14 40 16

After deploying the app to Vercel the same route returns a 500 error

Environment

React InstantSearch Hooks version: 6.33
React version: 18.2.0
Next.js version: 12.3.1

Additional context

Sep 23 '22 13:09 slackerzz

I feel like this is a new bug that was already attempted to be fixed in #3618, does that PR work for you? the situation is complicated as Webpack will try to import both the react 17 and react 18 import if it's a literal import, while pnpm removes the package if not in a literal import

Sep 23 '22 13:09 Haroenv

Thank you @Haroenv , adding a pnpm patch with the changes from #3618 fixes the problem

Sep 23 '22 15:09 slackerzz

Thanks for confirming, we'll look more into it

Sep 23 '22 15:09 Haroenv

Thank you @Haroenv , adding a pnpm patch with the changes from #3618 fixes the problem

Sadly, it doesn't work for me. Although I don't get Error: Could not import ReactDOMServer. anymore, page seems to load endlessly and throws 504 time-out. Locally no issues.

My environment:

React InstantSearch Hooks version: 6.36
React version: 18.2.0
Next.js version: 12.3.1

Any upcoming fixes @Haroenv?

Oct 12 '22 15:10 fireseasonnow

Are you also using pnpm @whitebackdoor ? if so you can use the patch

Oct 12 '22 15:10 Haroenv

I'm using pnpm but patch doesn't fix the issue for me.

Oct 12 '22 15:10 fireseasonnow

Please open a new issue with reproduction in that case, I guess it might not be the same issue @whitebackdoor

Oct 12 '22 15:10 Haroenv