Fails to dynamic import a module in a mono repo

[FabienMotte]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

$ npx --no-install next info
    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 20.6.0: Tue Apr 19 21:04:45 PDT 2022; root:xnu-7195.141.29~1/RELEASE_X86_64
    Binaries:
      Node: 16.10.0
      npm: 7.24.0
      Yarn: 1.18.0
      pnpm: N/A
    Relevant packages:
      next: 12.1.6
      react: 18.1.0
      react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

It fails to compile when trying to run a React InstantSearch Hooks with Next.js (and React 18) example in a mono repo: https://github.com/algolia/react-instantsearch/tree/feat/react-18-examples/examples/hooks-next

In React InstantSearch Hooks server module, we use two dynamic imports to import the correct react-dom/server dependency because the import varies depending on the installed React version (17 vs 18).

Next.js fails to resolve the first import and catch doesn't get called.

Expected Behavior

Running the example locally or in a CodeSandbox, everything is working fine: https://codesandbox.io/s/friendly-swartz-jfk4nj

Is Next.js failing to resolve the dynamic import because of the mono repo architecture?

To Reproduce

Steps to reproduce the issue in the mono repo:

1. Clone the repo: git clone git@github.com:algolia/react-instantsearch.git
2. Checkout the relevant branch: cd react-instantsearch && git checkout feat/react-18-examples
3. Install the dependencies: yarn
4. Build the packages: yarn build
5. Run the example: yarn workspace hooks-next-example dev or cd examples/hooks-next && yarn dev
6. Open the preview: http://localhost:3000/

Thank you!

[balazsorban44]

I believe this is not a Next.js issue, but rather how Node.js tries to resolve your imports here:

https://github.com/algolia/react-instantsearch/blob/76b1d3e2f16763511f56d64933386e65a52c743b/packages/react-instantsearch-hooks-server/src/getServerState.tsx#L184-L204

You can do conditional loading, something like this should work:

React.version.startsWith("18")
  ? import("react-dom/server")
  : import("react-dom/server.js")

[FabienMotte]

Hello @balazsorban44 and thanks for your message!

We tried to load the module using a condition based on the React version in this commit:

algolia/react-instantsearch@195dbe8

We tried with all versions of "Next" in 12.x.x, but we either have the import error or a TS error (the dependency is already installed):

[FabienMotte]

The issue is related to webpack/webpack#13865 and not Next.js, I'm closing this issue.

Thanks for your help!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.