No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Migracion de Webpack 4 a Webpack 5

7/22
Recursos

Aportes 14

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渋d-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.