Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
blokku-chan opened this issue Feb 4, 2024 · 10 comments · Fixed by #15389
Closed

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

blokku-chan opened this issue Feb 4, 2024 · 10 comments · Fixed by #15389
Labels
bug Something isn't working bundler Something to do with the bundler

Comments

@blokku-chan
Copy link

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

@blokku-chan blokku-chan added the bug Something isn't working label Feb 4, 2024
@Electroid Electroid added the bundler Something to do with the bundler label Feb 4, 2024
@Electroid
Copy link
Contributor

Can you share the exact command you are running?

@Electroid Electroid linked a pull request Feb 4, 2024 that will close this issue
@phwoelfel
Copy link

phwoelfel commented Mar 3, 2024

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 (a146856)) 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
Copy link

Found a simple solution by installing the buffer package:

bun add buffer

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

@spirobel
Copy link

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
Copy link

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
Copy link

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
Copy link

qwtel commented May 6, 2024

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

@spirobel
Copy link

spirobel commented May 15, 2024

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
Copy link

keverw commented Jun 20, 2024

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.

gboere added a commit to gboere/nsfwjs that referenced this issue Oct 12, 2024
As recommended by the [Buffer maintainer](https://github.com/feross/buffer?tab=readme-ov-file#usage):

>To require this module explicitly, use require('buffer/') which tells the node.js module lookup algorithm (also used by browserify) to use the npm module named buffer instead of the node.js core module named buffer!

This solves a bug found bundling NSFWJS with Bun.

```
Build failed
1 | import { Buffer } from 'buffer';
             ^
error: No matching export in "node:buffer" for import "Buffer"
    at [path]
```

More information: oven-sh/bun#8683
GantMan pushed a commit to infinitered/nsfwjs that referenced this issue Nov 5, 2024
* Added trailing slash to Buffer import in index.ts

As recommended by the [Buffer maintainer](https://github.com/feross/buffer?tab=readme-ov-file#usage):

>To require this module explicitly, use require('buffer/') which tells the node.js module lookup algorithm (also used by browserify) to use the npm module named buffer instead of the node.js core module named buffer!

This solves a bug found bundling NSFWJS with Bun.

```
Build failed
1 | import { Buffer } from 'buffer';
             ^
error: No matching export in "node:buffer" for import "Buffer"
    at [path]
```

More information: oven-sh/bun#8683

* Add note about Bun issue

---------

Co-authored-by: Jamon Holmgren <code@jamon.dev>
Jarred-Sumner added a commit that referenced this issue Nov 24, 2024
@7flash
Copy link

7flash commented Nov 25, 2024

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.

Thank you! This actually solves the problem.

bun build ./index.tsx --outdir ./out --target browser

(1)

import { Buffer } from "buffer";

throws an error

error: No matching export in "../../../../../bun-vfs$$/node_modules/buffer/index.js" for import "Buffer"

(2)

import { Buffer } from "buffer/";

just works

[32ms] bundle 16 modules

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working bundler Something to do with the bundler
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants