Cambios en tiempo real con Webpack

Clase 6 de 30 • Curso de React 17 con Webpack 5 y Sass

Alejo Vera

student•

Siempre lo mismo con Oscar. Configuramos Webpack por su escalabilidad, adaptabilidad y personalización, pero lo que termina pasando es que nos las muestran como una black box, exactamente lo mismo que sería con create-react-app. Pero de esta forma personalizada saltan mil errores, de los que poco conozco, y me trabo nomas al arrancar

Alfredo Olmedo

student•

Alejo Vera, Los errores son los mejores maestros pues te dan mayor experiencia a la hora de resolverlos, la gran mayoría de estos son identificables y generalmente traen información la cual te ayuda a resolver. Continúa adquiriendo experiencia

Andres Prieto

student•

Si nunca te saltan errores entonces no estás aprendiendo nada; de los errores se aprende y en esos momentos en lo que no tienes idea de lo que está fallando es cuando se te aumenta el valor como dev

Javier Ladino

student•

Estoy deacuerdo que los errores hacen parte del aprendizaje, pero en algo tan complejo como es este proceso de configuración que no funcione el paso a paso del profesor es muy frustrante para mi. Después voy a los comentarios y encuentro muchas “posibles” soluciones… empiezo a depurar una por una y nada me funciona. Al final sigue siendo complicado, la ruta no es clara y los archivos del repositorio no están actualizados. Si existe un package que ya funciona al 100%.. usémoslo y entendamos su comportamiento.. se aprende mucho haciendo ingeniería inversa.. NO es funcional aprender código escribiendo como si fuera un dictado sin parar (Así me sentí por muchos minutos) y lo que llega es la ansiedad que escribo, pauso, escribo, pauso y no aprendo nada práctico. Este curso es muy importante para mi, pero sin un orden estructurado y validado es complicado. Valoro mucho los comentarios de los otros estudiantes pero a veces enredan más y NO veo una depuración o corrección activa de los aportes por parte de los profesores.

Walther Yesid Piedrahita Ortiz

student•

A todos nos pueden saltar errores diferentes, por esa razón no puedes depurar tu código con referencia a los comentarios de todos los compañeros. Mas bien se trata de encontrar y leer el error, interpretarlo, comprenderlo y depurarlo.

En mi caso, no aparecía Hola mundo! en el navegador, la línea de comados no me mostraba ningún error, pero la consola del navegador me decía que no tenía definido reactDom en index.js... Así que lo modifiqué y eso fue todo.

Un simple typo no permitía mostrar el título en el navegador!

En lo que va del curso no he tenido que configurar algo diferente a lo que Oscar ha mostrado.

Oscar Zamora

student•

En mi caso fue un error en la escritura de esta linea:

ReactDOM.render(<App />, document.getElementById(app));
ReactDOM.render(<App />, document.getElementById('app'));

la segunda es la correcta, léelo bien, encuentra el error..... cosas tan mínimas como eso. Esto pasa muy seguido, hasta a los devs de Google les pasa.... No le bajes... calma, párate de tu puesto distrae tu mente en otra cosa... libera tensiones y vuelves y te sientas con mas tranquilidad siempre me funciona así, capaz ahí si encontrarás el error

Daniel Felipe Diaz Rodriguez

student•

A mi no me salió el "Hola Mundo" me salieron unos errores esto se puede solucionas de la siguiente manera ejecutando estos comandos en la terminal

npm install css-loader

npm install  -g sass

npm i mini-css-extract-plugin

 npm install style-loader --save

con estos comandos debería funcionar

este es mi package.json

{
  "name": "react-shop",
  "version": "1.0.0",
  "description": "react eshop",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open",
    "build": "webpack --mode production"
  },
  "keywords": [
    "react",
    "javascript"
  ],
  "author": "Daniel Felipe Diaz R<programadordanieldiaz@gmail.com>",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.3.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.3.0",
    "webpack": "^5.56.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.1"
  }
}

Erick Roberto Silva Molina

student•

Gracias, esta fue mi solución entre todos los comentarios.

Sebastian Camilo Guaqueta Melo

student•

Por si a alguien, después de implementar esto le sigue saliendo un error relacionado con sass-loader, intenten con este comando adicionalmente, con esto ya me funcionó.

npm install sass-loader sass webpack --save-dev

Adalberto Zanabria Castro

student•

😅

ariel ventura

student•

jajaja

Carlos Alfonso Garcia Gonzales

student•

jajaja es muy cierto

John Davis Pablo Valverde

student•

