optimize deps with vite breaking

[dabreegster]

Hi! I'm trying this out in a Svelte 5 project using Vite 7. I've added @developmentseed/deck.gl-geotiff as a dependency. My usage code is quite simple to start, using https://github.com/dimfeld/svelte-maplibre/, which has a DeckGl integration.

<DeckGlLayer
  type={COGLayer}
  geotiff="private_assets/layers/ni_ortho.cog"
  interleaved
  layout={{
    visibility: showOrthoPhotos ? "visible" : "none",
  }}
/>

When I npm run dev, I get this on the console:

The file does not exist at "/home/dabreegster/route-appraisal/web/node_modules/.vite/deps/worker.js?worker_file&type=module" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`. (x32)

The browser is trying and failing to get http://localhost:5173/node_modules/.vite/deps/worker.js?worker_file&type=module. There's a source map error:

Source map error: Error: URL constructor:  is not a valid URL.
Stack in the worker:resolveSourceMapURL@resource://devtools/client/shared/source-map-loader/utils/fetchSourceMap.js:56:22
getOriginalURLs@resource://devtools/client/shared/source-map-loader/source-map.js:74:24
workerHandler/</<@resource://devtools/client/shared/worker-utils.js:115:52
workerHandler/<@resource://devtools/client/shared/worker-utils.js:113:13

Resource URL: wasm:http://localhost:5173/node_modules/.vite/deps/@developmentseed_deck__gl-geotiff.js?v=36f12bda%20line%2049954%20%3E%20WebAssembly.Module
Source Map URL: null

I tried adding to my vite.config:

  optimizeDeps: {
    exclude: ["@developmentseed/deck.gl-geotiff"]
  },

But npm run dev can't find files:

Sourcemap for "/home/dabreegster/route-appraisal/web/node_modules/@developmentseed/deck.gl-geotiff/dist/index.js" points to missing source files
Sourcemap for "/home/dabreegster/route-appraisal/web/node_modules/@developmentseed/deck.gl-geotiff/dist/cog-layer.js" points to missing source files
Sourcemap for "/home/dabreegster/route-appraisal/web/node_modules/@developmentseed/deck.gl-geotiff/dist/geotiff/texture.js" points to missing source files
Sourcemap for "/home/dabreegster/route-appraisal/web/node_modules/@developmentseed/deck.gl-geotiff/dist/mosaic-layer/mosaic-layer.js" points to missing source files
Sourcemap for "/home/dabreegster/route-appraisal/web/node_modules/@developmentseed/deck.gl-geotiff/dist/mosaic-layer/mosaic-tileset-2d.js" points to missing source files
... many more

npm run build gives a different error:

[commonjs--resolver] Invalid value "iife" for option "worker.format" - UMD and IIFE output formats are not supported for code-splitting builds.
file: /home/dabreegster/route-appraisal/web/node_modules/@developmentseed/geotiff/dist/pool/pool.js
    at getRollupError (file:///home/dabreegster/route-appraisal/web/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
    at error (file:///home/dabreegster/route-appraisal/web/node_modules/rollup/dist/es/shared/parseAst.js:397:42)
    at validateOptionsForMultiChunkOutput (file:///home/dabreegster/route-appraisal/web/node_modules/rollup/dist/es/shared/node-entry.js:20673:16)

I am woefully unfamiliar with the madness of JS build systems and bundlers. Any advice? Thank you!

[kylebarron]

Likewise I get so confused by bundling. Bundling is a primary place where I use LLMs to understand the different features

<DeckGlLayer
  type={COGLayer}
  geotiff="private_assets/layers/ni_ortho.cog"
  interleaved
  layout={{
    visibility: showOrthoPhotos ? "visible" : "none",
  }}
/>

First, you usually don't want to use CSS visibility. I'd recommend the base visible prop on the layer. CSS visibility will re-render the component from scratch I think, which will trigger the entire creation of the WebGL resources and map. Whereas the visible prop keeps all resources on the GPU so it's instant to switch between visible / not visible.

When I npm run dev, I get this on the console:

I know I've seen issues with vite's optimizer before; if you/claude have any recommendations here it would be interesting to hear them.

This is all related to the decompression worker pool in our GeoTIFF reader

deck.gl-raster/packages/geotiff/package.json

Lines 8 to 16 in df0ad80

	"exports": {
	".": {
	"types": "./dist/index.d.ts",
	"default": "./dist/index.js"
	},
	"./pool/worker": {
	"types": "./dist/pool/worker.d.ts",
	"default": "./dist/pool/worker.js"
	}

Try constructing a WorkerPool through its constructor, passing in a custom URL to a worker script.

The default pool uses this URL:

deck.gl-raster/packages/geotiff/src/pool/pool.ts

Lines 133 to 143 in df0ad80

	export function defaultDecoderPool(): DecoderPool {
	if (DEFAULT_POOL !== null) {
	return DEFAULT_POOL;
	}
	DEFAULT_POOL = new DecoderPool({
	createWorker: () =>
	new Worker(new URL("./worker.js", import.meta.url), { type: "module" }),
	});
	return DEFAULT_POOL;
	}

Or, turn off the worker pool for now.

But npm run dev can't find files:

I don't know why that would be. Those files exist https://www.npmjs.com/package/@developmentseed/geotiff?activeTab=code

[kylebarron]

Also, our examples all use vite. So maybe take a look at its config:

deck.gl-raster/examples/cog-basic/vite.config.ts

Lines 1 to 11 in df0ad80

	import react from "@vitejs/plugin-react";
	import { defineConfig } from "vite";
	export default defineConfig({
	plugins: [react()],
	base: "/deck.gl-raster/examples/cog-basic/",
	worker: { format: "es" },
	server: {
	port: 3000,
	},
	});

You might need this line

deck.gl-raster/examples/cog-basic/vite.config.ts

Line 7 in df0ad80

worker: { format: "es" },

[dabreegster]

First, you usually don't want to use CSS visibility.

This is a maplibre layout property, not CSS... but digging through https://github.com/dimfeld/svelte-maplibre/blob/master/src/lib/DeckGlLayer.svelte I'm actually less sure now. There's an explicit visible prop there; I'll sanity check and try that too!

Also, our examples all use vite. So maybe take a look at its config:

Thank you for all of these ideas and pinpointing where the pool is used! worker: { format: "es" } has no effect, but trying optimizeDeps: { exclude: ["@developmentseed/geotiff"] } appears to work -- I've got something rendering! Vite is still complaining about missing sourcemap files, but that's just related to debugging.

I'll keep fiddling with the config and report back when I get something working cleanly. Thanks for the help!

[kylebarron]

trying optimizeDeps: { exclude: ["@developmentseed/geotiff"] } appears to work

Ah that makes sense. You need to exclude the package that actually contains the worker.