No tienes acceso a esta clase

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

Crear rutas del sitio

8/16
Recursos

Aportes 78

Preguntas 21

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

La palabra reservada async sirve para indicarle a nuestro JavaScript que vamos a definir una funci贸n as铆ncrona.
Cuando se llama una funci贸n async, esta devuelve un elemento Promise. Cuando la funci贸n async devuelve un valor. Promise se resolver谩 con el valor devuelto por la funci贸n async

La expresi贸n await pausa la ejecuci贸n de la funci贸n async y espera la resoluci贸n de la Promise pasada. Una vez esta es resuelta. Reanuda la ejecuci贸n de la funci贸n async y devuelve el valor resuelto.

La finalidad de las funciones async/await es simplificar el comportamiento del uso s铆ncrono de promesas y realizar alg煤n comportamiento espec铆fico en un grupo de Promises. Del mismo modo que las Promises son semejantes a las devoluciones de llamadas estructuradas, async/await se asemejan a una combinaci贸n de generadores y promesas.

Esta info la he sacado de MDN 馃槃

Les recomiendo instalar el plugin Relative path para buscar r谩pidamente sus archivos.

Una hora buscando un bug y resulta que en webpack.config.js escrib铆 templade , en lugar de template. Odio cuando eso pasa jaja.

Para los que le sale el error en cosola, a partir de Babel 7 debemos instalar @babel/polyfill deben鈥 para eso deben hacer lo siguiente:

  1. En la terminal ejecutan npm install --save @babel/polyfill

  2. Van al archivo webpack.config.js y en 鈥渆ntry鈥 agregan:

entry: ['@babel/polyfill', './src/index.js'],

Despues de eso corren el comando 鈥渂uild鈥 y luego el comando 鈥渟tart鈥 y chequen si ya no les sale el error en consola y lo mas importante que les aparezca el header!

todo esto se parece mucho a crear componentes en React

Si llegas a tener un error referido a regeneratorRuntime es debido al asincronismo. Estuve toda la tarde de viendo c贸mo solucionarlo y result贸 ser bastante sencillo. Les sugiero que lean y comprendan bien lo que pasa para saber el por qu茅 del proceso

驴Por qu茅 el problema?

Babel utiliza multiples modulos peque帽os para hacer funcionar ciertas de sus caracteristicas. Una cosa a tener en cuenta es que transpilar el codigo no lo hace 100% compatible con navegadores antiguos, a veces es necesario acompa帽arlo de polyfills (fragmentos de c贸digo que emulan una funcion del lenguaje en caso de no tenerla disponible)

Una de las cosas que no soporta Babel de por s铆 son las funciones as铆ncronas, por lo que tenemos que darles soporte a partir de una librer铆a. El profe en la clase de preparacion de webpack instala una, pero haciendo otro proyecto no me funcion贸.

Para darle soporte general a metodos del lenguaje anteriormente Babel utilizaba un modulo propio llamado @babel/polyfill, que era una combinacion de 2 modulos independientes llamados core-js y regenerator-runtime. Este fue deprecado en la version 7. Por lo que ahora nos conviene directamente importar ambos m贸dulos

Instalaci贸n de las librer铆as

Primero instalan las siguientes librer铆as en npm o yarn:

npm install core-js
npm install regenerator-runtime

luego en el archivo principal de su aplicacion (index.js) lo importan

// CommonJS
require("regenerator-runtime/runtime");
 
// ECMAScript 2015
import "regenerator-runtime/runtime.js";

P茅ro 驴Por qu茅 estos archivos?

Core-JS es una librer铆a super util que reune un monton de polyfills que pod茅s importar de forma general o espec铆fica. COmo buena practica, para evitar que tu programa sea pesado, se recomienda importar solamente los polyfills de los features que vayas a utilizar (ej, async, promesas, clases) Pero com贸 descubr铆 todo esto ayer lo reduzco a importarlo de forma general como hice arriba jeje 馃槢

