From e7ded7c44f6e3cc29e17609b94f7f6118d483720 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli-ai-agent Date: Sat, 25 Jul 2026 10:33:28 -0400 Subject: [PATCH] Fix build: maplibre-gl 6 has no default export MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit maplibre-gl@6.0.0 ships a pure-ESM build that exports only named bindings, so `import maplibregl from 'maplibre-gl'` now fails the app build with: [MISSING_EXPORT] "default" is not exported by ".../maplibre-gl@6.0.0/dist/maplibre-gl.mjs" ╭─[ app/components/map.gjs:3:8 ] This broke every channel (release, beta and alpha) of the nightly build starting with the 2026-07-22 run. Switch the `` component to a namespace import, which is what MapLibre's own documentation now recommends, and which keeps working on maplibre-gl 5 as well. The rest of the chapter is unchanged: the `maplibregl.Map` / `maplibregl.Marker` usage reads exactly the same. Verified against the published output app (ember-learn/super-rentals) with maplibre-gl 6.0.0 installed: `pnpm test` goes from a build failure to 25/25 passing, and the map still renders with its marker in the browser. Co-Authored-By: Claude Opus 5 (1M context) --- src/markdown/tutorial/part-1/07-reusable-components.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/markdown/tutorial/part-1/07-reusable-components.md b/src/markdown/tutorial/part-1/07-reusable-components.md index c839e6d..1a04f39 100644 --- a/src/markdown/tutorial/part-1/07-reusable-components.md +++ b/src/markdown/tutorial/part-1/07-reusable-components.md @@ -60,7 +60,7 @@ Let's update our component to render an interactive map: @@ -1,7 +1,27 @@ import Component from '@glimmer/component'; +import { modifier } from 'ember-modifier'; -+import maplibregl from 'maplibre-gl'; ++import * as maplibregl from 'maplibre-gl'; +import 'maplibre-gl/dist/maplibre-gl.css'; + +const MAP_STYLE = 'https://tiles.openfreemap.org/styles/liberty'; @@ -90,7 +90,7 @@ Let's update our component to render an interactive map: There is a lot going on here! Let's work through it piece by piece. -First, we have imports for `modifier` from `ember-modifier`, `maplibregl` from `maplibre-gl`, and the MapLibre CSS file. The CSS provides the map controls and visual elements that MapLibre renders — without it, the map buttons and overlays won't look right. +First, we have imports for `modifier` from `ember-modifier`, `maplibregl` from `maplibre-gl`, and the MapLibre CSS file. The `import * as maplibregl` syntax collects everything the library exports into a single `maplibregl` object, which is how MapLibre's own documentation recommends importing it. The CSS provides the map controls and visual elements that MapLibre renders — without it, the map buttons and overlays won't look right. Next, we define a `MAP_STYLE` constant pointing to [OpenFreeMap](https://openfreemap.org/), an open-source tile server that provides free map tiles with no API key required. @@ -192,7 +192,7 @@ To safely set a computed style string that we control, we use `trustHTML` from ` import Component from '@glimmer/component'; import { modifier } from 'ember-modifier'; +import { trustHTML } from '@ember/template'; - import maplibregl from 'maplibre-gl'; + import * as maplibregl from 'maplibre-gl'; import 'maplibre-gl/dist/maplibre-gl.css'; @@ -21,5 +22,10 @@ export default class Map extends Component { @@ -447,7 +447,7 @@ Now update `map.gjs` to import `ENV` from `super-rentals/config/environment` and import Component from '@glimmer/component'; import { modifier } from 'ember-modifier'; import { trustHTML } from '@ember/template'; - import maplibregl from 'maplibre-gl'; + import * as maplibregl from 'maplibre-gl'; import 'maplibre-gl/dist/maplibre-gl.css'; +import ENV from 'super-rentals/config/environment';