Unexpected bundle Buffer ployfill into client chunks

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 21.1.0: Wed Oct 13 17:33:24 PDT 2021; root:xnu-8019.41.5~1/RELEASE_ARM64_T8101 Binaries: Node: 16.15.1 npm: 8.11.0 Yarn: 1.22.18 pnpm: N/A Relevant packages: next: 12.2.5 eslint-config-next: 12.2.5 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

A typeof Buffer check, for example:

const isNode = typeof Buffer !== 'undefined';
console.log({ isNode });

It causes a full Buffer ployfill (22.51Kb) to be put into the client bundle.

Expected Behavior

A typeof Buffer check should just return 'undefined' in browsers instead.

Link to reproduction

https://github.com/chentsulin/nextjs-issue-40178-bundle-client-buffer

To Reproduce

Add the following lines to the pages/index.js file:

const isNode = typeof Buffer !== 'undefined';
console.log({ isNode });

[chentsulin]

I found a ProvidePlugin that may cause this problem:

https://github.com/vercel/next.js/blob/3466862d9dc9c8bb3131712134d38757b918d1c0/packages/next/build/webpack-config.ts#L1664-L1666

[chentsulin]

I believe serialize-error is designed to be used both in browser and server. It handles DOMException as well: https://github.com/sindresorhus/serialize-error/blob/a212a8c3902fa1ff1fdef8f7625dd0cc6d6e89a1/error-constructors.js#L10-L11

If it is designed to be used only on the server-side, it doesn’t need to check Buffer exists or not at the first place.

And the weekly downloads of this package almost hits 5M. A lot of people including us already use it with redux ref: https://github.com/reduxjs/redux-toolkit/issues/2392