Regenerator-Runtime es una librer铆a que principalmente le da soporte a las funciones asincronas en entornos donde no son soportadas. Me imagino que tendr谩 otras funciones, pero principalmente se la usa por ese motivo. Realmente para que no nos de error solo es necesario 茅sta librer铆a, pero acordemonos de que nuestra intenci贸n es darle soporte a todos los navegadores posibles

Sugiero entender bien el uso de ambas librer铆as porque son muy importantes y les ser谩 de mucha ayuda cuando sean avanzados

Enlaces para entrar en contexto (en ingles)

regenerator-runtime - npm

core-js - npm

Babel polyfill is dead. Long live core-js!

What is regenerator-runtime npm package used for?

Esta es toda la explicaci贸n, es problable que no sea 100% rigurosa, por lo que si tienen algo que aclarar o corregir, su feedback es bienvenido ^-^

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

// ROUTES TO BE RENDER
const  routes = {
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact',
};

//ROUTER
const router = async () => {
    // stablishing templates to dom
    const header = null || document.getElementById('Header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
};

export default router;```

si hay que reiniciar el server para que funcione correcto!

Me voy a hacer bolas con tanto archivo index

En muchos cursos veo el problema de que avanzan mucho con el codigo sin ir mostrando resultados de a pocos, creo que asi seria mas logico para alguien nuevo como y porque suceden las cosas.

A los que tengan un error como este ReferenceError: regeneratorRuntime is not defined en consola, hagan lo siguiente:

instalar las siguientes dependencias :

npm install --save core-js
npm install --save regenerator-runtime  

Luego en el archivo index,js (el que se encuentra en el root de src), importar las siguientes librerias:

import "core-js/stable"; //importar esta lib
import "regenerator-runtime/runtime"; //importar esta otra lib
import router from './routes/index';

window.addEventListener('load', router);

Ahora entiendo porque pusimos en el fichero Home.js lo siguiente:

<a href="#/1/">

Cuando pulsemos en el link. Nos llevar谩 a la ruta personalizada de cada Character.js
En este caso cada id corresponder谩 a cada uno de los personajes que metamos.

馃槃 No lo entend铆a hasta ahora鈥

Avanzando super animado con el curso.

Para los que no entienden porque el profe usa Await en la funcion Header().

  1. Para esperar el Render del DOM.
  2. El profe usa el evento 鈥渓oad鈥 , este evento se utiliza para saber si la pagina ha cargado. Sin embargo, cuando hablamos de render en el DOM hablamos de estados.
  3. Los estados son pasos que va cumpliendo el DOM hasta llegar al render final de la web, estos son:
  • Loading: cargando
  • Interactive: el documento ha cargado y ha sido parseado. Pero sub recursos como estilos, imagenes, scripts, frames aun no.
  • DomContentLoaded, la pagina cargo correctamente. Sin necesidad de esperar que cargen los estilos, scripts y imagenes.
    (Y esto para que? Bueno aqui ya podemos acceder al DOM porque sus nodos esta fully cargados y no dependen de los estilos, es decir, el tree HTML esta listo Construido)
  • Complete: La p谩gina carg贸 con todos los recursos, imagenes, estilos y scripts y esta a punto de lanzar el evento 鈥淟oad鈥
    -Load: La p谩gina entera cargada y terminada.

Ahora, tenemos que esperar todos estos pasos para ejecutar esta funci贸n? No necesariamente, porque aunque sabemos que la construcci贸n de todo esto se hace demaciado rapido. Cuando queremos acceder, nuestras funciones tambi茅n acceden demasiado rapido, y podemos estar haciendo un request de algo al DOM que aun no existe.

Con await, le decimos a nuestra funci贸n. Ejecutante si y s贸lo si. El evento 鈥渓oad鈥 ya ha sido lanzado, has un await de esto.

Aqui les muestro el LOG de los Eventos. Un imagen vale mas que 1000 palabras.

Espero les sirva de ayuda!

En la versi贸n actual de Webpack, para utilizar babel hace falta crear un archivo .babelrc y crear un objeto con una especificaci贸n de como manejar谩 nuestro c贸digo. Pero primero hay que ir a npm y:
npm i @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime babel-loader -D

    "presets": [
        "@babel/preset-env" //Est贸 es lo que nos permite trabajar con JavaScript moderno y babel lo transpile a versiones entendibles para los navegadores.
    ],
    "plugins": [
        "@babel/plugin-transform-runtime" // ESTE ES MUY IMPORTANTE PARA LA CLASE. Este plugin nos permite trabajar con funciones asincronas(promesas, async/await, cb) As铆 que si vienes del curso de Webpack, recuerda utilizar estas configuraciones. Y si no lo has hecho. agrega estas configuraciones y espero te ayude
    ]
}```

En mi caso tenia un typo en 鈥./public鈥︹ ufff ahhhaah

Por que me construye la aplicacion pero no me aparece el header?

Que genial! Seguramente si el reto hubiera sido detectar este bug hubiera sido un dolor de cabeza jaja

Si no van con afan, les recomiendo al terminar la seccion 4, borrar la carpeta y empezar otra vez el curso, se entiende mucho mas el repetir ya que js al inicio es complicado

Esto de implementar templates de HTML en Js dentro del DOM es muy interesante.

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

//rutas
const routes = {
    '/': Home, // establecemos la ruta:hace render de Home
    '/:id': Character, // ruta con valor dinamico id: hace render en los personajes
    '/contact': 'Contact', // establecemos la ruta: y este hace render de Contact
}

//manejador(obtener valores y com utilizarlos)
const router = async() => {
    const header = null || document.getElementById('header'); // Elemento header hacia donde voy hacer el render
    const content = null || document.getElementById('content'); // Elemento content hacia donde voy hacer el render

    header.innerHTML = await Header();
};
export default router;```

Por esto me gusta mucho TypeScript por encima de Babel, nos ayuda a resolver posibles problemas antes de correr nuestra aplicacion.
Al principio se puede sentir muy pesado o inneceario para aplicaciones peque帽as, pero vale muchisimo la pena con el tiempo, con practica se te vuelve normal y desarrollas incluso mas rapido detectando errores mas temprano.

Para los que NO les carga el codigo del template del header al final de este video, hagan los siguiente:

  1. Instalen el plugin por linea de comando,escribanlo asi: npm install @babel/plugin-transform-runtime -D

  2. Luego agreguen un archivo en la raiz del proyecto y llamenlo: .babelrc 鈥> el punto al inicio es un indicador de que es un archivo oculto;

  3. En este archivo agreguen este plugin de runtime, la forma como lo tienen que hacer lo pueden ver en el minuto 4:10 de la clase 6 llamado 鈥淏abel Loader para Javascript鈥 , del curso de WEBPACK que tambien esta en esta escuela. En ese video, Oscar Barajas explica bien como se tiene que escribir tal plugin.

  4. Por ultimo vuelva a ejecutar el codigo: npm run start

A mi me funcion贸 luego de tener en cuenta todo eso !!

Exitos !!

A mi no me salio el error de 鈥榠nnerHTML鈥

Yo he tenido problemas con webpack-cli porque desde la versi贸n 4.0 ha habido cambios en su estructura de carpetas por lo que ya no es compatible con webpack-dev-server, ahora les recomiendo usar el siguiente script

"start": "webpack serve"

y agregar las siguientes lineas al webpack.config.js

devServer: {
    port: 3000,
    open: true,
  },

Resumen de la clase:

Crear las rutas del sitio

Nos movemos a la carpeta routes y creamos el archivo index.js

import Header from '../templates/Header';
import Home from '../pages/home';
import Characters from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Characters,
    '/Contact': 'Contact',
}

// Creamos el router

const router = async () => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
    
}

export default router;import Header from '../templates/Header';
import Home from '../pages/home';
import Characters from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Characters,
    '/Contact': 'Contact',
}

// Creamos el router

const router = async () => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
    
}

export default router;
import router from './routes'

window.addEventListener('load', router);```

Parezco un ni帽o, pero me emociono mucho cuando funciono 馃挌

Excelente que haya aparecido ese error, es lo que vivimos d铆a a d铆a, lo interesante es que mientras m谩s programamos, m谩s sencillo es resolver estos errores.

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

https://github.com/ivallejo/Cientifico

Podemos crear alias con webpack, para que sea un poco mas f谩cil importar las paginas y templates. Tenemos que ir al archivo de configuraci贸n de webpack y en resolve agregar una nueva propiedad llamada alias

    resolve: {
        extensions: ['.js'],
        alias: {
          '@styles': path.resolve(__dirname,'src/styles'),
          '@pages': path.resolve(__dirname,'src/pages'),
          '@routes': path.resolve(__dirname,'src/routes'),
          '@utils': path.resolve(__dirname,'src/utils'),
          '@template': path.resolve(__dirname, 'src/templates')

        }
     },****

A mi no me estaba funcionando dado que en el HTML tenia los id de los objetos como 鈥榟eader鈥 en min煤scula, y al momento de hacer el document.getElementById(鈥楬eader鈥) colocaba 鈥楬eader鈥 con may煤scula, por este sencillo typo no me funcionaba la aplicaci贸n, para que lo tengan en cuenta chicos.

tenia el mismo problema lo solucione y tampoco me dio pase mas de 1 hora tratando de solucionarlo hasta que lei un comentario donde decia reinicia lo hice y me funciono XD

import Home from '../Page/Home'
import Character from '../Page/Characters'
import Error404 from '../Page/Error404'
import Header from '../templates/Header'

const routes={
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact'
}

const router = async()=>{
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML=await Home();
};

export default router;

Un gran 鈥渢ip鈥, para los que est茅n haciendo 茅ste curso. Vayan ahora mismo (abrir otra ventana), y vean el curso de webpack (nuevo). Pueden ir viendo ambos cursos (complementan), para que les ayude a resolver dudas.

Si utilizan alias, no tienen que escribir esas rutas no tan friendlys para leer:
.
webpack.config.js

resolve: {
        extensions: [".js"],
        alias: {
            '@templates': path.resolve(__dirname, 'src/templates/'),
            '@pages': path.resolve(__dirname, 'src/pages/'),
            '@utils': path.resolve(__dirname, 'src/utils/')
        }

    },

routes/index.js

import Header from "@templates/Header";
import Home from "@pages/Home";
import Character from "@pages/Character"; 
import Error404 from "@pages/Error404";
import getHash from "@utils/getHash";
import resolveRoutes from "@utils/resolveRoutes";

Routes/ index.js

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact'
};

