Webpack 4, react-error-overlay, react-loadable (major) #4639

timneutkens · 2018-06-20T12:43:57Z

Fixes #4783
Fixes #2643
Fixes #3775
Fixes #4515
Fixes #3923
Fixes #4433
Fixes #4100
Fixes #4642
Fixes #3823
Fixes #4708
Fixes #4285
Fixes #4194
Fixes #4784
Fixes #4737
Fixes #4711
Fixes #3165
Fixes #2480
Fixes #1428
Fixes #2894
Fixes #4629
Fixes #2940
Fixes #4175
Fixes vercel/next-plugins#122
Implements a few fixes for #4613

Figured out the chunk runtime merging issue described in #4108

New pull request as the codebase since the initial pull request has shifted quite a bit (folders moved etc).

What's left to do:

Changes

Major

Node.js 8+ is now required.
Webpack 4, all plugins rewritten to use the Webpack 4 API
Re-implemented next/dynamic using react-loadable under the hood, this means that you still use next/dynamic but underneath it will use react-loadable instead of the previous custom solution.
Implemented react-error-overlay / new hot-dev-client implementation (overhauled error rendering in development)
Share module instances initiated by webpack between pages on the server side, allows for React 16.3 context between _app.js and pages and basically any other requirement for sharing module instances on the server side. I can also imagine this greatly reduces memory usage / improves speed in a serverless environment too.

Minor

Removed 2 "webpack specific" routes. These files are now put into .next/static: .next/static/webpack (hot update files) and .next/static/chunks (dynamic import files)
Added Webpackbar

Patches

Make sure false is not rendered on non _error.js pages
Updated a lot of tests to reset their state on failure (close browser, reset file)
_document.js is only added to server compilation, while keeping HMR for it
Figured out a bugfix for When emitting runtimeChunk, entry chunks use chunkFilename instead of filename webpack/webpack#6598
Fixed dead code elimination for the deprecated method: #4737

Breaking

Node.js 8+ is now required.
next/dynamic when providing modules as per https://github.com/zeit/next.js#4-with-multiple-modules-at-once props are no longer passed in as the function gets pre-loaded on the server and can't depend on props.

After the canary release

config tests failing on @zeit/next-css because of webpack 4, temporarily disabled.
Update next-plugins
Add modules imported in _app.js to commons as _app.js is loaded in every page. Question on webpack/webpack for advice

stramel · 2018-06-28T20:38:11Z

@timneutkens What are your Node.js supported versions? LTS is now 8. Curious if we need the 6 & 7 checks?

BTW great work! Can't wait to try out webpack 4!

# Conflicts: # build/babel/preset.js # build/index.js # build/webpack.js # server/document.js # server/render.js

timneutkens · 2018-06-29T20:45:50Z

All tests run on Node.js 6, but it's recommended to use the latest LTS/later version of Node.js

stramel · 2018-07-01T06:47:19Z

@timneutkens not sure if you saw this about the minimizer https://twitter.com/greweb/status/1013122437884542978

Only breaking change is that `props` are no longer passed into the loading function

stramel · 2018-07-02T19:11:57Z

@timneutkens I believe this will also fix #4100 and #4642 ?

timneutkens · 2018-07-02T20:18:33Z

@stramel 😌 thanks!

Will check the minimizer out once all tests pass 👍

…esulting html

arunoda

LGTM

u840903 · 2018-07-24T10:48:06Z

Oh lordy!
Great work Tim!

albinekb · 2018-07-24T13:29:47Z

Freaking awesome work! 😍

morgs32 · 2018-07-24T13:36:57Z

Congratulations! Small step for man...

tomevans18 · 2018-07-25T14:11:09Z

Great work on this, lots of fixes.
Are you looking to release this as "6.1.1-canary.3"?
Just a little desperate for the dynamic imports.

pantharshit00 · 2018-07-25T17:47:27Z

Ya need this ASAP cause SSR is breaking on my app if I am trying to use context

mariosanchez · 2018-07-26T17:26:10Z

Good job! Very happy to have Webpack 4 arround the corner 👍

jesstelford · 2018-08-12T07:11:11Z

It looks like Webpack 4 is included in 6.1.1-canary.3 🎉

Follow up on: #4639

timneutkens added 15 commits June 16, 2018 19:31

Upgrade dependencies

f9453bd

Check if files exist and warn if they don’t

3722ee2

Initial implementation

e2b92c9

Fix test

320958f

Assets can be loaded using async in development too

0d24bb2

Fix chunk names

c38cd28

Remove uglify as it is automatically applied

9f29318

Add webpackbar

aad6d25

Remove plugins that automatically apply via mode: ‘development’

6a6aa81

Check if Object.values is available as node 6 doesn’t support it

9339e2a

Add comment explaining the check

2ccd57c

Make sure we only require webpackbar when it’s supported (node 7+)

3771f5a

Read from global as babel transforms Object.values

baa1a1b

Bring back HMR plugin

eda13f2

Add react-loadable

