problem in vite's bundling making Buffer undefined at execution time

[julio75012]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Originally, I would like to describe the issue as : Vite was creating a chunk of the code of keccak256 like the following:

var require_keccak256 = __commonJS({
  "../../node_modules/keccak256/dist/keccak256.js"(exports, module2) {
    "use strict";
    var import_dist3163 = __toESM(require_dist());
    var import_dist3164 = __toESM(require_dist2());
    var import_dist3165 = __toESM(require_dist3());
    var __importDefault = exports && exports.__importDefault || function(mod) {
      return mod && mod.__esModule ? mod : { "default": mod };
    };
    var bn_js_1 = __importDefault(require_bn());
    var buffer_1 = __importDefault((init_dist(), __toCommonJS(dist_exports)));
    var keccak_1 = __importDefault(require_js());
    var Buffer2 = buffer_1.default.Buffer;
    function keccak2569(value) {
      value = toBuffer2(value);
      return (0, keccak_1.default)("keccak256").update(value).digest();
    }
    function toBuffer2(value) {
      if (!Buffer2.isBuffer(value)) {
[...]
});

However, during execution, Buffer2.isBuffer(value) is called (why there is the 2? I guess there might be a conflict somewhere with another package, I am not a Vite expert.) and... it says that Buffer2 is undefined (which I know is very weird, I have no idea why the web browser (Brave on Linux) ignores var Buffer2 = buffer_1.default.Buffer;

I was inspired by this Github discussion used patch-package and then patched keccak256@1.0.6 for the project I'm working on.
Here is the diff that solved my problem:

diff --git a/node_modules/keccak256/dist/keccak256.js b/node_modules/keccak256/dist/keccak256.js
index 9ca0b64..1096368 100644
--- a/node_modules/keccak256/dist/keccak256.js
+++ b/node_modules/keccak256/dist/keccak256.js
@@ -3,9 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 const bn_js_1 = __importDefault(require("bn.js"));
-const buffer_1 = __importDefault(require("buffer"));
+// const buffer_1 = __importDefault(require("buffer"));
 const keccak_1 = __importDefault(require("keccak"));
-const Buffer = buffer_1.default.Buffer;
+// const Buffer = buffer_1.default.Buffer;
+
+import { Buffer } from 'buffer'
+globalThis.Buffer = Buffer
+
 function keccak256(value) {
     value = toBuffer(value);
     return (0, keccak_1.default)('keccak256').update(value).digest();

then the chunk bundled by Vite looks now like this:

var require_keccak256 = __commonJS({
  "../../node_modules/keccak256/dist/keccak256.js"(exports, module2) {
    "use strict";
    var import_dist3163 = __toESM(require_dist());
    var import_dist3164 = __toESM(require_dist2());
    var import_dist3165 = __toESM(require_dist3());
    init_dist();
    var __importDefault = exports && exports.__importDefault || function(mod) {
      return mod && mod.__esModule ? mod : { "default": mod };
    };
    var bn_js_1 = __importDefault(require_bn());
    var keccak_1 = __importDefault(require_js());
    globalThis.Buffer = Buffer$1;
    function keccak2569(value) {
      value = toBuffer2(value);
      return (0, keccak_1.default)("keccak256").update(value).digest();
    }
    function toBuffer2(value) {
      if (!Buffer$1.isBuffer(value)) {
[...]

and my code executes correctly.

Maybe the problem is more due to Vite, but I thought that my proposal can at least trigger a constructive discussion since many people use Vite.

Thanks