Estoy tratando de aprender React y Javascript. Trato de entender cómo funciona la import y export en ES6, así que coloco los tres archivos index.html , index.js y lib.js en la misma carpeta. Cuando index.js en mi archivo html, me dio el error
Uncaught TypeError: Failed to resolve module specifier "lib". Relative references must start with either "/", "./", or "../". Cuando cambié el nombre de index.js a index2.js , todo funcionó bien. Creo que el problema es que se suponía que no debía poner index.html e index.js en la misma carpeta, pero no entiendo por qué. ¿Pueden algunos por favor explicar?
índice.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>Document</title> </head> <body> <h1>Hello World!</h1> <script type="module" src="./index.js"></script> </body> </html>índice.js
import {square} from './lib.js' console.log(square(3))lib.js
export function square(x){ return x*x };Se produce un error cuando vincula index.js porque 2 archivos no pueden tener el mismo nombre que ningún otro archivo en la carpeta, incluso si tienen extensiones de archivo diferentes. Es por eso que cuando cambia el nombre a index2.js no da error.
En realidad, no son los archivos que tienen el mismo nombre en la misma carpeta que la página web, descubrí que si usa Firefox en lugar de Chrome, el problema desaparece.