pnpm install fails due to @mdx-js/runtime requiring React 16

[kaiyoma]

🐛 Bug Report

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• 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
• I have read the console error message carefully (if applicable)

Description

Docusaurus can't be installed alongside React 17.

Steps to reproduce

Try to install this with pnpm:

  "dependencies": {
    "@docusaurus/core": "2.0.0-beta.8",
    "@docusaurus/preset-classic": "2.0.0-beta.8",
    "@docusaurus/theme-classic": "2.0.0-beta.8",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },

Expected behavior

Packages should install.

Actual behavior

It seems some deep dependency of Docusaurus has a strict React 16 requirement:

 ERR_PNPM_INVALID_PEER_DEPENDENCY  ..\..\packages\cloudvision-docs > @docusaurus/core > @docusaurus/utils: @mdx-js/runtime@1.6.22 requires a peer of react@^16.13.1 but version 17.0.2 was installed.

Your environment

• Docusaurus version used: 2.0.0-beta.8
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Node 14.15.5
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

[kaiyoma]

It looks like there was a recent attempt in the mdx project to upgrade to React 17, but it was closed unmerged: mdx-js/mdx#1731

[Josh-Cena]

MDX right now is using an experimental release (v18) of React while Renovate is trying to downgrade it to v17. Moreover, @mdx-js/runtime has been deprecated in MDX v2, but we are still on MDX v1 (#4029). Your issue seems also related to #5800 about React version mismatch. Maybe try using an alternative package manager like Yarn that handles peerDeps better?

[kaiyoma]

I'm quite happy with pnpm (it has a lot of advantages over npm or yarn), so I think I'll wait until docusaurus upgrades to MDX v2.

[ltribolet]

Your issue seems also related to #5800 about React version mismatch. Maybe try using an alternative package manager like Yarn that handles peerDeps better?

I am using yarn and still was hit by react issue in #5800.

[Josh-Cena]

@ltribolet Yes, that means it's not entirely pnpm's fault, but more generally, about @mdx-js/runtime being incompatible with React v17. The error stacks are pretty much the same, but one finds it during installation, another at runtime. I would investigate this deeper tomorrow.

[ltribolet]

Thanks for the explanation, as I'm not very familiar with react projects (and node package manager in general).

[slorber]

Related to #5664, we should probably remove the mdx-runtime usage anyway and find another solution for RSS feed content (like reading generated html files, as suggested by Titus)

[taylorreece]

I don't know if it'll help, but in my pnpmfile.js I made react a dependency (not peer dependency) and that seemed to get me through a Docusaurus upgrade:

module.exports = {
  hooks: {
    readPackage,
  },
};

function readPackage(pkg, context) {
  if (pkg.name === "@mdx-js/runtime" && pkg.version === "1.6.22") {
    pkg.dependencies = {
      ...pkg.dependencies,
      react: "16.13.1",
    };
  }

  return pkg;
}

Edit: welp, that caused my other projects in the monorepo not to build. Dependencies are hard.

[CxRes]

@taylorreece The pnpm developer does his documentation on Docusaurus 2.0. So I copied his setup of .pnpmfile, .npmrc and package.json > dependencies and did a fresh install (after removing lock file and node_module). All warnings vanish for reasons I do not understand! mdx-js/runtime error still remains :( because he is using an older version of @docusaurus/utils.

[Josh-Cena]

Closing because we are no longer using the MDX runtime after #6454