No tienes acceso a esta clase

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

Curso Pr谩ctico de Webpack

Curso Pr谩ctico de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Migracion de Webpack 4 a Webpack 5

7/22
Recursos

Aportes 13

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

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