Crear página de error 404

Es la primera vez en el curso que no me aparece ningun error. Agradecido con el de arriba!

PARA LOS QUE TIENEN ALGÚN ERROR AL EJECUTAR EL SCRIPT DE START:

En el script de start del package.json hacer el siguiente cambio, ya que en la nueva versión de webpack-cli funciona así

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

alguien mas le pasa este error? 😦

https://http.cat/

Despues de toda esa configuracion, la emocion que senti cuando todo salio bien, no fue normal!!!
Eso es gracias a tan buen profesor!

Para limpiar la terminal también pueden pulsar las teclas:

Ctrl + L

me compilo bien, pero no me aparecio el hello en la consola

const Error404 = () => {
    const view = `
        <div class="Error404">
            <h2>Error 404</h2>
        </div>`;
    return view;
};
export default Error404;

Wenas a tod@s;

Para los que tengan errores cuando dan en la terminal npm run start, esta es la solucion que encontre:

Cambiar en el archivo package.json el script

“start”: “webpack-dev-server --open --mode development”

por

“start”: “webpack serve --open --mode development --env development”

Dejenme saber si les funciono.

Aqui el link de la info.

<h1> Para quienes les da error </h1>

ESTE ERROR ME PASO EL DIA 21/11/2020

No se si mañana esto siga funcionando cualquier cosa comentan

Si tenes errores a la hora de usar el

npm run start

Intenta actualizar Webpack, webpack server, webpack cli, webpack-dev-server, etc (googleando se encuentra pero en ingles)

y si aun asi te da error como a mi cambia en el PACKAGE.JSON la linea que dice

    "start": "webpack-dev-server --open --mode development"

por

    "start": "webpack serve"

Espero les sirva, y si dejan un corazon para que la respuesta se posicione primera estariamos ayudando a mucha gente.

Saludos y no se frustren como yo jajajj

¿Cómo puedo poner el inspector de elementos en chrome en modo oscuro?

Tengo el siguiente error:

[email protected] start C:\Users\RobertDev\Documents\Cursos\5.CursoSinglePageApp\cientifico
webpack-dev-server --open -mode -development

internal/validators.js:112
throw new ERR_INVALID_ARG_TYPE(name, ‘string’, value);
^

TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type object
at validateString (internal/validators.js:112:11)
at Object.isAbsolute (path.js:353:5)
at module.exports (C:\Users\RobertDev\Documents\Cursos\5.CursoSinglePageApp\cientifico\node_modules\webpack-cli\bin\utils\convert-argv.js:34:13)
at Object.<anonymous> (C:\Users\RobertDev\Documents\Cursos\5.CursoSinglePageApp\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:40)
at Module._compile (internal/modules/cjs/loader.js:955:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11 {
code: ‘ERR_INVALID_ARG_TYPE’
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server --open -mode -development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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! C:\Users\RobertDev\AppData\Roaming\npm-cache_logs\2020-07-13T22_35_20_056Z-debug.log

¿No aparece el console.log?

Te voy a contar la forma en que encontré la solución.

En el editor de código abrí la pantalla dividida. De un lado el código que yo escribí siguiendo al profesor y del otro, el archivo final que se comparte en la sección de recursos.

Bueno, miré línea a línea, letra a letra. Pusé los códigos indentados igual y desde la terminal puse:

diff miArchivo.config.js archivoProfe.config.js

Y ahí lo ví.

Solución

Había escrito mal module.exports. En su lugar puse module.export sin la S final.

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

// module.export = { // Así estaba y no funcionaba
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js'],
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin([
            {
                inject: true,
                template: './public/index.html',
                filename: './index.html',
            }
        ])
    ]
}

Para evitar el error 404 de favicon, solo escribe esta linea en el head del HTML:

<link rel="shortcut icon" href="" type="image/x-icon">

El error sucede por que no encuentra el icono que iría en la pestaña

A alguien mas en la consola de chrome le da el siguiente error?

DevTools failed to parse SourceMap:

Error: Cannot find module ‘webpack-cli/bin/config-yargs’, si alguien tuvo este error es por la version del webpack cli.
En mi caso con este comando lo solucione:
npm install [email protected]

Al dìa de hoy 5/11/2020:
Error: Cannot find module ‘webpack-cli/bin/config-yargs’, el que le haya salido esto, puede instalar: npm i [email protected] en esta versiòn y luego coloca nuevamente el comando npm start y funciona.
😃

