Improve error with pointer to docs when PGlite is unable to load WASM binary

[Arrow7000]

I'm getting an error when running a transaction in the browser. The function I'm running:

export const replaceSchema = (db: PGlite, schemaStr: SchemaString) => {
  return db.transaction((tx) => {
    tx.exec(`DROP SCHEMA public CASCADE;`);

    return tx.exec(schemaStr);
  });
};

The error:

Uncaught (in promise) RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0). Build with -sASSERTIONS for more info.
    at abort (@electric-sql_pglite.js?v=74e038dd:461:

[AntonOfTheWoods]

That looks like a WASM problem. Are you using vite and not excluding it from the optimisations?

  optimizeDeps: {
    exclude: ['@electric-sql/pglite'],
  },

[thorwebdev]

Yes, adding this to the vite.config.js file did the trick for me. Thank you @AntonOfTheWoods

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['@electric-sql/pglite'],
  },
});

[samwillis]

Although this is due to a bundler and outside of PGlite, we should try and improve the error message here, to indicate what the fix is.

[Arrow7000]

Are you using vite and not excluding it from the optimisations?

😅 that is exactly what I was doing. I had no idea I had to exclude it from optimisations. Yeah, a better error message would be amazing, but it does work now! Thanks!

[ixartz]

I have a similar issue with Next.js:

RuntimeError: Aborted(). Build with -sASSERTIONS for more info.

I have try to apply a similar change like in Vite optimizeDeps.exclude
In my next.js config, I have the following line:

serverComponentsExternalPackages: ['@electric-sql/pglite'],

PGlite works perfectly with the in-memory FS and it didn't work with Node FS. So, I don't have any issue with the in-memory version, the issue is only with the Node FS.

Any idea?

[lirbank]

Possibly related #322 (comment)

[ixartz]

@lirbank I also applied serverComponentsExternalPackages (I'm currently at Next.js 14) to make it work. It working with the in-memory FS: https://pglite.dev/docs/filesystems#in-memory-fs
It doesn't work with https://pglite.dev/docs/filesystems#node-fs

In your case, does it work with https://pglite.dev/docs/filesystems#node-fs?

[lirbank]

@ixartz got it. I have not tried the node-fs. I am just using PGllite in the browser for now, so I am afraid I can't help. But I am curious to use it for tests on the server at some point.

[ixartz]

@lirbank On my side, I didn't have the chance to try in the browser, I'm currently using for local/dev environment with PGLite. I also use for testing.

If you are interested, you can take a look at: https://github.com/ixartz/SaaS-Boilerplate

[electrovir]

#199 (comment) fixed it for me as well, but I never got any error messages (in Safari), my .exec call simply hung forever.