es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Utilizando scripts específicos de página con Symfony 5 y WebPack en scripts en línea (plantilla de twig)

Estoy tratando de usar un módulo específico de página con un script en línea pero obtengo un error.
Al principio, creé un módulo y lo guardé en assets/js/tags.js

class TaggedImage {
    constructor(image) {
        this.image = image
    }
    ...
}
export {TaggedImage}

Luego agregué este módulo en webpack.config.js para una ruta específica:

js
Encore
    ...
    .addEntry('photo_page', './assets/js/tags.js')

Ahora estoy tratando de usar este módulo con un script en línea en una plantilla twig:

html
<script>
    const myImage = new TaggedImage(document.getElementById('photoImage'));
    const tags = [
            {x:0.5, y:0.5, width:0.15, height:0.22},
            {x:0.65, y:0.33, width:0.13, height:0.19},
            {x:0.1222, y:0.398, width:0.10, height:0.335}
        ];
    myImage.addTags(tags).render();
</script>

Luego ejecuté npm run dev en la terminal y finalizó sin errores.

…y después de actualizar la página, obtengo un error en la consola:

Uncaught ReferenceError: TaggedImage no está definido

Noté que mi código se agrega a /public/build/photo_page.js pero no veo ninguna mención de este archivo en la fuente de la página.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que el módulo TaggedImage no está siendo exportado/importado correctamente.

    Para solucionarlo, intenta agregar la siguiente línea al final de tu archivo assets/js/tags.js:

    export default TaggedImage;
    

    Luego, en tu plantilla twig, importa el módulo de esta manera:

    <script src="{{ asset('build/photo_page.js') }}"></script>
    <script>
      import TaggedImage from './tags.js';
      // Tu código aquí
    </script>
    

    Esto debería importar correctamente el módulo TaggedImage y evitar el error de “no definido”. Asegúrate de ejecutar npm run dev nuevamente después de hacer cambios en tu configuración de webpack o archivos js.

Comments are closed.