Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsnpm ls react can show one React version and still miss the second module instance causing an Invalid Hook Call warning. It reports npm’s logical dependency tree—not a definitive inventory of every physical package directory or every module your app loads. Check the full tree, compare React’s resolved paths from each importer, then fix the package metadata or resolver that creates the mismatch.
Why npm ls can miss a second React copy
npm ls describes dependency relationships in npm’s logical tree. That is different from a physical map of every node_modules directory and from the paths a runtime or bundler resolves for imports. Its default output can also be shallow. A linked library or nested package may therefore resolve React from a different location even when the displayed tree appears to show one version. See npm’s ls documentation.
As an Amazon Associate I earn from qualifying purchases.
React’s requirement is about module identity: the react import in application code must resolve to the same module as the import inside react-dom. Identical version labels do not prove that the imports refer to one module. A second React copy can coexist harmlessly in an isolated widget, but it is a problem when code in the same component tree—especially application Hooks and react-dom—uses different React instances. React’s Invalid Hook Call guidance explains the condition.
Recommended Free Tools
How to check the dependency tree and actual resolution
-
Show all React dependency paths
From the application root, run
npm ls --all react(ornpm ls react --all). The--allflag asks npm to show the full logical tree rather than only the default shallow view. Read the paths and versions as clues, not as proof of which physical module each importer loads.#1 Best Overall
-
Inspect placement and links
Run
npm ls -l reactto request link information. If the result still leaves the layout unclear, inspect the relevant package directories and their nestednode_modulesfolders directly. npm distinguishes its logical tree from the physical installation layout in the command documentation. -
Resolve React from each importing package
Compare the path resolved from the app with the path resolved from the linked library or workspace package that imports React. In CommonJS, run
require.resolve('react')from each package context. If you need to resolve from a particular file, Node providesrequire.resolvewith apathsoption; use the importing package’s directory as the search context rather than assuming the app root represents every importer.Different resolved paths are evidence of different module identities; the same version text alone is not enough. Node resolves dependencies relative to the calling module and, by default, follows symlinks to real paths. Its module cache is keyed by resolved filename, so distinct resolved paths can produce distinct module instances. See Node.js module documentation.
PerformanceWindows Errors? Fix Them Before They SpreadDriversOutdated Drivers Are Slowing You DownPerformancePC Slower Than It Used to Be?Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Check the library’s React declaration
For a reusable component library, inspect its
package.json. React generally belongs inpeerDependencies, so the consuming application supplies the React instance, rather than in ordinarydependenciesin a way that installs a private copy for the library. React specifically identifies a library that lists React as a dependency instead of a peer dependency as a possible source of duplicate instances. See the React troubleshooting guidance.
Choose a fix based on what the path checks show
| What you find | What to do | What to verify |
|---|---|---|
| The component library declares React as an ordinary dependency and resolves its own copy. | Correct the library’s package metadata so React is a peer dependency, then install or link the corrected package. | Resolve React from both the app and library contexts again; confirm they point to the same module used by react-dom. |
| Compatible copies exist in the dependency layout. | Use npm find-dupes to preview deduplication, or run npm dedupe to reorganize compatible packages. |
Repeat the importer path checks and test the app. Deduplication does not change semver ranges for direct dependencies in package.json, so it may not solve every mismatch. See npm find-dupes and npm dedupe. |
| A linked or hoisted package still resolves a different React path because of bundler resolution. | Configure the bundler to resolve React consistently from the app where appropriate, while accounting for symlink behavior and build mode. | Check the resulting bundle or runtime behavior, not only npm’s tree. |
Bundler settings to inspect
Vite
Vite’s resolve.dedupe option can force selected dependencies, such as React, to resolve to one copy from the project root. This can help with hoisted dependencies or linked packages. Vite documents a limitation for SSR builds using ESM outputs configured through build.rollupOptions.output; check the Vite shared options for the behavior applicable to your version and configuration.
webpack
Inspect resolve.alias and resolve.symlinks in the webpack configuration. Aliases take precedence, and webpack’s default symlink behavior resolves linked resources to their real paths. That can change where dependency lookup begins when using npm link. See webpack resolve configuration.
Quick Recap
Best Value
Validate the result
- Resolve React from the application and every relevant library or workspace importer; compare actual paths, not just package versions.
- Confirm that the application’s React and the React imported by
react-domshare the same module identity. - After changing metadata, deduplicating, or adjusting bundler resolution, run the app and check whether the Invalid Hook Call warning is gone.
- If behavior remains unclear, inspect the installed layout and the bundler’s resolution output; a clean-looking npm tree alone does not establish runtime identity.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
