1

Soy nuevo en los ESmodules. Trato de hacer una prueba simple de carga de uno para probar, pero me da error. Tengo un HTML que carga el módulo y el js del módulo:

index.html

<script type="module">
    import {App} from './modules/app.js';
</script>
...
<script>
    var app = new App();
</script>

app.js

export class App{
    constructor(){
        console.log('App loaded');
    }
}

Resultado: Uncaught ReferenceError: App is not defined at (index):55

He probado varias alternativas:

  • Poner un timeout de 5s antes de instanciar App, por si fuese problema de que no está cargado el módulo todavía.
  • Cargar el módulo directamente en el src de la etiqueta script.
  • Poner default a la clase en el módulo.

No estoy usando Babel ni bundler alguno (quiero ver cómo funciona antes de complicar las cosas). Es un Chrome actualizado a última versión.

Gracias de antemano.

2
  • La única forma que puedas usar la sintaxis de módulos es sirviendo los mismos desde un servidor y no leyendolos desde una carpeta local. ¿Estás sirviendo tu sitio desde un servidor web? el 20 ago. 2020 a las 7:03
  • Efectivamente, ejecuto un servidor con node (usando http-server). De hecho, no da error de carga alguno, ni error de sintaxis. El módulo se carga y aparece cargado en la pestaña sources de las herramientas de desarrollo del navegador. el 20 ago. 2020 a las 7:16

1 respuesta 1

1

Une el código, estás importando la librería en un módulo pero luego quieres usarla fuera del mismo:

<script type="module">
    import {App} from './modules/app.js';
    //Script definido con tipo "módulo", App debería existir
</script>

...
<script>
    //Script que no es un módulo y no tiene acceso al módulo anterior
    var app = new App();
</script>

Seguramente te funcionará si haces algo como

<script type="module">
    import {App} from './modules/app.js';
    const app = new App();
</script>
1
  • Efectivamente, funciona. Y esto me hace entender muchas cosas del funcionamiento. ¡Muchas gracias! el 20 ago. 2020 a las 8:17

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.