Buffer is not defined

[imcvampire]

I tried to use your lib but I faced a problem in browser: seems like the Buffer code leaked to client build.

Uncaught ReferenceError: Buffer is not defined
    at new api (api.js:322:3)
    at GrammarApi.generateApi (abnf.js:154:21)
    at node_modules/@spruceid/siwe-parser/dist/abnf.js (abnf.js:166:28)
    at __require2 (chunk-KQHTJEE7.js:18:50)
    at node_modules/@spruceid/siwe-parser/dist/parsers.js (parsers.js:18:16)
    at __require2 (chunk-KQHTJEE7.js:18:50)
    at node_modules/siwe/dist/client.js (client.js:37:23)
    at __require2 (chunk-KQHTJEE7.js:18:50)
    at node_modules/siwe/dist/siwe.js (siwe.js:17:14)
    at __require2 (chunk-KQHTJEE7.js:18:50)

[coindegen]

I having this same problem.
It won't load any JS as a result.

---

Edit: I found a workaround, use siwe package on the server.

The problem is due to this: remix-run/remix#2248 (comment)

I followed that maintainer's suggestion and took this advice: https://remix.run/docs/en/1.15.0/pages/gotchas

Here's how it looks:

siwe.server.ts

export * from "siwe";

index.tsx

import { SiweMessage } from "~/utils/siwe.server";

export const action: ActionFunction = async ({ request, context }) => {
  const formData = await request.formData();
  const address = formData.get("address") as string;
  const statement = formData.get("statement") as string;

  try {
    const siweOptions = {
      domain: "localhost:4000",
      address,
      statement,
      uri: "https://localhost:4000/",
      version: "1",
      chainId: 1,
    };
    const message = new SiweMessage(siweOptions);
    ...
  } catch (error) {
    console.log({ error });
  }

[imcvampire]

@coindegen I don't think it's a valid option because we need to create SiweMessage on browser and ask user to sign it.

[coindegen]

@coindegen I don't think it's a valid option because we need to create SiweMessage on browser and ask user to sign it.

I agree it's not ideal. To get around that I'm just going back-and forth with the server:

  const actionData = useActionData<typeof action>();
  
  useEffect(() => {
    (async function getSignature() {
      if (!actionData?.message || !provider) {
        return;
      }

      const signer = provider?.getSigner();

      const signature = await signer.signMessage(actionData.message);
      ...
    })();
  }, [actionData?.message]);

Other alternative is to npm install buffer to polyfill it on client. Remix complains about that though, so fix is to patch-package this file: node_modules/@remix-run/dev/dist/compiler/compileBrowser.js, by commenting out these lines:

  let fakeBuiltins = module$1.builtinModules.filter((mod) =>
    dependencies$1.includes(mod)
  );
  if (fakeBuiltins.length > 0) {
    throw new Error(
      `It appears you're using a module that is built in to node, but you installed it as a dependency which could cause problems. Please remove ${fakeBuiltins.join(
        ", "
      )} before continuing.`
    );
  }

But obviously that's super messy.