const router = async () => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
};

export default router;



Me pareci贸 m谩s interesante utilizar 鈥楧OMContentLoaded鈥 en el addEventListener, la diferencia es que 鈥榣oad鈥 espera a que los estilos, im谩genes, etc. de nuestro documento est茅n completamente cargados, en cambio, 鈥楧OMContentLoaded鈥 los omite as铆 que ser铆a m谩s eficiente.

Espero haber entendido bien la documentaci贸n. 馃槄

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

A different event, load, should be used only to detect a fully-loaded page. It is a common mistake to use load where DOMContentLoaded would be more appropriate.

Para los que este usando webpack 5 los comandos para el package.json ser铆an los siguientes.

  "scripts": {
    "build": "webpack",
    "start": "webpack serve --open"
  },

Si tienen errores de runtime, agregar:

npm install core-js regenerator-runtime

Luego importar al 鈥榠ndex.js鈥:

    import "core-js/stable";
    import "regenerator-runtime/runtime";

Por si alguien tiene el siguiente error en consola:

Uncaught (in promise) TypeError: Object(...) is not a function
    at router

Solucion: deben de quitar los parentesis aqui:

header.innerHTML = await Header

Un error de comillas en el header 鈥espiro profundo. vamos bien ahora

Me sale este error, alguien por ahi que me ayude? 馃槮 Gracias!