Si les sale algun error que indique que es sobre el webpack.config.js o algo sobre el import de App, cambian en el test:
////
module: {
		rules: [
			{
				test: /\.js$|jsx/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				}

Gabriel Alfonso Rodríguez Angeles

student•

Muchas gracias , me funciono esta solución pero sabes porque es? o cual es la raíz del problema?

José Luis Lemos

student•

gracias por la ayuda, justo me tiraba el error de referencia de App, y con esto anduvo bien

Max Andy Diaz Neyra

student•

Dato de vital importancia: Si agregan esto encima de module.exports

/** @type {import('webpack').Configuration} */

VSC les va a facilitar un genial auto completado, de nada y éxitos

Lucas Aristizábal

student•

no sirve amigo

michael esteban solarte moran

student•

la mayoría de los cursos de Oscar solo son dictados de código, y es tan rápido que toca estar parando y escribiendo, al final frustra y se quitan las ganas de continuar, son ya muchos cursos que siento lo mismo, que no aprendo sino que solo copio código, me gustara explicación del porque de las cosas, hice el curso de webpack y paso lo mismo, un dictado de codigo sin explicacion, deben mejorar eso

david felipe rojas bravo

student•

También me pasó lo mismo, no me gustó realmente los cursos que dicta él.

Cindy Carolina Campos Navarro

student•

Luis Julian De La Torre Aguilar

student•

comunidad, presten atencion de donde ponen los archivos .babelrc y webpack.config.js

a mi me salie este error que veo es muy constante en los comentarios.

esos 2 archivos para que funcione bien la ejecucion deben de estar por fuera de la carpeta src ya que dentro de ella no leera la configuracion

espero esto pueda ayudar a los q aun presentan este error.

Carlos Javier Mazzarri Rodriguez

student•

Gracias! Era exactamente mi problema. A veces, en la estructura de las carpetas, no es tan fácil diferenciar si un archivo está dentro o fuera de una carpeta, esto nos puede confundir y es fácil no darse cuenta!

Hiram Rodriguez Gomez

student•

De acuerdo, por el tamaño de los elementos en la pantalla, en ocasiones es complicado definir como debe quedar la estructura de archivos y carpetas del proyecto (me paso en un par de ocasiones)

Yo aprendí que siempre es bueno cada cierto tiempo, ir revisando la sección de "Archivos de la clase", en la parte inferior de la pantalla del curso. Así es más fácil recorrer el proyecto y entender en donde debe estar almacenado cada archivo.

Carlos Andrés Norato Gómez

student•

Hola a todos a mi me salio error cuando ejecute el comando npm start Mi solucion fue cambiar el script(start) por la siguiente linea de codigo : "start": "webpack server --mode development --open", Y me funciono no entiendo bien el por que al profe si le funciona con serve y a mi me funciona con server pero preguntare espero le ayude

Julio Loarte Huerto

student•

solo tenias que agregar la siguiente linea al archivo webpack.config.js

mode: 'development',

RAUL HENDE

student•

hola, colocaste una coma despues de la linea: "test": "echo "Error: no test specified" && exit 1", al final coloca una coma asi podras insertar una nueva linea sin que te de error

jonathan gonzalez

student•

Como solucionar este error 👇

Después de horas investigando cual era el motivo de este error encontré que esto se debe a que nodeJS no esta actualizado a la ultima versión

En mi caso yo uso WSL y al instalar nodeJS me instala la versión 10.19.0

Para actualizarlo a la ultima versión hay que hacer muchos pasos y es engorroso 🙄 así que la forma mas rápida fue instalando git bash y migrar mi proyecto fuera de Linux

después de esto ir a la pagina de nodeJS

Descargas en tu pc e instalas y listo miras la versión en tu terminal git bash y tendras la ultima versión de nodeJS

ahora instalas npm y te lo instalara con la ultima versión

Se que es una solución muy rara jjajajaja pero funciona 😁 Tú código se compilara sin problemas

Jean León

student•

Es muy fácil actualizar el node en WSL, primero solo debes asegurarte de siempre tener actualizada tu distro de linux, luego puedes actualizar tranquilamente tu versión de node, te dejo los comandos.

Primero actualizas tu distribución

sudo apt update && sudo apt upgrade

luego limpias la cache e instalas el modulo n

sudo  npm cache clean -f
sudo npm install -g n

Ahora puedes usar n para actualizar node con cualquiera de las siguientes lineas

n stable 
n latest 
n 16.13.0

Alberto Israel Fuentes Contreras

student•

Gracias!

Astrik Sem Torres Garcia

student•

Apartir de React 18 la sintaxis para renderizar nuestra app es la siguiente:

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

Aquí la documentación

fidel agustin fuentes

student•

Recuerden que para matar el proceso solo tiene que dar ctrl c

Rodrigo Torres

student•

Graciassss broo

Diego Andrés Salazar Luna

student•

Tomando el curso en mayo 2022, las versiones que uso:

$ node -v
v16.15.0
$ npm -v
8.5.5
$ npm view react version
18.1.0
$ npm view react-native version
0.68.2

y tomando de referencia algunas respuestas anteriores en los aportes de esta clase, mi solución a los errores fue el siguiente:

instalar modulos

npm install css-loader mini-css-extract-plugin sass sass-loader style-loader –D

mis archivos:

index.js

import React, { Component } from 'react';
import { createRoot } from 'react-dom/client'
import App from './components/App'

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

App.jsx

import React from 'react';

const App = () => {
    return (
        <h2>Hello World</h2>
    );
}

export default App;

webpack.config.js

const { plugins } = require('@babel/preset-env/lib/plugins-compat-data');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',        
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    }
                ]
            },
            {
				test: /\.s[ac]ss$/i,
				use: [
					"style-loader",
					"css-loader",
					"sass-loader",
				],
			}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
			filename: '[name].css'
		}),
    ],
}

