Migracion de Webpack 4 a Webpack 5

Cambios en React-router-dom

Como sabemos hemos actualizado la mayoria de nuestras dependencias en el proyecto de Platzi Store, lo cual conlleva a analizar si se han realizado ciertos cambios.

El cambio mas notorio es que Switch ya no es un modulo exportado de react-router-dom y ha sido remplazado por Routes en la nueva version

Ademas de unos cambios pequeños a la hora de definir las rutas de la app

Cambiando de esto:

<Route exact path='/' component={Home} />

A esto :

<Route exact path='/' element={<Home />} />

y para definir el default de la ruta en caso del notFount usaremos el path *

<Route path ='*' element={<NotFound />} />

Si es que alguien obtiene un error como:
Attempted import error: 'Switch' is not exported from 'react-router-dom'

Chequen:
https://stackoverflow.com/questions/63124161

Migracion de Webpack 4 a Webpack

Después de tener ya el proyecto en nuestro entorno de desarrollo.

• Actualizamos.
  Webpack y plugins:

npm install webpack@latest webpack-cli@latest babel-loader@latest html-webpack-plugin@latest mini-css-extract-plugin@latest

React:

npm install react@latest react-dom@latest react-router-dom@latest react-redux@latest redux@latest 

y npm install
Importante: en package.json:
Cambiamos:

"start": "webpack-dev-server --open --mode development",

Cambió, desde webpack 5 ya es:

"start": "webpack serve --open --mode development",

y npm run start

Para la nueva version de React (18 al crear este comentario) se debe actualizar el index.js. Porque con react 18 se cambio la forma de iniciar el root para el React app

Tienes que cambiar a esto:

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Aun no entiendo bien React pero a la fecha de hoy no me funcionó y viendo los aportes entiendo que algo se actualizó. Lo que se encarga de las rutas cambió por esa razón debe modificar en App.jsx Switch por Routes:

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Home from '../containers/Home';
import Checkout from '../containers/Checkout';
import Layout from '../components/Layout';
import NotFound from '../containers/NotFound';

const App = () => (
  <BrowserRouter>
    <Layout>
      <Routes>
        <Route exact path='/' element={<Home />} />
        <Route exact path='/checkout' element={<Checkout />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </Layout>
  </BrowserRouter>
);

export default App;

Para esta fecha donde estamos usando React 18, React Router Dom 6, React-redux 8, Webpack 5, etc…
Para poder avanzar en esta clase, y recopilando las soluciones que leí de los otros compañeros, este es el paso a paso para lograr que el proyecto funcione.

1. Primero cambiar la forma de importar, y llamar dependencias en el index.js:

import ReactDOM from 'react-dom/client';
import { legacy_createStore as createStore } from 'redux';

1. Instalar la última versión del Webpack dev server:

npm i webpack-dev-server@latest

1. Cambiar el Switch por Routes en el archivo de App.jsx donde se listan las rutas de la aplicación
   
   

Si tienen problemas con webpack-cli cuadno hace npm start
deben instalar la ultima version de webpack-dev-server

npm i webpack-dev-server@latest

Haciendo Fork al Proyecto

1.- En Github le haces Fork ( clickeas el icon del fork)

2.- git clone https://github.com/gndx/platzi-store ó la url de tu fork.
Pd: No hace falta hacer git reset “id-del-commit”, porque el profesor en el branch master esta con el commit de esta clase. y hay otro branch con los commit de clases posteriores llamado clase/10

• Pero por si tienen algún problema:
  3.- Para que regresen en el tiempo a el commit de esta clase:

git reset --hard  974426a

y listo

Se generó al compilar el proyecto debido a que no se instauro la configuración de babel para soportar jsx. Lo solucioné actualizando todo lo relacionado a babel y creando el fichero de configuración de .babelrc

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

Para los que usan wsl2 y no les muestra nada en localhost:3000, pueden reiniciar wsl con el comando en powershell de windows

wsl --shutdown 

o pueden también intentar con una configuración en webpack y buscar la ip de su wsl colocando ipconfig en el cmd o powershell de windows y tomando la ipv4 de wsl y colocándola en su navegador. esto con el fin de que dev-server acepte conexiones externas.

devServer: {
    host: '0.0.0.0',
  },

si no les sale completo la platzi store y solo les sale el navbar y el footer tienen que modificar las rutas en el archivo app.js para que tome las nuevas configuraciones de react-router-dom V6

<Switch> -> <Routes>
component -> element
ej:
<Routes>
<Route exact path="/" element={<Home/>}>
<Routes/>

Si manejan Yarn les dejo este comnando asi actualizan todo a la vez

 yarn upgrade-interactive --latest 

la propiedad externals lo que hace es excluir paquetes del bundle final.

Les recomiendo la extensión version lens para vsc, cuando la instalan van al package.json, le dan al icono superior derecho de la V que es de la extensión y les mostrará todas las dependencias que están desactualizadas, o si están en su versión más reciente y desde ahí mismo las pueden actualizar a la más segura (LTS) o a la más reciente.
ㅤ