When using Nuxt layout + ClientOnly, module 'maplibre-gl' errors: "does not provide an export"

[jelmerdemaat]

Environment

Working directory: /home/projects/github-4awuuupi nuxi 13:42:34 Nuxt project info: nuxi 13:42:35

---

• Operating System: Linux
• Node Version: v20.19.1
• Nuxt Version: 3.17.4
• CLI Version: 3.25.1
• Nitro Version: 2.11.12
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-4awuuupi?file=components%2FMapLibre.vue&file=app.vue

Open this in a fresh tab, and you should land directly on the error 500 page.

Test the issue by removing <NuxtLayout name="home"> and </NuxtLayout> , the error will disappear.

Describe the bug

When importing the library @geoblocks/ol-maplibre-layer inside a component wrapped by <ClientOnly>, I get this error 500 message:

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

at /home/projects/github-4awuuupi/node_modules/@geoblocks/ol-maplibre-layer/lib/MapLibreLayer.js:1:undefined:undefined:undefined:undefined:undefined:undefined:undefined)
at async ViteNodeRunner.interopedImport (/home/projects/github-4awuuupi/node_modules/vite-node/dist/client.mjs:394:26)
at async ViteNodeRunner.directRequest (/home/projects/github-4awuuupi/node_modules/vite-node/dist/client.mjs:264:20)
at async ViteNodeRunner.cachedRequest (/home/projects/github-4awuuupi/node_modules/vite-node/dist/client.mjs:185:11)
at async ViteNodeRunner.dependencyRequest (/home/projects/github-4awuuupi/node_modules/vite-node/dist/client.mjs:233:10)

Why I think this is a bug:

• I wrapped the component inside <ClientOnly> so I wouldn't expect it to throw 500 errors
• The package maplibre-gl does seem to export a 'Map': https://github.com/maplibre/maplibre-gl-js/blob/main/src/index.ts#L177
• When removing the NuxtLayout, and refreshing the preview, the error disappears

Additional context

I am using this inside a project with OpenLayers, using @geoblocks/ol-maplibre-layer to show a WebGL rendered layer.

Logs

✔ Vite server hmr 5 files in 71.375ms
[13:46:25] ℹ hmr update /app.vue (x16)

 ERROR  [request error] [unhandled] [GET] http://localhost:3000/

 
ℹ Error: The requested module 'maplibre-gl' does not provide an export named 'Map'

 ⁃ (node_modules/@geoblocks/ol-maplibre-layer/lib/MapLibreLayer.js:1:undefined:undefined:undefined:undefined:undefined:undefined:undefined:undefined:undefined:undefined:undefined)
 ⁃ at async ViteNodeRunner.interopedImport (node_modules/vite-node/dist/client.mjs:394:26)
 ⁃ at async ViteNodeRunner.directRequest (node_modules/vite-node/dist/client.mjs:264:20)
 ⁃ at async ViteNodeRunner.cachedRequest (node_modules/vite-node/dist/client.mjs:185:11)
 ⁃ at async ViteNodeRunner.dependencyRequest (node_modules/vite-node/dist/client.mjs:233:10)

[CAUSE]
SyntaxError {
  stack: "The requested module 'maplibre-gl' does not provide an export named 'Map'\n" +
  'at ./node_modules/@geoblocks/ol-maplibre-layer/lib/MapLibreLayer.js:1:undefined:undefined:undefined:undefined:undefined:undefined:undefined:undefined:undefined)\n' +
  'at async ViteNodeRunner.interopedImport (./node_modules/vite-node/dist/client.mjs:394:26)\n' +
  'at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:264:20)\n' +
  'at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:185:11)\n' +
  'at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:233:10)',
  message: "The requested module 'maplibre-gl' does not provide an export named 
  'Map'",
  [Symbol(node:arrowMessage)]: 'file://./node_modules/@geoblocks/ol-maplibre-layer/lib/MapLibreLayer.js:1\n' 
  +
  
  "import { Map as MapLibreMap } from 'maplibre-gl';\n" +
  
  '         ^^^\n',
  [Symbol(node:decorated)]: true,
}

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• github-4awuuupi (Open reproduction)

[danielroe]

I think this is most likely related to https://github.com/nuxt/nuxt/issues/32175 (which is caused by an upstream rollup bug)

would you see if it's resolved with the workaround in that issue?

[jelmerdemaat]

@danielroe I have edited the reproduction with this fix:

export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  devtools: { enabled: true },
  vite: {
    $server: {
      build: {
        rollupOptions: {
          output: {
            preserveModules: true,
          },
        },
      },
    },
  },
});

Unfortunately the issue remains:

https://stackblitz.com/edit/github-4awuuupi?file=components%2FMapLibre.vue&file=nuxt.config.ts

[danielroe]

This is very likely the same upstream rollup bug: https://github.com/rollup/rollup/issues/5975

[huang-julien]

This issue happens in dev mode. It shouldn't be related to rollup. Maybe to vite or esbuild treeshaking ?

[huang-julien]

would

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  devtools: { enabled: true },

  build: {
    transpile: [
      '@geoblocks/ol-maplibre-layer'
    ]
  },

  vite: {
    $server: {
      build: {
        rollupOptions: {
          output: {
            preserveModules: true,
          },
        },
      },
    },
  },
});

work for you ?