Josue Fredes

student•

npm install css-loader mini-css-extract-plugin sass sass-loader style-loader –D no me anduvo dice error, me darias una mano estoy rrre trabado, desde ya gracias

Dennis Quesada Azofeifa

student•

Confirmo el cambio de index.js para react 18, muchas gracias

Danilo ceretti

student•

me tira mil errores que np tengo ni idea !! estpy en este curso para aprender y me atraso ya en el 4 video !!

Emma Rosa Pilozo Solano

student•

Me pasa lo mismo. No encuentro donde esta mi error. y lo peor es que ni siquiera lo entiendo, como para empezar a buscar. Es muy frustrante.! No se si sera el profesor o la materia como tal. Pero es la segunda vez que me sucede con el mismo instructor.

Jonathan Di Rico

student•

Es imposible seguir este curso sin tomarse 15 días

Braulio Rivas Abad

student•

Cambios en tiempo real con Webpack

Ahora configuraremos webpack de modo que podamos compilar nuestra App, y ver los resultados en una pestaña de nuestro navegador.

// en package.json
{
	"scripts" : {
		"start": "webpack serve --open", // compilar para desarrollo
    "build": "webpack --mode production" // compilar para producción
	}
}

// en webpack.config.js
module.exports = {
	...
	mode: 'development',
	...
}

// en index.js nos habíamos olvidado de importar App
import App from './components/App';

//por último, el index.html//
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Shop</title>
</head>
<body>
    <div id="app">// en index, escribimos que debería agregarse al elemento con 
//el id "app", por eso creamos un div con dicho id, para poder insertarlo
            
    </div>
</body>
</html>

//ahora, en la terminal corremos el comando
npm run start
// y listo, tenemos nuestra app

Los errores son amigos nuestros, por ello, debemos aprender a leerlos y comprenderlos, para así realizar las correciones correspondientes. Si no, recordemos que siempre podemos googlear 🙂

Talia DevJump

student•

Muchas gracias tu solución me ayudo mucho!! Saludos!

Juan Carlos Valencia López

student•

estudiar programación me ayudó a aprender de los errores 😊

Jaime Puente

student•

Yo decidi ser feliz y usar:

npx create-react-app ./

Carlos Miguel Orozco Vidaña

student•

les cuento mi experiencia, quizás es un error tonto peor estuve un rato atorado con ello, no me marcaba ningún error la consola, ni la consola del navegador pero no se mostraba el "hello world" después de revisar la clase pasada paso por paso, me di cuenta que tenia un error de typo, en el "webpack.config.js" en la ultima parte en la sección de plugins en filename no había puesto bien la ruta

plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "/index.html",
    }),
  ],

me había comido un punto en la ruta, lo correcto es

plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),
  ],

Gerardo Antonio Fernandez Alonzo

student•

Igual a mi, no me aparece ningun error, pero ya revisé las rutas y nada, sigue sin aparecer el "Hola Mundo"

Romen Ter Gazarian

student•

Es exactamente lo que me paso jajajajajaja

Miguel Ortiz

student•

Como no hay soporte por alguien de platzi, ni el profesor. Batalle dos horas tratando de encontrar el error que me daba la consola ya que no me aparecia el Hola Mundo!... Error en consola.

Uncaught ReferenceError: React is not defined

Encontre la solucion en https://stackoverflow.com/questions/32070303/uncaught-referenceerror-react-is-not-defined

Solucion de un usuario, por la versiones de babel y react se agrego {"runtime": "automatic"} al archivo de babel.

Quedado asi:

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

}

Luis Oscar Sequera Contreras

student•

Al menos me abre la página, pero sigue sin aparecer el "hola mundo"

Iwinser Aljadys Sanchez Llory

student•

gracias compañero, si funciono...esta abriendo pero no mostraba...muchas gracias

Cambios en tiempo real con Webpack

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js