Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

react-dom declared as a hard dependency instead of peerDependency causes invalid dependency tree on React 18

Open Beginner friendly
#571 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
84/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start with @asgardeo/react's package.json and compare the react and react-dom entries, then regenerate package-lock.json and inspect the dependency tree with npm ls react and npm ls react-dom. Verify the package build and confirm that a React 18 project no longer installs a nested react-dom@19.2.4 or includes both renderer versions in its production bundle.

Written by the indexing model from the issue text.

Description

Type/Bug

@asgardeo/react declares react-dom as a direct dependency (pinned to exactly
19.2.4) while react is a peerDependency accepting >=16.8.0. These two cannot
be satisfied together on a React 18 project: npm resolves react to the app's
18.3.1 and installs a second, nested react-dom@19.2.4 beside it. npm reports
the resulting tree as invalid, and both renderers are included in the
production bundle.

Severity note: this does not crash the app. In a minimal repro it renders
correctly under both vite dev and vite preview, with no console errors,
because the SDK's dist/index.js does not itself import react-dom — so the
mismatched copy is never executed. This is a dependency-hygiene and
bundle-size issue rather than a runtime failure, flagging that explicitly
since a crash report would not reproduce. The mismatched copy is, however,
genuinely broken if anything ever loads it directly:

$ node -e "require('./node_modules/@asgardeo/react/node_modules/react-dom/client')"
TypeError: Cannot read properties of undefined (reading 'S')

React 19's react-dom reads
React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, which
React 18.3.1 does not define.

Observed output — npm ls react (tree marked invalid):

asgardeo-react18-repro@0.0.0
+-- @asgardeo/react@0.25.13
| +-- @floating-ui/react@0.27.12
| | +-- @floating-ui/react-dom@2.1.9
| | | -- react@18.3.1 deduped
| | -- react@18.3.1 deduped
| +-- react-dom@19.2.4
| | -- react@18.3.1 deduped invalid: "^19.2.4" from node_modules/@asgardeo/react/node_modules/react-dom
| -- react@18.3.1 deduped
+-- react-dom@18.3.1
`-- react@18.3.1

npm ls react-dom (two copies):

+-- @asgardeo/react@0.25.13
| +-- @floating-ui/react@0.27.12
| | +-- @floating-ui/react-dom@2.1.9
| | | -- react-dom@18.3.1 deduped
| | -- react-dom@19.2.4 deduped
| -- react-dom@19.2.4
-- react-dom@18.3.1

Both renderers reach the production bundle (confirmed by grepping the build
output for each version's internals symbol). Deduplicating them reduces the
bundle from 711,161 to 707,294 bytes (~3.9 kB raw, ~1.3 kB gzip of unused
renderer).

Root cause: react-dom is listed under "dependencies" rather than
"peerDependencies" in @asgardeo/react's package.json:

"dependencies":     { "react-dom": "19.2.4", "@types/react-dom": "19.2.3", ... }
"peerDependencies": { "react": ">=16.8.0", "@types/react": ">=16.8.0" }

An exact 19.x pin for the renderer is incompatible with a >=16.8.0 peer range
for react, since react-dom must match the react it renders with.

Suggested fix: move react-dom and @types/react-dom to peerDependencies,
matching how react and @types/react are already handled.

Workaround used: npm overrides pinning the SDK's react-dom to the app's
own version, plus resolve.dedupe: ["react", "react-dom"] in vite.config.js.
Note: adding the override alone had no effect until the lockfile was
regenerated — the existing package-lock.json kept pinning 19.2.4 even after
npm reported the override as applied.

Dominant language
TypeScript
Stars
18
Forks
67
Avg merge
4h 6m
Merged PRs (30d)
13

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from asgardeo/javascript

All issues in asgardeo/javascript

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.