Reactjs

create-react-app dependency version issues with React 18

npx create-react-app my-project results in the following dependency errors:
npx version: 8.5.0

Installing template dependencies using npm…
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-18@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR! react@”^18.0.0″ from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@”<18.0.0″ from @testing-library/react@12.1.5
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@”^12.0.0″ 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.

The command still produces a project directory, but running npm start in the created directory errors with web-vitals missing from node-modules.

Solutions tried

Running the same command with –force or –legacy-peer-deps as suggested by the above error message doesn’t solve the problem.

Deleting node_modules and package-lock.json and running npm i also doesn’t solve the problem.

Update

The problem has been fixed with the latest update of create-react-app. Now it creates a project without any problem.

Answer

Until this is fixed for now you can delete the node_modules folder and package-lock.json. Next, open package.json and change
“react”: “^18.0.0” & “react-dom”: “^18.0.0” to an earlier version e.g:
“react”: “^17.0.2” & “react-dom”: “^17.0.2”.
Finally, you can run npm install.

Alternative Solution (Try this first!):
the solution suggested by joooni1998):

delete both node_modules and package-lock.json
run npm i web-vitals –save-dev
run npm install

and then you can use npm run build and npm start again

MUI installation doesn’t work with React 18

i was trying to install material ui core and icons with my react 18.0 project but i can’t.The project has been created using the latest create-react-app npm install @material-ui/core @material-ui/icons

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: client@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
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!   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@"*" 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.

Answer 1:

npm install @mui/material @emotion/react @emotion/styled --legacy-peer-deps
npm install @mui/icons-material --legacy-peer-deps

Github Issue: https://github.com/mui/material-ui/issues/32074

React Router Programmatically Change route

React-Router v6+ Answer

You can use the new useNavigate hook. useNavigate hook returns a function that can be used for programmatic navigation. Example from the react-router documentation

 


import { useNavigate } from "react-router-dom";

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return &lt;form onSubmit={handleSubmit}&gt;{/* ... */}&lt;/form&gt;;
}

React-Router 5.1.0+ Answer (using hooks and React >16.8)

You can use the useHistory hook on Functional Components and Programmatically navigate:

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();
  // use history.push('/some/path') here
};

React-Router 4.0.0+ Answer

In 4.0 and above, use the history as a prop of your component.


class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};

NOTE: this.props.history does not exist in the case your component was not rendered by . You should use to have this.props.history in YourComponent

 

React-Router 3.0.0+ Answer

In 3.0 and above, use the router as a prop of your component.


class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};

React-Router 2.4.0+ Answer

 

In 2.4 and above, use a higher order component to get the router as a prop of your component.


import { withRouter } from 'react-router';

class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};

// Export the decorated class
var DecoratedExample = withRouter(Example);

// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
}).isRequired
};