React Instantsearch Hooks Server: Module not found react-dom error is thrown when usign webpack

[francisconeves97]

🐛 Bug description

When importing the getServerState function from react-instantsearch-hooks-server the following error is thrown:

Module not found: Package path ./server.js is not exported from package ./node_modules/react-dom (see exports field in ./node_modules/react-dom/package.json)

🔍 Bug reproduction

Steps to reproduce the behavior:

1. Clone the hooks-ssr example: https://github.com/algolia/react-instantsearch/tree/v6.22.0/examples/hooks-ssr
2. Update package.json with the following dependencies (note that React 18 is being used):

 "dependencies": {
    "algoliasearch": "4.11.0",
    "instantsearch.css": "7.4.5",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-instantsearch-hooks": "6.22.0",
    "react-instantsearch-hooks-server": "6.22.0"
  },
  "devDependencies": {
    "@types/node": "17.0.36",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.5",
    "eslint": "8.16.0",
    "eslint-config-next": "12.1.6",
    "typescript": "4.5.4"
  }

3. Install the dependencies
4. Start the application
5. See the error stated above being thrown

Live reproduction:

https://codesandbox.io/s/delicate-https-ekihqc?file=/package.json

💭 Expected behavior

The application should load normally.

Environment

• React InstantSearch version: 6.22.0
• React version: 18.1.0

Additional context

I got this issue on a Next.js application. Next.js uses webpack and it seems that webpack performs some static analysis of imports at build time (ref). Since there are two dynamic imports on the getServerState function to try to import the react-dom/server module from different paths, webpack will throw an error at build time because the react-dom/server.js does not exist. It seems that this might be what is causing the problem.

[Haroenv]

Only from 6.25.0 onwards react 18 was supported for imports. I'll close this issue once the example on the documentation is updated to use a later version

[francoischalifour]

We originally raised this issue in the Next.js repo, but it seems to come from webpack: webpack/webpack#13865.

It looks like their path resolution for dynamic imports that rely on exports in package.json is wrong, which was introduced in React 18 in facebook/react#23252.

[francisconeves97]

While the webpack issue is not closed can this be solved by replacing the imports to use an expression?

[Haroenv]

Unfortunately we can't do that, because the import path is different for v17 and v18, react-dom/server.js vs react-dom/server, putting us in a deadlock to either not support v18 or only support v18. I couldn't yet find how other libraries dealt with this

[francisconeves97]

From what I understood in that webpack discussion I think we could still support both versions if we did something like this:

const react18ServerModule = 'react-dom/server'
const preReact18ServerModule = 
'react-dom/server.js'

// …

import(react18ServerModule).catch(() => {}),
import(preReact18ServerModule)y.catch(() => {}),

However I wasn’t able to test this and right now I am on mobile, but just wanted to better explain my previous comment

[francisconeves97]

In next.js it seems that this is also solved in other way: https://github.com/vercel/next.js/blob/6108f10799b46bc0ef97373c913e23714e135942/packages/next/server/render.tsx#L92

(I think it looks cleaner if it works in this library)

[Haroenv]

I haven't tried it yet, but made a draft PR converting the imports to expressions #3515

EDIT: have tried it out since, and seems to work as expected

[francisconeves97]

Thank you for the quick fix!

[francoischalifour]

The fix was released in v6.28.0. Let us know if the update is successful on your side 🙂

Thanks again!