Buffer Import Error When Building for Client-Side with Bun

[blokku-chan]

What version of Bun is running?

1.0.26+c75e768a6

What platform is your computer?

Darwin 23.2.0 arm64 arm

What steps can reproduce the bug?

1. Include the any package that has import { Buffer } from "buffer" in a Bun project configured for client-side code.
2. Run the Bun build process.
3. Observe the error related to the Buffer import.

What is the expected behavior?

Bun should correctly handle the import of Buffer from the buffer package, allowing the build process to complete successfully for client-side applications.

What do you see instead?

The build process fails with an error indicating that there is no matching export for the Buffer import.

Build failed
1 | import { Buffer } from 'buffer';
             ^
error: No matching export in "node:buffer" for import "Buffer"
    at /path/to/project/node_modules/@solana/web3.js/lib/index.browser.esm.js:1:10

Additional information

No response

[Electroid]

Can you share the exact command you are running?

[phwoelfel]

I'm trying to build a Vuetify/Vue 3 application:

$ bun build ./src/main.ts --outfile=dist/bundle.js

40 |     "*.sass",
         ^
warn: wildcard sideEffects are not supported yet, which means this package will be deoptimized
   at /Users/xxx/xxx/node_modules/vuetify/package.json:40:5

7 | import { Buffer } from "buffer";
             ^
error: No matching export in "node:buffer" for import "Buffer"
    at /Users/xxx/xxx/src/main.ts:7:10

I followed the examples from bun build --help:

Examples:
  Frontend web apps:
  bun build ./src/index.ts --outfile=bundle.js

Running the code in dev works without a problem.

Edit: just updated to the latest version (1.0.29 (a146856d)) and the issue still persists.

I noticed the PR open for the problem, is there a workaround in the meantime? I'd love to stay on bun but if I can't make this work I'll have to switch to something else.

[phwoelfel]

Found a simple solution by installing the buffer package:

bun add buffer

https://www.npmjs.com/package/buffer

[spirobel]

Found a simple solution by installing the buffer package:

bun add buffer

https://www.npmjs.com/package/buffer

this did not work for me. Did you do anything else besides adding this package? thx!

[dhruvkelawala]

Found a simple solution by installing the buffer package:

bun add buffer

https://www.npmjs.com/package/buffer

this did not work for me. Did you do anything else besides adding this package? thx!

Yeah, it did not work for me either

[phwoelfel]

I have the following lines in my main.ts

import { Buffer } from "buffer";
if (!window.Buffer) {
    window.Buffer = Buffer
}

and packages.json has the following dependency:

"buffer": "^6.0.3",

Haven't changed anything else.

[qwtel]

I've solved it by shoving esbuild-plugin-polyfill-node into Bun plugin system and it magically just worked

[spirobel]

just want to mention that I wrote a plugin that fixes this:

const myPlugin: BunPlugin = {
  name: "node buffer in the frontend",
  setup(build) {
    build.onResolve({ filter: /^buffer$/ }, (args) => {
      const path_to_buffer_lib = path.resolve(
        projectRoot(),
        "node_modules/buffer/index.js"
      );
      if (path_to_buffer_lib)
        return {
          path: path_to_buffer_lib,
        };
    });
  },
};

i also wrote a webframework for bun called mininext. It includes this plugin. It has a quickstart template that contains a full working example for a website with a sign-in-with-solana auth system (I assume many of you coming across this issue are looking to implement this kind of functionality) you can try it out with just one command! 👍

[keverw]

I ran into this and this seems to work:

import { Buffer } from 'buffer/';

Notice the slash at the end? That's the way the Buffer maintainer recommends to import it, and seems to work here too.