Skip to content

docs: add client-side framework setup instructions to avoid WASM errors #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ArsiAda wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: add client-side framework setup instructions to avoid WASM errors #52

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21da8c2
docs: add client-side framework setup instructions to avoid WASM errors
ArsiAda Feb 1, 2026
820e694
docs: fix formatting and add clean client-side setup instructions
ArsiAda Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,3 +284,36 @@ This project is based on [fhevmjs](https://github.com/zama-ai/fhevmjs) by Zama a
#### Need support?

Open an issue or Pull Request on Github! Or reach out to us on [Discord](https://discord.com/invite/FuVgxrvJMY) or Telegram.

## Using Fhenix.js in Client-Side Frameworks

Fhenix.js relies on a WebAssembly file (`tfhe_bg.wasm`) which is **client-side only**.
When using frameworks like Next.js, React (Vite), or others, this can cause errors if the WASM file is loaded during SSR (server-side rendering).

### Next.js Example
```javascript
import dynamic from 'next/dynamic';

const Token = dynamic(() => import('../components/token'), { ssr: false });

Vite + React Example
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';

export default defineConfig({
plugins: [wasm(), topLevelAwait(), react()],
optimizeDeps: { exclude: ['fhenixjs'] },
});

Alternative
Use the UMD build directly via a <script> tag:
<script src="https://cdn.jsdelivr.net/npm/fhenixjs@0.3.0/dist/fhenix.umd.min.js"></script>

Notes
Always use Fhenix.js on the client side for user interactions.
Avoid importing it directly in SSR code.

---