a69aae6

timneutkens added 3 commits June 29, 2018 20:11

Fix chunk names and load react-loadable on the client side

cfc4880

Remove next/dynamic loading mechanism

08904dc

Merge branch 'canary' of github.com:zeit/next.js into webpack

cff8ea6

# Conflicts: # build/babel/preset.js # build/index.js # build/webpack.js # server/document.js # server/render.js

timneutkens mentioned this pull request Jul 2, 2018

How to use Template literals with dynamic import? #4100

Closed

Merge branch 'canary' of github.com:zeit/next.js into webpack

efb3ece

timneutkens mentioned this pull request Jul 2, 2018

Doesn't work with "multiple files" import #4433

Closed

timneutkens added 4 commits July 2, 2018 19:57

Support old dynamic behavior

7973747

Only breaking change is that `props` are no longer passed into the loading function

Update readme to reflect removed parameter

84bcd00

Make tests pass

65a8fc6

Make sure react-loadable manifest only holds chunks that are needed

f5c3905

timneutkens added 9 commits July 23, 2018 00:04

Move require cache flusher into it’s own webpack plugin

81322ce

Refactor references to compiler to multiCompiler to be clearer

a17e8f1

Remove unused method

f02eac5

If there’s no error send undefined so that it doesn’t end up in the r…

d2a44d4

…esulting html

Use undefined for err so that it’s not sent when there is no error

ea8086a

Make sure nextExport doesn’t end up in resulting HTML

94b0872

Send assetPrefix to the client only when it’s configured

e0797d2

Improve assetPrefix dataflow

a78b7e0

Fix flow types

cd66c7a

This was referenced Jul 23, 2018

Bundle different modules into a single chunk #2480

Closed

Memory leak when refreshing during rebuild #1428

Closed

arunoda approved these changes Jul 24, 2018

View reviewed changes

timneutkens changed the title ~~[WIP] Webpack 4, react-error-overlay, react-loadable~~ Webpack 4, react-error-overlay, react-loadable (major) Jul 24, 2018

timneutkens merged commit 75476a9 into vercel:canary Jul 24, 2018

timneutkens deleted the webpack branch July 24, 2018 09:24

timneutkens mentioned this pull request Jul 24, 2018

Error checking updates TypeError: promisify is not a function in latest Next (6.1.1) #4831

Closed

jstcki mentioned this pull request Jul 26, 2018

Get rid of page-count based commons chunk #4846

Closed

This was referenced Jul 29, 2018

main.js sourcemap not copied when running export vercel/next-plugins#122

Closed

Load the main JS bundle in production with async #1485

Merged

HaNdTriX mentioned this pull request Sep 18, 2018

Update with-dynamic-import example #5201

Merged

tusbar mentioned this pull request Sep 20, 2018

The dynamic imports modules function no longer receive props in next7 #5208

Closed

timneutkens pushed a commit that referenced this pull request Sep 23, 2018

Update with-dynamic-import example (#5201)

80a6160

Follow up on: #4639

lock bot locked as resolved and limited conversation to collaborators Aug 12, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack 4, react-error-overlay, react-loadable (major) #4639

Webpack 4, react-error-overlay, react-loadable (major) #4639

timneutkens commented Jun 20, 2018 •

edited

Loading

stramel commented Jun 28, 2018

timneutkens commented Jun 29, 2018

stramel commented Jul 1, 2018

stramel commented Jul 2, 2018 •

edited

Loading

timneutkens commented Jul 2, 2018

arunoda left a comment

u840903 commented Jul 24, 2018

albinekb commented Jul 24, 2018

morgs32 commented Jul 24, 2018 •

edited

Loading

tomevans18 commented Jul 25, 2018 •

edited

Loading

pantharshit00 commented Jul 25, 2018

mariosanchez commented Jul 26, 2018

jesstelford commented Aug 12, 2018

Webpack 4, react-error-overlay, react-loadable (major) #4639

Webpack 4, react-error-overlay, react-loadable (major) #4639

Conversation

timneutkens commented Jun 20, 2018 • edited Loading

Changes

Major

Minor

Patches

Breaking

After the canary release

stramel commented Jun 28, 2018

timneutkens commented Jun 29, 2018

stramel commented Jul 1, 2018

stramel commented Jul 2, 2018 • edited Loading

timneutkens commented Jul 2, 2018

arunoda left a comment

Choose a reason for hiding this comment

u840903 commented Jul 24, 2018

albinekb commented Jul 24, 2018

morgs32 commented Jul 24, 2018 • edited Loading

tomevans18 commented Jul 25, 2018 • edited Loading

pantharshit00 commented Jul 25, 2018

mariosanchez commented Jul 26, 2018

jesstelford commented Aug 12, 2018

timneutkens commented Jun 20, 2018 •

edited

Loading

stramel commented Jul 2, 2018 •

edited

Loading

morgs32 commented Jul 24, 2018 •

edited

Loading

tomevans18 commented Jul 25, 2018 •

edited

Loading