Una vez que ejecutamos en comando npm run start.
驴Que comando debo utilizar para poder seguir usando la terminal?

Despues de varios errores ya funciona jejeje

Profe Oscar y compa帽eros de Platzi, despejenme de una duda, de las muchas que tengo sobre JS. Se puede hacer una app que suba archivos PDF, los descargue, administre usuarios y maneje perfiles solo con Vanilla鈥?? O se debe usar alguna herramienta de JS como REACT JS o Angular鈥?

驴Si quiero usar Bootstrap donde tendr铆a que poner los scripts?

tengo una duda en el archivo index el profe hace un import router from 鈥樷/routes鈥; no deberia agregar /index ejemplo :
import router from 鈥樷/routes/index.js鈥;

asi cuando te sale m谩s de un error jajajajajajaja

Link del resumen Notion , por ahora es un draft, ya lo ire puliendo y sintentizando mas mientras avanzo en el curso pero igual les puede ser de ayuda.

Resumen de la clase:
Preparamos las rutas de la app en router/index.html , las exportmaos y las usamos en entry - 鈥榮rc/index.html鈥 (archivo de entrada) de nuestra app, a帽adimos un sensor (addEventListener) detectando el 鈥榣oad鈥 y renderizando nuestros templates llamando la funcion route que exportamos desde router/index.html