Dejo mi repositorio en el cual podrán encontrar una rama por cada clase en adelante.

https://github.com/ivallejo/Cientifico

• Crea el componente Error404
• Correr el servidor de webpac con los current changes

Aqui esta mi resumen de estos dos primeros modulos
es mas que nada codigo pero sirve para reforsar
notion.so

client:6 Uncaught Error: Cannot find module 'strip-ansi’
at webpackMissingModule (webpack:///(:8080/webpack)-dev-server/client?:6:81)
at Object.eval (webpack:///(:8080/webpack)-dev-server/client?:6:166)
at eval (webpack:///(:8080/webpack)-dev-server/client?:177:30)
at Object…/node_modules/webpack-dev-server/client/index.js?http://localhost:8080 (main.js:97)
at webpack_require (main.js:20)
at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:1:1)
at Object.0 (main.js:130)
at webpack_require (main.js:20)
at main.js:84
at main.js:87
me sale este error en consola

Para quienes sigan teniendo el problema de npm start o npm run start y ya probaron de todo, esta es una solución que se da en la siguiente clase y con esto se corrije.

La solución es eliminar los corchetes que no deberían ir. Alguien ya dio la solución en las primera clases pero no sabía exactamente cómo debía quedar y en la siguiente clase lo explica.

HTTP response status codes
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

const Error404=()=>{const view=`
    <div class="Error404">
      <h2>Error 404</h2>
    </div>
  `;return view;};export default Error404;

Hola Comunidad 🤘
A la fecha de 6 de abril del 2022, estas son las versiones de Webpack que me han funcionado para realizar el curso hasta el momento.

 "devDependencies": {
    "copy-webpack-plugin": "^6.4.1",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^5.71.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  }

Para los que como yo no les aparece el “hello” en consola, prueben agreegar esto al webpack.config.js:

devServer: {
        static: './dist',
},

Yo lo agregué antes de los plugiins y funcionó. Saludos.

Fuente: https://webpack.js.org/guides/development/

const Error404 = ()=>{
  const view = `
    <div class="Error404">
      <h2>Error 404 </h2>
    </div>
  `;
  return view;
}

export default Error404;

Un trucazo, en la parte final de las pestañas de los files abiertos damos doble click para generar un file nuevo pero temporal:

.
.
Posteriormente seleccionamos el lenguaje a html:

.
Con esto podemos escribir nuestra estructura html rapidamente y luego copiar y pegar en nuestro file js. Al cerrar la ventana del html temporal le decimos que no queremos guardar y listo!

Hola, ayuda please

Esto es lo que me sale:

[email protected] start
webpack serve --open --mode development

[webpack-cli] 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’. These properties are valid:
  object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

carlosarturomt-Aspire-A315-51%

"start": "npx webpack serve --open --mode development"

Hola, si a alguien le genera el error el script start, les dejo como me funciono a mi, lo hice con

npx webpack serve 

fui directo a la documentación de web pack y encontré que la manera de trabajar con web pack-server es esta, espero les ayude en algo, igual les dejo la documentación.

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

Hoy en día ya no es necesario agregar el run para ejecutar el comando start, basta con hacer:

npm start

"scripts": {
    "build": "webpack --mode production",
    "start" : "webpack server --open --mode development"

Template Error404

const Error404 = () => {
    const view = `
        <div class="Error404">
            <h2>Error 404</h2>
        </div>
    `;
    return view;
};

export default Error404;

Para los que no les compiló, agreguen el flag --env development al script start, con eso solucinan el problema de las versiones…

Hola que tal, como podria cambiar el puerto que viene por default a uno customizable?

x localhost:8080
o localhost:customizable

gracias

Resumen de la clase:

Creando Pagina de Error 404

En la carpeta pages creamos un archivo llamado Error404.js

const Error404 = () =>{
    const view = 
    `
        <div class="Error404">
            <h2>Error404</h2>
        </div>
    
    `
    return view;
}

export default Error404;

Continuamos con la ejecucion del proyecto.

Para ello ejecutamos el comando:

npm run start

Si tienes el siguiente error:

Error: Cannot find module ‘webpack-cli/bin/config-yargs’

Es por la version del webpack cli.

npm install [email protected]

3 horas tratando de resolver el error de cannot find module, tuve que modificar el webpack-dev-server.js

Excelente sin errores!!

Para mí fortuna todo salió bien !!

Es repetitiva la tarea de crear templates pero me agrado por que se me quedo pegado la forma en que se hace

estupendo sigamos 😄

Todo bien!

vamos al siguiente modulo!

Que geniaaaal, vamos bien

Tengo un error:
ELIFECYCLE
1
[email protected] start: webpack-dev-server --open --mode development
Exit status 1
Failed at the [email protected] start script.

Copie los archivos del profe, reinstale las dependencias npm, usé los archivos del compañero Fernando Vallejo y me sigue dando el mismo error.

Perfecto, ya he visto procedimientos parecidos como React y algunos Frameworks CSS, sigamos!

Yo tuve un problema al instalar el dev server y lo intenté instalar de nuevo pero me sigue saliendo el mismo error, adjunto la imagen del error que me sale por si alguien me puede ayudar , gracias.

Qué genial es no tener ningún error ni vulnerabilidad jajaja

Modo: 😮 me aparece incluso hasta el error del console de Oscar. nunca había seguido una clase tan bien.

{
  "name": "cientifico",
  "version": "1.0.0",
  "description": "single page application",
  "main": "index.js",
  "scripts": {
    "build":"webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "keywords": [
    "javascript"
  ],
  "author": "Wilkins Brito",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  }
}

cuando todo funciona de maravilla y sale ese compiled successfully, aunque no sea mucho se siente mas q bien 👏💚

Bom dia! ❤️

Listo y sin errores!!!.😁😎😃👍👌
![](

Excelente clase

Tengo este problema al ejecutarlo en la consola ya les paso mi codigo para que lo vean, les quedo agradecido que me den una mano, por favor.

A mi tambien me sale el mismo error que veo que a otros les pasa, nisiquiera el main.js me transpila, sigue escribiendo un hola mundo

Si tienen algun problema al correr el comando, en el archivo “package.json” modifiquen el scipts por:

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

y en el archvio “webpack.config.js” agreguen lo siguiente despues de plugins:

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

Ya completamos los Template del proyecto, ahora vamos con el Router.

Si a alguien mas le salta el error :
Cannot find module 'webpack-cli/bin/config-yargs’
yo lo arreglé cambiando “webpack-dev-server” a “webpack serve” en el Script

Hay un error de typo en webpack.config.js (falta el punto).

    resolve: {
        extensions: ['.js']
    },

¡Gracias Jorge Llanque!

Si les falla hoy dia webpack-dev-server, simpre pueden iniciar su server en webpack en modo dev y pasando el mod env

"dev": "webpack serve --mode development --env development"```

Para la version 5 de webpack, no funciona webpack-dev-server, por lo tanto se sugiere cambiar el script de start de la siguiente manera:

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

Para los que les marque error, prueben actualizando el webpack-cli a la version 4 les pedira actualizar webpack, a mi me funciono.

¿Alguien sabría porqu’e se me presenta el error al intentar correr el script de start?
dice qu eno encuentra el modulo en node_modules, ya borré la carpeta y reinstale todo de nuevo. revisé los archivos y no tengo typos, al menos si hay alguno no lo encuentro.

> 100tifico@1.0.0 start /mnt/c/Users/vrodriguez/Documents/Vilma/Otros/coding/100tifico
> webpack-dev-server --open --mode development

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

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/mnt/c/Users/vrodriguez/Documents/Vilma/Otros/coding/100tifico/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)  
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 100tifico@1.0.0 start: `webpack-dev-server --open --mode development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the 100tifico@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/vrodriguez/.npm/_logs/2020-11-30T05_28_56_560Z-debug.log
The terminal process "C:\WINDOWS\System32\wsl.exe -e npm run start" terminated with exit code: 1.

Terminal will be reused by tasks, press any key to close it.

capaz si alguno le pasa que salen mil quinientos errores en git y no les abre la pestaña de google
npm install webpack webpack-cli --save-dev
puse eso y me funciono

Me aparece err! code ENOENT

Para los que tienen el siguiente error :
Cannot find module ‘webpack-cli/bin/config-yargs’

Deben de instalar la version 3 de webpack-cli, al aprecer las nuevas versiones no son compatibles.

les dejo los pasos necesarios:
1.- ) Copia y pega en la terminal
npm install -D webpack-cli@3
2.- ) ejecuta
npm run start

y ya…! 😄

Alguien podría ayudarme con este error?