@clerk/clerk-react should have react-dom as a peer dep

[hzuo]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

n/a

Publishable key

n/a

Description

Steps to reproduce:

Building an app that depends on @clerk/clerk-react with vite results in the following error:

[vite]: Rollup failed to resolve import "react-dom" from "<redacted>/web/node_modules/.pnpm/@[email protected][email protected]/node_modules/@clerk/clerk-react/dist/esm/utils/useCustomElementPortal.js". This is most likely unintended because it can break your application at runtime.

Expected behavior:

vite build should work.

Actual behavior:

see the above

Environment

N/A

---

Problem

useCustomElementPortal.tsx has import { createPortal } from 'react-dom'; but react-dom is not listed as a peer dep or a dep in @clerk/clerk-react's package.json.

[hzuo]

Indeed if I force it as a peer dep using pnpm's packageExtension mechanism vite build now works:

  "pnpm": {
    "packageExtensions": {
      "@clerk/clerk-react": {
        "peerDependencies": {
          "react-dom": "*"
        }
      }
    }
  }

[LekoArts]

Hey, thanks for the issue!

That is indeed correct, it should set react-dom as a peerDep.
To anyone who wants to pick this up, go to here:

javascript/packages/react/package.json

Lines 74 to 76 in 86ac27a

	"peerDependencies": {
	"react": ">=16"
	},

And add:

"react-dom": ">=16"

[LekoArts]

This was fixed in #2164 and will be released with a new major. You can install npm install @clerk/clerk-react@alpha-v5 to try out the pre-release.