Potentially unnecessary peer dependency?

[andyjakubowski]

Installing mdx-embed@^0.0.22 with npm@8.1.2 throws an ERESOLVE unable to resolve dependency tree error when react@^17.0.2 is installed as a dependency of next@12.0.7.

I noticed mdx-embed lists react@^16.9.0 as a peerDependency. But @mdx-js/react@^1.6.16 lists react@"^16.13.1 || ^17.0.0". I ran npm install --legacy-peer-deps mdx-embed, which I think may suppress the error in spite of the listed peer dependency. In any case, the installation worked. I ran a quick test and the embedding seems to work.

Does React 17 break mdx-embed in some way, or could react@^16.9.0 be removed from peerDependencies to avoid npm installation errors?

Reproduce with:

npx create-next-app@12.0.7
npm install @mdx-js/mdx @mdx-js/react react react-dom --save
npm install mdx-embed --save

Here’s the output you get after running npm install:

While resolving: blog@undefined
Found: react@17.0.2
node_modules/react
  react@"^17.0.2" from the root project
  peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
  node_modules/@mdx-js/react
    @mdx-js/react@"^1.6.22" from the root project
    peer @mdx-js/react@"^1.6.16" from mdx-embed@0.0.22
    node_modules/mdx-embed
      mdx-embed@"*" from the root project

Could not resolve dependency:
peer react@"^16.9.0" from mdx-embed@0.0.22
node_modules/mdx-embed
  mdx-embed@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

[thatanjan]

I am having the same problem.

My package.json file

{
	"name": "cules-blog-yt",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"lint": "next lint"
	},
	"dependencies": {
		"@chakra-ui/icons": "^1.1.7",
		"@chakra-ui/react": "^1.8.6",
		"@emotion/react": "^11",
		"@emotion/styled": "^11",
		"framer-motion": "^6",
		"gray-matter": "^4.0.3",
		"mongoose": "^6.2.6",
		"nanoid": "^3.3.1",
		"next": "12.1.0",
		"next-mdx-remote": "^4.0.0",
		"react": "17.0.2",
		"react-dom": "17.0.2",
		"reading-time": "^1.5.0"
	},
	"devDependencies": {
		"eslint": "8.11.0",
		"eslint-config-next": "12.1.0"
	}
}

If I install the dependencies with --legacy-peer-deps and use mdx-embed on my code it gives me this error.

Error: require() of ES Module /home/anjan/git_projects/cules-blog-yt/node_modules/@mdx-js/react/index.js from /home/anjan/git_projects/cules-blog-yt/node_modules/mdx-embed/dist/components/mdx-embed-provider/mdx-embed-provider.js not supported.
Instead change the require of index.js in /home/anjan/git_projects/cules-blog-yt/node_modules/mdx-embed/dist/components/mdx-embed-provider/mdx-embed-provider.js to a dynamic import() which is available in all CommonJS modules.

[thatanjan]

Fixed the problem temporarily. I downgraded mdx and react

yarn add @mdx-js/mdx@^1.6.16 @mdx-js/react@^1.6.16 react@^16.9.0 react-dom@^16.9.0

[florian-milky]

The correct fix - until the maintainer of this package updates @mdx-js/react to v2 which has the correct react peer dependency - is to add the following to your package.json

"overrides": {
    "@mdx-js/react": {
      "react": "$react"
    }
  },

This forces @mdx-js/react to accept your version of react