frontend/Dockerfile

@@ -23,7 +23,7 @@ RUN echo 'git-fetch-with-cli = true' >> $CARGO_HOME/config.toml
 # Copy WASM source and build
 COPY wasm/Cargo.toml wasm/Cargo.lock ./wasm/
 COPY wasm/src ./wasm/src/
-RUN cd wasm && wasm-pack build --target web
+RUN cd wasm && wasm-pack build --target bundler
 
 # ---------- build ----------
 FROM docker.io/node:20-slim AS builder

frontend/next.config.ts

@@ -25,8 +25,8 @@ const nextConfig: NextConfig = {
     // Enable WASM support
     config.experiments = {
       ...config.experiments,
-      asyncWebAssembly: false,
-      syncWebAssembly: true,
+      asyncWebAssembly: true,
+      syncWebAssembly: false,
       layers: true,
     };
 
@@ -37,7 +37,7 @@ const nextConfig: NextConfig = {
         ...(config.module?.rules || []),
         {
           test: /\.wasm$/,
-          type: 'webassembly/sync',
+          type: 'webassembly/async',
         },
       ],
     };

frontend/src/lib/wasm.ts

@@ -54,33 +54,33 @@ export class PassportWASMLoader {
     }
 
     try {
-      // Dynamically import the WASM module - for sync WebAssembly
-      const wasm = await import('./wasm-pkg/sharenet_passport_wasm_bg');
-      const init = await import('./wasm-pkg/sharenet_passport_wasm');
+      // Dynamically import the WASM bindings - they handle the WASM initialization
+      const wasmModule = await import('./wasm-pkg/sharenet_passport_wasm');
 
-      // Initialize the WASM module
-      await init.default();
+      // Initialize the WASM module using the default export
+      // With bundler target, this automatically handles the WASM loading
+      await wasmModule.default();
 
       // Create wrapper functions with proper typing
-      const wasmModule: PassportWASM = {
+      const wasmWrapper: PassportWASM = {
         parse_spf_file: async (data: Uint8Array, password: string): Promise<SPFPassport> => {
-          const result = wasm.parse_spf_file(data, password);
+          const result = wasmModule.parse_spf_file(data, password);
           // The WASM function returns a JsValue that we need to convert
           // For now, we'll assume it returns the correct structure
           return result as unknown as SPFPassport;
         },
 
         get_profiles_from_passport: async (data: Uint8Array, password: string): Promise<UserProfile[]> => {
-          const result = wasm.get_profiles_from_passport(data, password);
+          const result = wasmModule.get_profiles_from_passport(data, password);
           return result as unknown as UserProfile[];
         },
 
         validate_spf_signature: async (data: Uint8Array, signature: Uint8Array): Promise<boolean> => {
-          return wasm.validate_spf_signature(data, signature);
+          return wasmModule.validate_spf_signature(data, signature);
         },
       };
 
-      return wasmModule;
+      return wasmWrapper;
     } catch (error) {
       console.error('Failed to load WASM module:', error);
       throw new Error(`Failed to load WASM module: ${error instanceof Error ? error.message : 'Unknown error'}`);