0

estoy usando la librería leaftlet para mostrar un mapa, pero en lugar de importar el script en el blade, lo quiero hacer via npm, e instalado la librería via npm con

npm i leaflet

y para iniciar el mapa, tengo esto en mi blade

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""/>

<style>
    #map {
        height: 40em;
        width: auto;
    }
</style>

<div id="map" class="max-w-7xl mx-auto sm:px-6 lg:px-8"></div>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MIAPIKEYDEGOOGLEMAPS">
</script>

<script>
    let L = require('leaflet');
    let map = L.map('map').setView([35.68, 139.76], 13);

    L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    }).addTo(map);
</script>

sin embargo, no me muestra el mapa y en la consola obtengo el error

Uncaught ReferenceError: require is not defined

y si reemplazo let L = require('leaflet'); por import L from 'leaflet'; entonces obtengo el error

Uncaught SyntaxError: Cannot use import statement outside a module

cuál es la manera correcta para importarla?

1 respuesta 1

1

Si vas a usar require() debe ser código propiamente NodeJS, es decir, no puede estar en el mismo archivo donde tienes HTML, para el caso de usar import, como menciona el error, solo funciona en Módulos, podrías probar de la siguiente forma:

    <script type="module">
    let L = require('leaflet');
    let map = L.map('map').setView([35.68, 139.76], 13);

    L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    }).addTo(map);
    </script>

Como puedes ver, en la etiqueta script se especifica que es de tipo module: type="module"

2
  • gracias por la respuesta, acabo de probar haciendo eso, pero ahora obtengo Uncaught ReferenceError: require is not defined
    – Andre
    el 29 dic. 2021 a las 18:56
  • Por lo que el require es una función predefinida en el entorno de ejecución de NodeJS, puedes probar ejecutando con el comando node un archivo que sea .js el 29 dic. 2021 a las 18:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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