Configuración de plugins y loaders para React

Trucazo
Si agregas esta configuración a .babelrc:

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

Ya no necesitas importar React en los archivos donde utilizas sintaxis jsx:

App.jsx

const App = () => <h1>Hola mundo desde REACT!</h1>

export default App

no me corría webpack server entonces revise la documentación y en lugar de poner

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3006
  }
}

Puse

devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        compress: true,
        port: 3006
    }

Y todo listo

Si aparece este error, solo tienen que asignar un modo de compilacion (development o production) ya sea en el archivo de configuración de webpack o en el script en el package.json
.

🎒 Comandos de instalación de la clase

# NPM
npm install -D html-loader html-webpack-plugin
# YARN
yarn add -D html-loader html-webpack-plugin

Tal vez no ayude mucho pero estuve como 10 minutos averiguando el error

ReactDOM.render( App , document.getElementById('app'))

Y solo habia que ponerle las llaves al componente 😅

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

AVISO IMPORTANTE:

–si llegaste hasta aqui y la configuracion te arroja error, debes escribir lo siguiente en el script start:

"start": "webpack-dev-server"

–ya que “webpack serve” ya no cumple la funcion como lo hacia antes

Hola a todos,

por si alguien tiene este error: "Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from “./components/App.jsx”;
|

ReactDOM.render(<App />, document.getElementById(“app”));
| "

He cambiado

test: /\.(.js|jsx)$/,

por

test: /\.js$|jsx/,

y ahora funciona bien 😃

https://stackoverflow.com/questions/57924348/you-may-need-an-appropriate-loader-to-handle-this-file-type-currently-no-loader

Instalación de dependencias:

npm i -D html-loader html-webpack-plugin

Configuración “webpack.config.js”

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	module: {
		rules: [
			{
				test: /\.html$/,
				use: {
					loader: 'html-loader'
				}
			}
		]
	},
	plugins: [
        new HtmlWebpackPlugin({
            template: './src/public/index.html',
            filename: 'index.html'
        })
    ]
}

Con esta configuración de devServe resolví mi error:

devServer: {
    static: {
      directory: path.join(__dirname, "dist/"),
    },
    port: 3006,
  },

Espero les sirva…

“start”: “webpack serve”,
“build”: “webpack --mode production”

Hay demasiadas preguntas sin responder, uno está como a la deriva, creí que algún profesor se dignaba a estar revisando los msjs y ayudar, pero ayuda más google… En serio que decepcionante, esto cada vez me molesta más!

Si alguien está utilizando la última versión de react y tiene problemas de compatibilidad, ejemplo del mensaje de error que puede aparecer:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree

Cuando instalen las dependencias agreguen al final lo siguiente:

... --legacy-peer-deps

Ejemplo:

npm install -D html-loader html-webpack-plugin --legacy-peer-deps

en la configuración del HtmlWebpackPlugin, el archivo de salida por defecto es un index.html, no es necesario poner filename: index.html a menos quieran cambiar el nombre del archivo de salida

Diferencia entre un plugin y un loader

Es importante saber la diferencia entre un plugin y un loader, ya que estos no son sinónimos. El plugin es código que es capaz de modificar la compilación, como en el caso de Babel, el cual transpila el código, modificando la compilación.
.
Por otro lado, el loader funciona antes de que se haga la compilación, por lo que no afecta a esta. Sabiendo eso, el plugin es mucho mas difícil de manejar que el loader (en relacion a darle mantenimiento y esas cosas).

Si alguien presenta este Warning:

Es debido que a partir de React 18 el método “ReactDOM.render” no es soportado como lo indica el mensaje, en su lugar el código del archivo index.js debe ser así:

import React from "react";
import ReactDom from "react-dom/client";
import App from "./component/App";

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

Tuve problemas para visualizar la información
Lo resolvi con esto
Index

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

createRoot(document.getElementById('app')).render(<App />)

App

import React from 'react';

function App() {
  return <h1>Hello world!</h1>
}
export default App;

webpack

