No tienes acceso a esta clase

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

Crear p谩gina de error 404

7/16
Recursos

Aportes 68

Preguntas 22

Ordenar por:

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

o inicia sesi贸n.

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? 馃槮

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

鈥渟tart鈥: 鈥渨ebpack-dev-server --open --mode development鈥

por

鈥渟tart鈥: 鈥渨ebpack 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, 鈥榮tring鈥, value);
^

TypeError [ERR_INVALID_ARG_TYPE]: The 鈥減ath鈥 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鈥s (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: 鈥楨RR_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

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 鈥榳ebpack-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 鈥榳ebpack-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.

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

驴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',
            }
        ])
    ]
}

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 鈥渉ello鈥 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 鈥榗ontentBase鈥. 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 鈥榳ebpack-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 鈥減ackage.json鈥 modifiquen el scipts por:

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

y en el archvio 鈥渨ebpack.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 鈥渨ebpack-dev-server鈥 a 鈥渨ebpack 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鈥檈 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 鈥榳ebpack-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?