react-instantsearch-hooks-server doesn't work with react 18

[kimulisiraj]

🐛Upgrade react-instantsearch-hooks-server to work with react 18

🖥 Screenshots

Environment

• OS: MacOS
• Browser: Chrome
• Node v17.8.0

package.json

  "dependencies": {
   "algoliasearch": "4.11.0",
    "react-instantsearch-hooks": "6.24.0",
    "react-instantsearch-hooks-server": "^6.24.0",
    "react-instantsearch-hooks-web": "6.24.0",
}
"devDependencies": {
    "@next/eslint-plugin-next": "^12.0.10",
    "@tailwindcss/line-clamp": "^0.4.0",
    "@types/node": "17.0.30",
    "@types/react": "18.0.8",
    "@types/react-dom": "18.0.3",
    }

[Haroenv]

Very annoying, in React 17 only ./server.js works, while in React 18 only ./server is added to the exports. I'll need to look into whether this should be dependency injected instead, if there's a workaround or some other solution.

For the time being I recommend the following:

1. use React 18
2. install patch-package
3. Add the following patch:

diff --git a/node_modules/react-instantsearch-hooks-server/dist/es/getServerState.js b/node_modules/react-instantsearch-hooks-server/dist/es/getServerState.js
index 23b1503..328227a 100644
--- a/node_modules/react-instantsearch-hooks-server/dist/es/getServerState.js
+++ b/node_modules/react-instantsearch-hooks-server/dist/es/getServerState.js
@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { isIndexWidget } from "instantsearch.js/es/widgets/index/index.js";
 import React from 'react';
-import ReactDOM from "react-dom/server.js";
+import ReactDOM from "react-dom/server";
 import { InstantSearchServerContext, InstantSearchSSRProvider } from 'react-instantsearch-hooks';
 
 /**

A proof of this working is https://codesandbox.io/s/omyt57?file=/patches/react-instantsearch-hooks-server%2B6.24.0.patch

For checking whether a solution we have works, this is a reproduction of the issue (updated dependencies of main example): https://codesandbox.io/s/old-sun-2v2ru9

[foshfue]

Very annoying, in React 17 only ./server.js works, while in React 18 only ./server is added to the exports. I'll need to look into whether this should be dependency injected instead, if there's a workaround or some other solution.

For the time being I recommend the following:

1. use React 18
2. install patch-package
3. Add the following patch:

diff --git a/node_modules/react-instantsearch-hooks-server/dist/es/getServerState.js b/node_modules/react-instantsearch-hooks-server/dist/es/getServerState.js
index 23b1503..328227a 100644
--- a/node_modules/react-instantsearch-hooks-server/dist/es/getServerState.js
+++ b/node_modules/react-instantsearch-hooks-server/dist/es/getServerState.js
@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { isIndexWidget } from "instantsearch.js/es/widgets/index/index.js";
 import React from 'react';
-import ReactDOM from "react-dom/server.js";
+import ReactDOM from "react-dom/server";
 import { InstantSearchServerContext, InstantSearchSSRProvider } from 'react-instantsearch-hooks';
 
 /**

A proof of this working is https://codesandbox.io/s/omyt57?file=/patches/react-instantsearch-hooks-server%2B6.24.0.patch

For checking whether a solution we have works, this is a reproduction of the issue (updated dependencies of main example): https://codesandbox.io/s/old-sun-2v2ru9

Hey Haroenv,
I tried your solution but I still get the same error. Do you have any updates?

[Haroenv]

@foshfue do you have a github repo or similar with your setup that still fails after that patch?

[kamami]

Same issue, any ideas when this fix will be available? I am using the workaround for now

[Haroenv]

it will be released today :)