Tuve varios errores pero analizando cada linea de c贸digo pude verificar varios typos.

ayuaaaaa me vota esto

tml Webpack Plugin: 
  Error: Child compilation failed:
  Entry module not found: Error: Can't resolve 'C:\Users\Juan Pablo\Desktop\ejer  cicio platzi\cientifico\public\index.html' in 'C:\Users\Juan Pablo\Desktop\eje  rcicio platzi\cientifico':
  Error: Can't resolve 'C:\Users\Juan Pablo\Desktop\ejercicio platzi\cientifico\  public\index.html' in 'C:\Users\Juan Pablo\Desktop\ejercicio platzi\cientifico  '
  
  - child-compiler.js:122 
    [cientifico]/[html-webpack-plugin]/lib/child-compiler.js:122:18
  
  - Compiler.js:343 
    [cientifico]/[webpack]/lib/Compiler.js:343:11
  
  - Compiler.js:681 
    [cientifico]/[webpack]/lib/Compiler.js:681:15
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [cientifico]/[tapable]/lib/Hook.js:154:20
  
  - Compiler.js:678 
    [cientifico]/[webpack]/lib/Compiler.js:678:31
  
  
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook
    [cientifico]/[tapable]/lib/Hook.js:154:20
  
  - Compilation.js:1423 
    [cientifico]/[webpack]/lib/Compilation.js:1423:35

Ese error no lo habr铆a encontrado nunca

como haces para que el indexado te salga de colores??

Genial

import router from './routes'

