Browser blocks pglite wasm module from loading

[ktsangop]

Hey everyone, I am trying to work with PGlite in the browser.
I have an Angular web app that loads PGlite from the npm package, as shown in the documentation.

However when the following call is executed:
const db = new PGlite()
And the browser tries to load the wasm file from the npm package I get the following errors on the browser console :
"Not allowed to load local resource: file:///C:/....../node_modules/@electric-sql/pglite/dist/postgres.wasm"
"Not allowed to load local resource: file:///C:/....../node_modules/@electric-sql/pglite/dist/postgres.data"
"ERROR Error: Uncaught (in promise): TypeError: Failed to fetch"

Note that I am using Angular's dev server ng serve.

FWIW, I managed to test PGlite on a simple HTML document loaded without a web server into Chrome, by using the CDN module import.

Any suggestions are welcome, thank you!

[cog25]

From what I briefly looked into:

However, modern browsers treat file origins as unique, blocking simple read of other files via fetch(), DOM interactions between frames containing different local files, or getImageData() calls on canvases with images loaded from other local files: ( https://textslashplain.com/2019/10/09/navigating-to-file-urls/ )

I'm not sure how Angular's dev server works, but just looking at the error logs, it seems to be loading the wasm from the wrong place(from file protocol). Maybe you can fix it via manually setting two things.

pglite/packages/pglite/src/interface.ts

Lines 90 to 91 in bfddaaa

	wasmModule?: WebAssembly.Module
	fsBundle?: Blob | File

[ktsangop]

First of all, thank you for helping @cog25
Now I reckon that this is where webpack gets it all wrong and import.meta.url resolves to file://.... instead of a relative server path :

pglite/packages/pglite/src/utils.ts

Lines 17 to 18 in bfddaaa

	const moduleUrl = new URL('../release/postgres.wasm', import.meta.url)
	wasmDownloadPromise = fetch(moduleUrl)

Digging into this I have found that webpack's default setting is to evaluate import.meta.url to the filesystem at build time (props to the SO poster for the answer) :
https://stackoverflow.com/a/78509536/2025271

Now Angular suffers from this as a consequence and it seems that a custom config is required in order to make this work :
angular/angular-cli#24617

I will try the custom webpack config option, but I would also be interested in understanding what you suggest the constructor options should be when creating the PGlite instance.

[cog25]

My intention is to import or fetch .wasm files directly, but I haven't found how this works in webpack.

Or... I don't know the Angular Ecosystem, but what about migrating to a new build system using Vite? Then it will probably work out of the box.

[ktsangop]

Migrating to Vite requires upgrading Angular and that requires more effort than I can put in at the moment.
The other option is to install a plugin that allows you to edit webpack configuration directly (which Angular by default hides from you) and change the way the import.meta.url is evaluated.

I've already tested that in a hurry but got into other path load errors (wasm tries to load through the web server but the path is wrong).
I will come back later when I find some time to make this work.