Nuxt•4mo ago

maplibre-gl bundling

I’m getting an error trying to import a page that calls import { LngLat } from 'maplibre-gl' — error says:

The requested module 'maplibre-gl' does not provide an export named 'LngLat'

The requested module 'maplibre-gl' does not provide an export named 'LngLat'

I am developing a nuxt module, so the issue may be how things are being bundled. I’m not sure how to troubleshoot further. The module/repo is here https://dm.nuxt.space/nuxt-maplibre/ — the issue seems to be when installing the module in a new nuxt project. If I just run dev from my repo it works fine.

Nuxt MapLibre

Documentation for the Nuxt MapLibre module

2 Replies

kapa.ai•4mo ago

Hi @dmarr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message:

The requested module 'maplibre-gl' does not provide an export named 'LngLat'

The requested module 'maplibre-gl' does not provide an export named 'LngLat'

suggests that the way maplibre-gl is being imported or bundled in your Nuxt module is causing issues with ESM/CJS interop or export resolution. Troubleshooting Steps 1. Check ESM/CJS Compatibility
This kind of error often happens when a package is published in CommonJS format, but you are trying to import it as an ES module, or vice versa. Nuxt 3 uses ESM by default, and if maplibre-gl is not fully ESM-compatible, you may need to adjust your configuration. 2. Transpile the Dependency
If the library is not being properly transpiled, you can add it to the build.transpile array in your consuming Nuxt project's nuxt.config:

   export default defineNuxtConfig({
     build: {
       transpile: ['maplibre-gl']
     }
   })

   export default defineNuxtConfig({
     build: {
       transpile: ['maplibre-gl']
     }
   })

This can help Nuxt handle the module format correctly and resolve exports as expected. This approach is recommended for libraries that are not fully ESM-compatible or that import assets (like CSS or images) that need to be processed by the build toolchain.
See: Troubleshooting ESM Issues 3. Check the Export in maplibre-gl
Double-check that LngLat is actually exported as a named export in the version of maplibre-gl you are using. Sometimes, libraries only provide a default export or use a different export structure in CJS vs ESM builds. If it's only available as a property of the default export, you may need to import it like this:

   import maplibre from 'maplibre-gl'
   const { LngLat } = maplibre

   import maplibre from 'maplibre-gl'
   const { LngLat } = maplibre

Or, for dynamic import:

   const maplibre = await import('maplibre-gl').then(m => m.default || m)
   const { LngLat } = maplibre

   const maplibre = await import('maplibre-gl').then(m => m.default || m)
   const { LngLat } = maplibre

See: ES Modules Library Author Guide 4. Aliasing (if needed)
If the above does not work, you may need to alias the import to a specific file (such as the CJS build) in your nuxt.config:

   export default defineNuxtConfig({
     alias: {
       'maplibre-gl': 'maplibre-gl/dist/maplibre-gl.js'
     }
   })

   export default defineNuxtConfig({
     alias: {
       'maplibre-gl': 'maplibre-gl/dist/maplibre-gl.js'
     }
   })

See: Troubleshooting ESM Issues Why It Works in Dev But Not When Installed When running dev in your module repo, you may be using a different build context or dependency resolution than when your module is installed in a fresh Nuxt project. This can mask issues with how dependencies are bundled or resolved. Summary - Add maplibre-gl to build.transpile in the consuming Nuxt project. - Double-check the export style of LngLat in maplibre-gl. - Consider using a default import if named import fails. - Use aliasing if necessary. If these steps do not resolve the issue, the knowledge sources do not provide further details specific to maplibre-gl and Nuxt module bundling, so you may need to investigate the export structure of maplibre-gl or consult its documentation for ESM compatibility. See: Troubleshooting ESM Issues
See: ES Modules Library Author Guide ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@139883350096740354> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

maplibre-gl bundling

Did you find this page helpful?