Como realizar un downgrade de React18 a React17

Índice

Realizar downgrade de React18 a React17 de “create-react-app”
Realizar downgrade de React18 a React17 de Vite

Realizar downgrade de React18 a React17 de “create-react-app”

React18 ha sido recientemente lanzado el 8 de Marzo del 2022, pero parece ser que React Router Dom no funciona con react18, por lo que para poder realizar los proyectos, es necesario degradar la versión 18 al menos a la 17.

Una vez que ejecutamos el comando:

npx create-react-app nombreproyecto

 
npx create-react-app nombreproyecto

Se nos creara nuestra app en la versión 18 de react y debido a que no existe un comando para realizar una instalación de versiones en especifico, es necesario modificar manualmente nuestros archivos.

Para ello, abrimos nuestro package.json y reemplazamos las siguientes lineas:

"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",

xxxxxxxxxx
 
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",

Por estas otras:

"@testing-library/react": "^12.1.1",
"@testing-library/user-event": "^12.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",

xxxxxxxxxx
 
"@testing-library/react": "^12.1.1",
"@testing-library/user-event": "^12.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",

Ahora nos dirigimos al archivo index.js localizado en la carpeta src y reemplazamos todo su contenido por este otro.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

​x
 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
​
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
​
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
​

Ahora, eliminamos la carpeta node_modules localizada dentro de nuestro proyecto y reinstalamos las dependencias con el comando:

npm install

xxxxxxxxxx
 
npm install

Hecho esto, ya podremos levantar nuestro proyecto con el comando:

npm start

xxxxxxxxxx
 
npm start

Realizar downgrade de React18 a React17 de Vite

Una vez creada nuestra aplicación Ract con Vite, se instalara automáticamente la versión 18 de React, por lo que para regresar a la versión 17 tendremos que editar nuestro package.json

Abrimos package.json y modificamos devDependencies y dependencies de la siguiente manera:

"devDependencies": {
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2",
    "@vitejs/plugin-react": "^1.3.0",
    "vite": "^2.9.5"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }

xxxxxxxxxx
 
"devDependencies": {
    "@types/react": "^17.0.2",
    "@types/react-dom": "^17.0.2",
    "@vitejs/plugin-react": "^1.3.0",
    "vite": "^2.9.5"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }

En si, lo único que hemos hecho, es cambiar todas las versiones 18.0.0 por 17.0.2

Ahora vamos a la carpeta src y abrimos el archivo main.jsx y reemplazamos todo su contenido por este otro:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

xxxxxxxxxx
 
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
​
ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);
​

Ahora solo restaría instalar nuestras dependencias

npm install

xxxxxxxxxx
 
npm install

Y correr nuestra app

npm run dev

xxxxxxxxxx
 
npm run dev