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.

Sign up for GitHub

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

Jump to bottom

Add polyfill for process and Buffer in webpack 5 #15499

Merged
merged 2 commits into from
Jul 28, 2020
Merged

Add polyfill for process and Buffer in webpack 5 #15499

merged 2 commits into from
Jul 28, 2020

Conversation

timneutkens
Copy link
Member

@timneutkens timneutkens commented Jul 26, 2020 •
edited
Loading

Webpack 5 no longer tries to make code meant for Node.js environment work in the browser. A side-effect of that change is that applications that currently rely on npm packages that accidentally use process e.g. to read process.env will break where they previously would work fine.

Overall I'm happy with the change in webpack but I don't want existing Next.js projects to break so we'll work on surfacing these issues in a non-distruptive way in the future.

@ijjk
Copy link
Member

ijjk commented Jul 26, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
buildDuration 15.1s 14.6s -526ms
nodeModulesSize 66.5 MB 66.5 MB ⚠️ +1.01 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.493 2.438 -0.05
/ avg req/sec 1002.96 1025.53 +22.57
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.598 1.726 ⚠️ +0.13
/error-in-render avg req/sec 1564.72 1448.04 ⚠️ -116.68
Client Bundles (main, webpack, commons)
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
677f882d2ed8..7778.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-8da3811..3b61.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 87.6 kB 87.6 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
677f882d2ed8..dule.js gzip 6.08 kB 6.08 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-43a8e8b..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 82.6 kB 82.6 kB ✓
Client Pages
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
index.html gzip 946 B 946 B ✓
link.html gzip 953 B 953 B ✓
withRouter.html gzip 940 B 940 B ✓
Overall change 2.84 kB 2.84 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
buildDuration 15.9s 15.8s -150ms
nodeModulesSize 66.5 MB 66.5 MB ⚠️ +1.01 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
677f882d2ed8..7778.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-8da3811..3b61.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 87.6 kB 87.6 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
677f882d2ed8..dule.js gzip 6.08 kB 6.08 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-43a8e8b..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 82.6 kB 82.6 kB ✓
Client Pages
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Serverless bundles
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_error.js 881 kB 881 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 881 kB 881 kB ✓
link.js 922 kB 922 kB ✓
routerDirect.js 916 kB 916 kB ✓
withRouter.js 916 kB 916 kB ✓
Overall change 4.52 MB 4.52 MB ✓
Commit: dc68892

@ijjk
Copy link
Member

ijjk commented Jul 27, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
buildDuration 12.9s 12.4s -500ms
nodeModulesSize 66.5 MB 66.5 MB ⚠️ +83 kB
Page Load Tests Overall increase ✓
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.153 2.151 0
/ avg req/sec 1161.24 1162.38 +1.14
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.459 1.444 -0.02
/error-in-render avg req/sec 1713.21 1731.49 +18.28
Client Bundles (main, webpack, commons)
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
677f882d2ed8..7778.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-eea7d2a..4017.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 87.6 kB 87.6 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
677f882d2ed8..dule.js gzip 6.08 kB 6.08 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-b12b7b0..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 82.6 kB 82.6 kB ✓
Client Pages
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Rendered Page Sizes
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
index.html gzip 944 B 944 B ✓
link.html gzip 954 B 954 B ✓
withRouter.html gzip 939 B 939 B ✓
Overall change 2.84 kB 2.84 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
buildDuration 14.1s 13.6s -442ms
nodeModulesSize 66.5 MB 66.5 MB ⚠️ +83 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
677f882d2ed8..7778.js gzip 10.2 kB 10.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
main-eea7d2a..4017.js gzip 6.72 kB 6.72 kB ✓
polyfills-05..1236.js gzip 30.8 kB 30.8 kB ✓
webpack-488d..c0e7.js gzip 751 B 751 B ✓
Overall change 87.6 kB 87.6 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
677f882d2ed8..dule.js gzip 6.08 kB 6.08 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
main-b12b7b0..dule.js gzip 5.79 kB 5.79 kB ✓
polyfills-05..dule.js gzip 30.8 kB 30.8 kB ✓
webpack-4f62..dule.js gzip 751 B 751 B ✓
Overall change 82.6 kB 82.6 kB ✓
Client Pages
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB ✓
_error-8e69b..8695.js gzip 3.41 kB 3.41 kB ✓
hooks-f7f3d0..7465.js gzip 887 B 887 B ✓
index-08fb3f..c0e9.js gzip 227 B 227 B ✓
link-ddd176e..5566.js gzip 1.29 kB 1.29 kB ✓
routerDirect..8aa1.js gzip 284 B 284 B ✓
withRouter-f..e777.js gzip 284 B 284 B ✓
Overall change 7.66 kB 7.66 kB ✓
Client Pages Modern
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_app-669dbe5..dule.js gzip 626 B 626 B ✓
_error-663e6..dule.js gzip 2.24 kB 2.24 kB ✓
hooks-805c40..dule.js gzip 387 B 387 B ✓
index-6ba5a4..dule.js gzip 226 B 226 B ✓
link-69bc264..dule.js gzip 1.25 kB 1.25 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-d..dule.js gzip 282 B 282 B ✓
Overall change 5.29 kB 5.29 kB ✓
Client Build Manifests
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_buildManifest.js gzip 275 B 275 B ✓
_buildManife..dule.js gzip 281 B 281 B ✓
Overall change 556 B 556 B ✓
Serverless bundles
vercel/next.js canary timneutkens/next.js add/webpack5-polyfills Change
_error.js 881 kB 881 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.82 kB 3.82 kB ✓
index.js 881 kB 881 kB ✓
link.js 922 kB 922 kB ✓
routerDirect.js 916 kB 916 kB ✓
withRouter.js 916 kB 916 kB ✓
Overall change 4.52 MB 4.52 MB ✓
Commit: d264726