window.onload = router```

Wow!!! Incre铆ble. Dudo haber podido encontrar un problema as铆 de espec铆fico en una herramienta que he usado tan poco 馃槂.

Recordatorio: Siempre mirar la documentaci贸n!

Oscar es un muy buen profesor, es de los pocos cursos que he hecho que no me estrello con errores graves.

Vaya, sin ayuda de Oscar creo que hubiera sido imposible encontrar ese error, Que gran curso, A pesar de no haber realizado algunos curso ya que sigo con la carrera de Desarrollo FrontEnd, se entiende perfectamente lo que estamos haciendo

A mi me paso que no reconocio el archivos Index.js importando de asi:

import router from './routes';

Fui m谩s especifico:

import router from './routes/Index';

Por lo menos no fue necesaria la extension, casi se me rompe la cabeza buscando cual era el problema jeje.

鈥 mi, despues de revisar el codigo y darle un monton de vueltas me funciono agregandole en el html el script llamando a main.js y en la consola ejecutando la opcion npx webpack

Hola! una pregunta que no me quedo claro, por que coloca la funcion router como asincrona ? muchas gracias de antemano

Rutas

import Header from '../templates/Header';
import Home from '../pages/Home';
import Character from '../pages/Character';
import Error404 from '../pages/Error404';

const routes = {
    '/': Home,
    '/:id': Character,
    '/contact': 'Contact',
}

const router = async() => {
    const header = null || document.getElementById('header');
    const content = null || document.getElementById('content');

    header.innerHTML = await Header();
}

export default router;

Tengan cuidado cuando son confiados con el autocompletafo. Yo lo utilice para el getElementById y me coloc贸 getElementsById jaja

Aguas con los typos

Algo que no aparece en los repos de esta clase es la l铆nea que llama el JS en el archivo HTML. 馃槈
Recuerden que eso puede hacerse de muchas formas, pero
<script src="../src/index.js"></script>
Puede ser una de ellas

隆MIlagro! No tuve ni un solo error esta vez. 馃槂

驴Tengo todo bien, actualizado y al pie de la letra, sirvo para esto o por que no me carga?

Esa fue la pregunta que me dije cuando verifiqu茅 el porqu茅 del error de que no me cargara el Header.
Despu茅s de unos 30 minutos viendo c贸digo, me puse a pensar: "Mejor sigo los pasos como me dijo Diego de Granda del curso de ** Debugging con DevTools** "
驴Qu茅 fue lo que pas贸? Encontr茅 algo importante: Un console.log que me dec铆a 鈥淗ello鈥

Hello

Imposible! Pens茅, por que ya hab铆a cambiado el c贸digo de index, pero al darle seguimiento me di cuenta que el navegador, no cargaba los cambios actualizados de index. Significaba que una fuerza sobrenatural (o simplemente, la cach茅 xD) no dejaba acutualizar los cambios.

Mi soluci贸n Despu茅s de tantos cabezasos fue refresh de la cach茅 (si no funciona intenta reiniciar el equipo, tambi茅n es una forma de limpiarla a veces jaja)

Esas peque帽as cosas son por las cuales creo esos cursos peque帽os son de gran ayuda Curso de Debugging con Chrome DevTools

me pase casi un d铆a y medio tratando de encontrar un error que no se reflejaba en consola del navegador ni en la terminal, ya me hab铆a frustrado demasiado y observando mi c贸digo me percate de un typo el cual tenia puesto

 header.innerHtml = await Header();

y no funcionaba simplemente por que Html debe ir en may煤sculas de la siguiente manera

 header.innerHTML = await Header();

Quiz谩s no iba a encontrar este error, solo por que lo comenc茅 a comparar con el c贸digo de la clase me di cuenta

Dejo los imports por aqui por si ha alguien les sirve

import Header from "../templates/Header"
import Home from "../pages/Home"
import Charater from "../pages/Character"
import Error404 from "../pages/Error404"

Me aparece este error:
C:\Users\patricio\cientifico>npm run start

[email protected] start C:\Users\patricio\cientifico
webpack-dev-server --open --mode development

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

Error: Cannot find module 'webpack-cli/bin/config-yargs鈥
Require stack:

  • C:\Users\patricio\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (C:\Users\patricio\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions鈥s (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
    code: 鈥楳ODULE_NOT_FOUND鈥,
    requireStack: [
    鈥楥:\Users\patricio\cientifico\node_modules\webpack-dev-server\bin\webpack-dev-server.js鈥
    ]
    }
    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\patricio\AppData\Roaming\npm-cache_logs\2021-02-08T20_35_18_960Z-debug.log

Creo si no estoy mal, nativamente (sin un precompilador como webpack) un import sin la extension .js no se puede realizar, digamos JS vanilla, vanilla. xdd

驴Es normal que tengamos m谩s de un archivo index.js?

Tengo este error y no he podido solucionarlo. Alguien podria ayudarme? Gracias.

f

porque en el router tambi茅n se le llama index.js 驴se puede llamar router.js por ejemplo? o es necesario el index

Cuando ustedes le asignan un id a un elemento de HTML, tambi茅n lo pueden llamar as铆:

<div id="miSeccion">

//En el archivo de JavaScript lo pueden obtener as铆

window.miSeccion

No es buena pr谩ctica, es s贸lo otra forma de obtener los elementos 馃槃