const path = require('path');
const htmlPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new htmlPlugin({
      // CONFIGURACIÓN DEL PLUGIN
      // INYECTA EL BUNDLE AL TEMPLATE HTML
      template: './public/index.html',
      filename: './index.html'
    })
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "dist/"),
    },
    compress: true,
    port: 3006,
    open: true,

  }
}

package

 "start": "webpack serve --mode development --config webpack.config.js",

Hola. Si alguien está haciendo este curso con React en versión 18, el archivo index.js debe quedar así:

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

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

Este error :

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. 

se soluciona con esto:

devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: XXXX,
  },

Tuve problemas a la hora de visualizar el “Hello React” pero con esto pude resolverlo por si a alguien le sirve n.n

Si te da error en el dev Server al ejecutar “npm run start”

//OLD
devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3306
    }

NEW
devServer: {
static: {
directory: path.join(__dirname, ‘dist’),
},
compress: true,
port: 9000,
},

LINK: https://webpack.js.org/configuration/dev-server/

en el video anterior de HTML donde el profe explicaba como agregarlo a un proyecto vanilla, me di cuenta que no agrego el loader de html, porque con react si ?

24.-Configuración de plugins y loaders para React

.
Agregaremos los plugins y loaders faltantes y los configuramos.

• HTML:

  //Instalación
  npm install html-loader html-webpack-plugin -D
  
  //Configuración
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  
  rules: [
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader",
            },
          ],
        },
      ],
  
  plugins: [
      new HtmlWebpackPlugin({
        template: "./public.index.html",
        filename: ".index.html",
      }),
    ],
  

• Añadimos los scripts en package.json y probamos que funcionen:

  "scripts": {
      "start": "webpack-dev-server",
      "build": "webpack --mode production"
    },	
  

ahora en vez de contentBase se usa static. changelog comment; https://github.com/webpack/webpack-dev-server/issues/2958#issuecomment-757141969

Ahora necesitamos el loader y el plugin para trabajar con HTML:

npm install  html-loader html-webpack-plugin -D

Primero necesitamos traer los recursos:

const HtmlWebpackPlugin = require('html-webpack-plugin');

Ahora tenemos que trabajar con ese loader, asi que agregaremos una nueva regla;

{
   test: /\.html$/,
   use: [
     {loader: 'html-loader'}
       ]
  }

Ahora agregamos nuestro arreglo de plugins donde agregamos el html webpack plugin:

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

Tenemos que probar que todo funciona creando los scripts haciendo el build y el servidor local:

Si te sigue dando error, prueba de esta forma:

import React from “react”;
import { createRoot } from 'react-dom/client’
import App from ‘./components/App’

const rootElement = document.getElementById(‘app’);
const root = createRoot(rootElement)

root.render(
<App/>
);

Sale muchos errores, por favor actualicen los cursos:))

Actualización React 18 👀

Desde Marzo de 2022, la forma de renderizar la raíz en React cambio, mira la documentación. Por lo tanto, el código que el profesor usa en el archivo index.js no es soportado, generando un archivo html en blanco con un mensaje en consola similar al siguiente:

❌ index.js:8 Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_0__.render is not a function
    at eval (index.js:8:47)
    at ./src/index.js (bundle.js:29:1)
    at __webpack_require__ (bundle.js:143:41)
    at bundle.js:195:37
    at bundle.js:197:12

Lo que debes hacer es remplazar el código del profesor por el siguiente:

ReactDOM.createRoot(document.getElementById('App')).render(<App/>)

