unable to resolve dependency tree for React 17

[mrkaptep]

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: unsubscribe@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.11.3
npm ERR!   node_modules/@material-ui/core
npm ERR!     @material-ui/core@"^4.11.3" from the root project
npm ERR!     peer @material-ui/core@"^4.0.0" from material-ui-search-bar@1.0.0
npm ERR!     node_modules/material-ui-search-bar
npm ERR!       material-ui-search-bar@"*" from the root project
npm ERR!     1 more (@material-ui/icons)
npm ERR!   2 more (react-dom, @material-ui/icons)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from material-ui-search-bar@1.0.0
npm ERR! node_modules/material-ui-search-bar
npm ERR!   material-ui-search-bar@"*" from the root project
npm ERR!

Can we remove the peer dependencies of react or update it to work with react 16 or 17?

[violetbrina]

Seconded, running into the same issue here.

[hongz1]

I just installed under React 17.0.2 and no issues found for me

[msueping]

I'm having the same problems as @mrkaptep showed. @hongz1, can you share what you've done to make this work with React 17.0.2?

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-crud@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.2
npm ERR! node_modules/@material-ui/core
npm ERR! @material-ui/core@"^4.12.2" from the root project
npm ERR! peer @material-ui/core@"^4.0.0" from material-ui-search-bar@1.0.0
npm ERR! node_modules/material-ui-search-bar
npm ERR! material-ui-search-bar@"" from the root project
npm ERR! 1 more (@material-ui/icons)
npm ERR! 2 more (react-dom, @material-ui/icons)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from material-ui-search-bar@1.0.0
npm ERR! node_modules/material-ui-search-bar
npm ERR! material-ui-search-bar@"" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\msueping\AppData\Local\npm-cache\eresolve-report.txt for a full report.

[hongz1]

There is nothing I did something else. created react project by npx create-react-app and installed material-ui and material-ui-search-bar. Try clean your package cache and reinstall. As you see my dependency below, react version is 17.0.2 and material-ui-search-bar is 1.0.0

"dependencies": { "@babel/preset-env": "^7.14.7", "@date-io/core": "^2.11.0", "@date-io/date-fns": "^2.11.0", "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", "@material-ui/core": "^4.12.2", "@material-ui/icons": "4.11.2", "@material-ui/lab": "^4.0.0-alpha.60", "@material-ui/pickers": "3.3.10", "@material-ui/styles": "^4.11.4", "@material-ui/system": "^4.12.1", "axios": "^0.21.1", "axios-mock-adapter": "^1.19.0", "babel-plugin-dev-expression": "^0.2.2", "css-vendor": "2.0.8", "date-fns": "^2.22.1", "deepmerge": "^4.2.2", "file-saver": "^2.0.5", "formik": "^2.2.9", "lodash": "^4.17.21", "material-ui-dropzone": "3.5.0", "material-ui-search-bar": "^1.0.0", "polished": "^4.1.3", "prop-types": "^15.7.2", "query-string": "^7.0.1", "react": "^17.0.2", "react-app-polyfill": "^2.0.0", "react-dom": "^17.0.2", "react-dragula": "^1.1.17", "react-feather": "^2.0.9", "react-helmet-async": "^1.0.9", },

[msueping]

@hongz1, I cleared my package cache and tried to install again using "npm i --save material-ui-search-bar" and got the same errors.

C:\temp\react-crud>npm i --save material-ui-search-bar
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-crud@0.1.0
npm ERR! react@"^17.0.2" from the root project
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.2
npm ERR! node_modules/@material-ui/core
npm ERR! @material-ui/core@"^4.12.2" from the root project
npm ERR! peer @material-ui/core@"^4.0.0" from material-ui-search-bar@1.0.0
npm ERR! node_modules/material-ui-search-bar
npm ERR! material-ui-search-bar@"" from the root project
npm ERR! 1 more (@material-ui/icons)
npm ERR! 2 more (react-dom, @material-ui/icons)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from material-ui-search-bar@1.0.0
npm ERR! node_modules/material-ui-search-bar
npm ERR! material-ui-search-bar@"" from the root project
npm ERR!
npm

[hongz1]

Is create-react-app package installed globally or did you installed on the fly using npx into your project dir?

[msueping]

tbh, I don't recall. I think it was "on the fly". Is there any way for me to tell after the fact? I have to admit, I'm a noob at this stuff and am still learning the basics.

[hongz1]

I noticed missing dependency error message was shown although I could run it with react 17. sorry for the confusion.
Until they update dep compatible version for react 17, I guess there would be two options:

Option#1: uninstall react 17 and install react 16.14.0 (tested and this works)

Option#2: If you want to keep react 17, then download material-ui-search-bar source codes and copy "SearchBox.js" into your component dir and import it. (You have to install classnames npm package if you haven't installed)

if you have eslint installed, you will see a couple of warnings for useCallBack dependencies. you can remove those warnings by // eslint-disable-next-line react-hooks/exhaustive-deps from the issued line above.

hope this help.

[hongz1]

or try opening node_modules > material-ui-search-bar > package.json and update react and react-dom version to 17.0.2 in devDependencies and peerDependencies.

[msueping]

Thanks for those suggestions @hongz1. I'll work thru them to see if any can resolve the issue.

FYI, I took your second suggestion (Option #2) and was able to make it "work", i.e., I'm able to show the search bar. I just have to figure out how to set it up to make it actually search :). Thanks again for your assistance.

[singlamanik12]

npm i material-ui-search-bar --force

This worked for me

[leMaik]

Fixed by #117 in the next release.

[Vishakh-vcc]

@leMaik @hongz1 @msueping @mrkaptep
Can you help me here : I am facing the same kind of issues with material-ui-search-bar

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: material-ui-search-bar@1.0.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.3
npm ERR! node_modules/@material-ui/core
npm ERR! @material-ui/core@"^4.11.3" from the root project
npm ERR! peer @material-ui/core@"^4.0.0" from @material-ui/icons@4.11.2
npm ERR! node_modules/@material-ui/icons
npm ERR! @material-ui/icons@"^4.11.2" from the root project
npm ERR! 1 more (material-ui-search-bar)
npm ERR! 1 more (material-ui-search-bar)
npm ERR! 43 more (@material-ui/icons, @material-ui/styles, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from material-ui-search-bar@1.0.0
npm ERR! node_modules/material-ui-search-bar
npm ERR! material-ui-search-bar@"^1.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR! peer react@"^16.8.0" from material-ui-search-bar@1.0.0
npm ERR! node_modules/material-ui-search-bar
npm ERR! material-ui-search-bar@"^1.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry

[MichalReifer]

npm i material-ui-search-bar --force

This worked for me

thank you so much!