@timneutkens timneutkens merged commit fdfc508 into vercel:canary Jul 28, 2020
@timneutkens timneutkens deleted the add/webpack5-polyfills branch July 28, 2020 09:33
@timneutkens timneutkens mentioned this pull request Jul 28, 2020
Closed
@jadbox
Copy link

jadbox commented Jul 30, 2020

@timneutkens I'm have a similar issue with another library that relies on nodejs http polyfill [ethers.js]. Is it possible that we can add one more or have a configurable way to add them with Next?

@timneutkens
Copy link
Member Author

We're planning to cover all of the previously default polyfills.

@timneutkens timneutkens mentioned this pull request Aug 6, 2020
Closed
13 tasks
@Timer Timer mentioned this pull request Aug 6, 2020
Closed
2 tasks
LauraBeatris pushed a commit to LauraBeatris/next.js that referenced this pull request Sep 1, 2020
@timneutkens @LauraBeatris
Add polyfill for process and Buffer in webpack 5 (vercel#15499)
53d67c8
@jerome-diver
Copy link

jerome-diver commented Oct 26, 2020 •
edited
Loading

Hi and thank you to modify webpack-5 and describe how to do what to get it running fine.
I'm building my SSR web site (server side is Express, client side is React) as it seems to be better than only front side code.
I think this can be add to consideration to do with as an already present reality to practice a web site. And then give a way for dev to get it config easy (i have two config: configClient and configServer object with same option config mode, module and plugins entries, so i expect to add a line to in the clientSide config part only...)

what i did

  1. I did install npm package "crypto-browserify" (started 3 years ago)
  2. and try to add something to webpack-5 config to get it running...
    resolve.fallback: { "crypto": require.resolve("crypto-browserify") },

as i can read the message tell to do that at webpack run time.
but it failed to recognize this syntax to be valid (so i think the syntax code provide by the warning message is wrong maybe, or not clear enough to indicate where to add this code)

So, I miss-understand what warning webpack-5 message said it has to be done

warning message said:

 If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
  If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }
  1. where to include the resolve.fallback (and not resolve.alias then) code line ?
  2. to clarify 100%, can you write an example of config code ? I think example code is better than sentences to show something about coding.
  3. where is the relative documentation page with nice example config to use please ?

What works and then what i think it should be indicate to be clear

the syntax "resolve.fallback" is wrong. When you indicate resolve.fallback followed by { ... } , it is confused because there is 2 syntax. It can not be clear.
Let's indicate it as simple as it is in JSON object convention like, inside the config webpack file:

resolve: { 
    fallback: { 
        "crypto": require.resolve("crypto-browserify")
    }
}

to insert inside a config webpack object to assign (the word "assign is important to be clear, because function Object has "assign" method to assign a content to the root Object).
To be clear, we have to employ linked logic words already in use in the syntax. This would be amazingly fantastic for users to directly and clearly understand the messages to reconfigure the Webpack with his new "features" removed.
Thank you so much to consider this as it can be.

So the message warning should be better like this:

 If you want to include a polyfill for frontedn/client side, you need to:
        _ install 'crypto-browserify'
        _ assign this new entry to the config file of Webpack-5: 'resolve: fallback: { { "crypto": require.resolve("crypto-browserify") } }'
  If you don't want to include a polyfill, you can use an empty module option to resole like this:
        _ assign this in Webpack-5 config file: 'resolve: { fallback: { "crypto": false } }'

@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@ijjk ijjk Awaiting requested review from ijjk

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@timneutkens @ijjk @jadbox @jerome-diver