Me arroja este warning

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  bundle.js (251 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (251 KiB)
      bundle.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.72.1 compiled with 4 warnings in 8758 ms```

por si a alguien le molesta el overlay en la pantalla con los warnings. dentro de las configuraciones del devServer poner lo siguiente:

 client:{
      overlay: {
        warnings: false,
        errors: true
      }
    }

Esto solo mostrará el overlay en caso de tener errores.

Por si les sale un error como ami sobre que no reconoce el contentBase me sirvio esta solucion,

 devServer: {
        static: path.join(__dirname, 'dist'),
        compress: true,
        port: 3006
    }

el flag de dependencia al final es mas entendible

npm i html-loader html-webpack-plugin -D

Fabuloso!!!, sera que alguien se sabe toda esa configuración de memoria?

Para que se abra automáticamente la ventana de nuestro proyecto, como lo hace react.

En nuestro webpack.config.js agregamos la propiedad:

open: true

    devServer: {
        static: path.join(__dirname, 'build'),
        compress: true,
        open: true, 
        port: 3000
    }

👌

Ayuda con este error please!!

Alguien sabe solucionar este poco de errores?😦

Compiled with problems:X

WARNING in ./src/index.js 5:11-30

export 'ReactDOM' (imported as 'ReactDOM') was not found in 'react-dom' (possible exports: __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, createPortal, createRoot, findDOMNode, flushSync, hydrate, hydrateRoot, render, unmountComponentAtNode, unstable_batchedUpdates, unstable_renderSubtreeIntoContainer, version)


WARNING in ./src/index.js 6:46-49

export 'App' (imported as 'App') was not found in './components/app.jsx' (possible exports: default)


WARNING

configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/


WARNING

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (248 KiB)


WARNING

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (248 KiB)
      bundle.js


WARNING

webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

devServer: {
static: {
directory: path.join(__dirname, “dist”),
},
compress: true,
port: 3006, //Podemos elegir el que queramos
},

Esta combinación entre React y Webpack es super increíble =)

Para los que se les presente el siguiente error: react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more
Deben modificar el importar, como la implementacion del renderizado de react:

<code> import React from "react";
import ReactDOM from "react-dom";
import App from './components/App'

const app = ReactDOM.createRoot(document.getElementById("app"));
root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

Nueva configuración del devServer

  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
  },

Si alguien está realizando este curso más recientemente, tuve un problema a la hora de visualizar el componente en de “Hello React”.

Revisando la documentación de React, la forma que me aceptó para crear el componente es la siguiente:

import React from 'react';

//Sintaxis actual para definir componentes React
const App = <h1>Hello React!</h1>  

export default App;

A mi me genero un error al correr npm start relacionado con fallback, creo que es por no especificar el modo en el que se ejecuta webpack. Lo solucione modificando el script “start” de la siguiente forma

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

Rules - Reglas

rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [{ loader: "html-loader" }],
      },
    ],

Me llegó a dar el siguiente error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'html-loader'

Para solucionarlo, me sirvió volver a instalar html-loader y html-webpack-plugin, que por algún motivo, no estaban en el package.json.

npm install html-loader html-webpack-plugin -D

Guide Loaders and Server

1. Instalar

npm install html-loader html-webpack-plugin -D 

1. Importamos el modulo:

const HtmlWebpackPlugin = require('html-webpack-plugin');

1. Agregamos las configuración en el objeto module.exports:

module.exports = {
//...
     test: /\.html$/,
                use: [
                    {loader: 'html-loader'}
                ],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './public/index.html',
          filename: './index.html'
        })
		

a alguien le ha pasado que le sale localhost:8080? y de ser asi, como se soluciona eso???

–Necesito ayuda, me arroja un error cuando realizo la primera compilacion con npm run start.

> curso-webpack-react@1.0.0 start /media/dcordova/TOSHIBA EXT/ESTUDIOS/PLATZI/WEBPACK/curso-webpack-react
> webpack-dev-server ./src/index.js/

internal/modules/cjs/loader.js:905
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /media/dcordova/TOSHIBA EXT/ESTUDIOS/PLATZI/WEBPACK/curso-webpack-react/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/media/dcordova/TOSHIBA EXT/ESTUDIOS/PLATZI/WEBPACK/curso-webpack-react/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/media/dcordova/TOSHIBA EXT/ESTUDIOS/PLATZI/WEBPACK/curso-webpack-react/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! curso-webpack-react@1.0.0 start: `webpack-dev-server ./src/index.js/`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the curso-webpack-react@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dcordova/.npm/_logs/2021-06-30T04_23_51_993Z-debug.log

TUve probelmas para instalar webpack y las demás dependencias, pero encontre en Stack este comando y me funcinó

npm uninstall webpack webpack-cli webpack-dev-server

npm install webpack webpack-cli webpack-dev-server --save-dev

configuracion local:
“start”: “webpack serve”

configuracion en produccion:
“build”: “webpack --mode production”