"Can't resolve @mdx-js/react" for each page in our docs since 2.0.0-beta.20 update

ndom91 commented 2 years ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] I have tried the npm run clear or yarn clear command.
[X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[ ] I have tried creating a repro with https://new.docusaurus.io.
[X] I have read the console error message carefully (if applicable).

Description

Since upgrading locally to docusaurus@2.0.0-beta.20, I can no longer run locally (dev) nor build the project.

In the console I have an error message stating Can't resolve @mdx-js/react once for each page in our site.

The odd thing is, its also appearing in this PR which is still on the previous version, 2.0.0-beta.17 - https://github.com/nextauthjs/next-auth/pull/4521. This PR has added nothing, but two simple new markdown pages.

See Vercel build output:

I'm a bit confused as to whats going on here.. Adding @mdx-js/react just led to further errors. Any further debug output I can provide you? Am I just missing something obvious here possibly? Haha

Building the current main version of our docs site works, however, like I said the PR I linked above repeatedly leads to this error, and another branch I have updating dependencies (i.e. to 2.0.0-beta.20) also exhibits the same behaviour locally during development.

Reproducible demo

No response

Steps to reproduce

run pnpm build.

Expected behavior

Successful build

Actual behavior

Broken build

Your environment

Public source code: https://github.com/nextauthjs/next-auth/tree/main/docs
Public site URL: https://next-auth.js.org
Docusaurus version used: 2.0.0-beta.17 as well as 2.0.0-beta.20 locally
Environment name and version (e.g. Chrome 89, Node.js 16.4): node 16.15
Operating system and version (e.g. Ubuntu 20.04.2 LTS): Arch linux

Self-service

[X] I'd be willing to fix this bug myself.

ndom91 commented 2 years ago

Added exactly the following two versions of packages and it began working again :facepalm:

@mdx-js/react: 1.6.22
prism-react-renderer: 1.3.1

thomasmattheussen commented 1 year ago

This is happening for me as well when switching my package manager from yarn to pnpm.

I'm guessing some dependencies were hoisted when using yarn, which is not the case when using pnpm.

A quick skim reveals that packages/docusaurus-mdx-loader seems to depend on @mdx-js/react --> https://github.com/facebook/docusaurus/blob/e0bb39a40a1c0ef59266d12e4ae0d354431281b0/packages/docusaurus-mdx-loader/src/processor.ts#L152

It does not have @mdx-js/react as a dependency though, so that seems wrong (at a glance).

Josh-Cena commented 1 year ago

@thomasmattheussen The MDX loader injects a import ... from "@mdx-js/react" into the processed MDX file. However it's the site that really ends up depending on "@mdx-js/react", because the loader just does the transpilation work. Does your site's package.json have @mdx-js/react?

thomasmattheussen commented 1 year ago

That's what I ended up doing to fix it, yes. Maybe this should be documented somewhere? (or did I miss it?)

Since it's a hidden implementation detail, it's not clear that we had to include this is as a dependency of our own.

slorber commented 1 year ago

@thomasmattheussen It only happens because your site is quite old and we probably didn't document these kinds of required upgrade changes during the beta period since it's a beta (during which we didn't document beta breaking changes).

All new sites have this dependency already added since v2.0: that looks good enough, users are assumed to not remove any critical dependency we added to the minimal init template.

thomasmattheussen commented 1 year ago

Ah I see, through the scaffolding with npx create-docusaurus. I get it now, thanks for clarifying!

facebook / docusaurus