Using with Nitro

[jamesarosen]

I'm building a site with Tanstack-Start, Vite, Nitro.

When I compile for production release, Nitro puts H3 in _libs/h3-js.mjs. H3's Emscripten build creates this:

ENVIRONMENT_IS_WEB = typeof window === "object";
ENVIRONMENT_IS_WORKER = typeof importScripts === "function";
ENVIRONMENT_HAS_NODE = typeof process === "object" && typeof process.versions === "object" && typeof process.versions.node === "string";
ENVIRONMENT_IS_NODE = ENVIRONMENT_HAS_NODE && !ENVIRONMENT_IS_WEB && !ENVIRONMENT_IS_WORKER;

// ...

if (ENVIRONMENT_IS_NODE) {
    scriptDirectory = __dirname + "/";

In an .mjs file, ENVIRONMENT_IS_NODE === true, but __dirname is not defined.

The WASM actually gets inlined as base64, so the scriptDirectory isn't needed for file loading.

My current solution is to have Vite rewrite the file before bundling:

// vite.config.ts

// h3-js is an Emscripten-generated bundle that uses `__dirname` to locate its
// WASM initializer. When Nitro bundles it as ESM, `__dirname` is undefined.
// The WASM is inlined as a base64 data URI so the path is never actually used,
// but the reference still throws at module load. Replace it with the ESM
// equivalent (`import.meta.dirname`, available in Node.js 21.2+).
const h3jsDirnamePolyfill = {
	name: 'h3js-dirname-polyfill',
	transform(code: string, id: string) {
		if (id.includes('h3-js') && code.includes('__dirname')) {
			return {
				code: code.replaceAll('__dirname', 'import.meta.dirname'),
				map: null,
			}
		}
	},
}

export default defineConfig(() => {
  return {
    plugins: [ nitro(), h3jsDirnamePolyfill() ]
  }
})

Are there better options?