AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

MapLibre Worker Fails To Load In Turbopack Due To Unresolved Hashed Chunk Import

When using MapLibre GL v6 with Next.js Turbopack, the generated worker file contains an import for 'maplibre-gl-shared-dev.mjs', but the emitted file has a hash suffix, causing the worker to fail with 'Worker failed to load'.

highConfidence 85%Next.jsAffected V16.4.0-Canary.60

Origin Analysis

Turbopack's asset pipeline renames static media chunks with content hashes but fails to rewrite relative imports inside the worker file, so the worker's import of './maplibre-gl-shared-dev.mjs' still points to the un-hashed filename, resulting in a 404 and worker startup failure.
1. Create a new Next.js app using App Router and Turbopack (npx create-next-app@latest). 2. Install maplibre-gl v6, ol, and @geoblocks/ol-maplibre-layer. 3. In a client component, set worker URL: const workerUrl = new URL('maplibre-gl/dist/maplibre-gl-worker.mjs', import.meta.url).toString(); setWorkerUrl(workerUrl); 4. Create a MapLibreLayer and add it to the map. 5. Run `npm run dev --turbopack`. 6. Open the map page; browser console reports 'Worker failed to load'. 7. Inspect .next/dev/static/media/; worker file exists but its import './maplibre-gl-shared-dev.mjs' points to a non-existent file while the hashed version maplibre-gl-shared-dev.<hash>.mjs is present.

Fixing Code Block

Edge Case Audit

This workaround disables Turbopack, which may reduce development performance and lose Turbopack-specific features. It does not fix the underlying Turbopack bug and should be reverted once an upstream fix is released. Ensure all scripts that previously used --turbopack are updated to avoid inconsistent behavior. For production, verify that worker URLs are correctly served by the chosen bundler. Rollback: restore the original scripts with --turbopack if needed. Alternatively, consider downgrading maplibre-gl to v5.x, which does not require setWorkerUrl.

Ecosystem Topology