Bug report

Describe the bug

After migrating to v3, it no longer works using monorepo

Context

Hey there.

So, I notice that after I migrate from v2 to v3, I’m not able to make it work. I might have the answer and this is more a help and bug/tracking for future reference (will explain later together with a repo to reproduce).

On v3, when I try to access a page which uses next-mdx-remote I get this error:

event - compiled successfully
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: spawn /home/raulmelo/development/open-source/next-mdx-remote-bug-repro/apps/next-demo/node_modules/esbuild/bin/esbuild ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn /home/raulmelo/development/open-source/next-mdx-remote-bug-repro/apps/next-demo/node_modules/esbuild/bin/esbuild',
  path: '/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/apps/next-demo/node_modules/esbuild/bin/esbuild',
  spawnargs: [ '--service=0.11.19', '--ping' ]
}

After some investigation, I had a gut feeling was that because I use yarn workspaces and it hookup the dependencies to <rootDir> level.

A common strategy for solving such cases is setting in the root package.json a config called nohoist.

When I do that for next-mdx-remote, I now start getting an error about multiple react versions:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   at resolveDispatcher (webpack-internal:///../../node_modules/react/cjs/react.development.js:1476:13)
   at useContext (webpack-internal:///../../node_modules/react/cjs/react.development.js:1484:20)
   at Html (webpack-internal:///../../node_modules/next/dist/pages/_document.js:158:29)
   at processChild (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
   at resolve (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
   at ReactDOMServerRenderer.render (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
   at ReactDOMServerRenderer.read (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
   at renderToStaticMarkup (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/react-dom/cjs/react-dom-server.node.development.js:4314:27)
   at renderDocument (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/next/dist/next-server/server/render.js:3:725)
   at renderToHTML (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/next/dist/next-server/server/render.js:55:698)
   at async /home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/next/dist/next-server/server/next-server.js:111:97
   at async /home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/next/dist/next-server/server/next-server.js:104:142
   at async DevServer.renderToHTMLWithComponents (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/next/dist/next-server/server/next-server.js:136:387)
   at async DevServer.renderErrorToHTML (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/next/dist/next-server/server/next-server.js:138:492)
   at async DevServer.renderErrorToHTML (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/next/dist/server/next-dev-server.js:36:1380)
   at async DevServer.renderError (/home/raulmelo/development/open-source/next-mdx-remote-bug-repro/node_modules/next/dist/next-server/server/next-server.js:137:2007)

It makes sense because I have react installed in my project and one of next-mdx-remote dependencies might have react as production dependency.

A solution for that was by just adding next-mdx-remote, react, and react-dom.

Another gut feeling I have it’s related to esbuild but I couldn’t find any strong evidence despite the logs.

To Reproduce

All the 3 cases are in this repository: https://github.com/devraul/next-mdx-remote-bug-repro

There you’ll find 3 branches:

1. main - with the main error
2. nohoist - only for next-mdx-remote
3. nohoist-all - next-mdx-remote, react, and react-dom

For all three the process will be the same:

1. yarn install
2. yarn dev
3. open http://localhost:3000 (without mdx content)
4. open http://localhost:3000/test (with mdx content)

Keep in mind if you switch branches you DO NEED to yarn install --force so yarn can avoid or not hoist deps.

Expected behavior

Expect to work out of the box.

Screenshots

Not applicable

System information

• OS: Pop!_OS
• Browser (if applies) [e.g. chrome, safari]: any
• Version of Next.js: [e.g. 10.0.1]: 10.2.0
• Version of next-mdx-remote: 3.0.1
• Version of Node.js: [e.g. 12.0.0]: 14.15.1

Additional context

• https://github.com/devraul/next-mdx-remote-bug-repro
• https://github.com/devraul/next-mdx-remote-bug-repro/tree/nohoist-all
• https://github.com/devraul/next-mdx-remote-bug-repro/tree/nohoist
• https://classic.yarnpkg.com/blog/2018/02/15/nohoist/
• https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
• https://github.com/facebook/react/issues/13991