Common webpack errors

"Request Header Fields Too Large"

When attempting to send a large amount of ciphertext data from a client application built with React/Next.js to a smart contract, you may encounter the "Request Header Fields Too Large" error. To resolve this, increase the HTTP header size limit by installing the cross-env package:

npm install cross-env --save-dev

Then, update the dev script in your package.json to use cross-env:

"scripts": { 
    "dev": "cross-env NODE_OPTIONS='--max-http-header-size=12800000' next dev" 
}

This adjustment should help prevent the header size error when sending large data requests to RPC.

"Module not found: Error: Can't resolve 'tfhe_bg.wasm'"

In the codebase, there is a new URL('tfhe_bg.wasm') which triggers a resolve by Webpack. If you encounter an issue, you can add a fallback for this file by adding a resolve configuration in your webpack.config.js:

resolve: {
  fallback: {
    'tfhe_bg.wasm': require.resolve('tfhe/tfhe_bg.wasm'),
  },
},

Modifications for nextjs

For Next.js, add the following configuration in next.config.mjs to resolve the 'tfhe_bg.wasm' error.

webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback, // This spreads existing fallbacks
      "tfhe_bg.wasm": require.resolve("tfhe/tfhe_bg.wasm"),
    };
    return config;
  },

ReferenceError: Buffer is not defined

IIf you encounter issues with the Node Buffer object, use a browser-compatible package and include the fallback in the Webpack configuration. Similar issues might arise with different Node objects. In such cases, install the corresponding browserified npm package and include the fallback as follows.

resolve: {
  fallback: {
    buffer: require.resolve('buffer/'),
    crypto: require.resolve('crypto-browserify'),
    stream: require.resolve('stream-browserify'),
    path: require.resolve('path-browserify'),
  },
},

Issue with importing ESM version

With a bundler such as Webpack or Rollup, imports will be replaced with the version mentioned in the "browser" field of the package.json. If you encounter issue with typing, you can use this tsconfig.json using TypeScript 5.

If you encounter any other issue, you can force the import of the browser-specific package as follows.

import { initFhevm, createInstance } from "fhevmjs/web";

Use bundled version

If you have an issue with bundling the library (for example with some SSR framework), you can use the pre-bundled version available in fhevmjs/bundle. Just embed the library with a <script> tag and you're good to go.

const start = async () => {
  await window.fhevm.initFhevm(); // load wasm needed
  const instance = window.fhevm.createInstance({ chainId, publicKey }).then((instance) => {
    console.log(instance);
  });
};