oven-sh / bun

Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one
https://bun.sh
Other
74.28k stars 2.77k forks source link

Buffer Import Error When Building for Client-Side with Bun #8683

Open blokku-chan opened 9 months ago

blokku-chan commented 9 months ago

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 commented 9 months ago

Can you share the exact command you are running?

phwoelfel commented 8 months ago

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 commented 8 months ago

Found a simple solution by installing the buffer package:

bun add buffer

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

spirobel commented 8 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 6 months ago

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

spirobel commented 6 months ago

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 commented 5 months ago

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.