Migracion de Webpack 4 a Webpack 5

Migracion de Webpack 4 a Webpack

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

• Actualizamos.
  Webpack y plugins:

npm install [email protected] [email protected] [email protected] [email protected] [email protected]

React:

npm install [email protected] [email protected] [email protected] [email protected] [email protected] 

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

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

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 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>
);

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

npm i [email protected]

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;

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.
ㅤ

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/>