Unable to use @supabase/sql-to-rest in my front-end project (ReactJs + Vite)

[dule-kitemetric]

Bug report

Describe the bug

When i use @supabase/sql-to-rest in my React + Vite project. It show this error in the browser.

• @supabase_sql-to-rest.js?v=60f33d70:1653 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
• RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 64 6f @+0). Build with -sASSERTIONS for more info.

It may occurs since when getting libpg-query.wasm with Vite. It doesn't have a response-header Content-Type: application/wasm

To Reproduce

1. Use this code in the project (My project is React + Vite)

import { processSql } from '@supabase/sql-to-rest';

<Button
        onClick={async () => {
          const fullSqlString = 'SELECT * FROM dummy';
          const statement = await processSql(fullSqlString);
          console.log('🚀 ~ statement:', statement);
        }}
      >
        Test
      </Button>

Expected behavior

No error being throwed as in the document, i see that it Works on both browser and server. I've used this package in my NestJs project and it's fine. Or is there any way that i can solve this problem with Vite?

Screenshots

System information

• OS: macOS
• Browser: Chrome
• Version of "@supabase/supabase-js": "^2.43.4",
• Version of "@supabase/sql-to-rest": "^0.1.6",

[dule-kitemetric]

I have fixed this problem. The error is thrown when using @supabase/sql-to-rest package in Vite project.

The reason is:

• By default, Vite tries to optimize all dependencies by pre-bundling dependencies to improve startup time. However, some packages may include WebAssembly or have other features that don't work well with this optimization.
  ==> The @supabase/sql-to-rest uses package libpg-query-node that compiled to WASM to use in browsers, which will not work with Vite's optimization

To fix this, i've updated my vite.config.ts file as below:

import { defineConfig } from 'vite';

export default () => {
  return defineConfig({
    // ... other configs
    
    optimizeDeps: {
      exclude: ['@supabase/sql-to-rest'],
    },
    assetsInclude: ['**/*.wasm'],
  });
};

Notes:

• optimizeDeps: { exclude: ['@supabase/sql-to-rest'] }: This tells Vite to leave this package as-is during the build process. And WebAssembly will be loaded correctly as when using in other normal projects
• assetsInclude: ['**/*.wasm']: Tell Vite to treat .wasm files as static assets to be processed with the proper MIME type (application/wasm)

Hope it will help anyone facing this problem in the future ://