the way towards webpack 5 typings #29105

sokra · 2021-09-15T14:12:15Z

name all dependencies with multiple version by their version
remove old terser-webpack-plugin from webpack bundles
add support to use webpack 5 typings manually
remove bundles/package.json as it's no longer needed

You can now use import("webpack5") to access the webpack 5 typings (and import("webpack4") for webpack 4)

remove old terser-webpack-plugin from webpack bundles add support to use webpack 5 typings manually remove bundles/package.json as it's no longer needed

sokra · 2021-09-16T08:07:53Z

test/integration/async-modules/test/index.test.js


-const isWebpack5 = parseInt(webpack.version) === 5


This test case way never executed before since this was always false.

sokra · 2021-09-16T08:47:32Z

packages/next/build/webpack/require-hook.ts

@@ -33,6 +33,30 @@ const hookPropertyMap = new Map(
      'webpack/lib/node/NodeTargetPlugin.js',
      'next/dist/compiled/webpack/NodeTargetPlugin',
    ],
+    [
+      'webpack/lib/node/NodeTemplatePlugin',


Nobody noticed that these were missing because when running next.js test cases there was a webpack package installed. That's no longer the case (only webpack4 and webpack5) so that was discovered.

Used by worker-loader and @zeit/next-css

sokra · 2021-09-16T08:48:26Z

packages/next/taskfile.js

      },
      target: 'es5',
    })
    .target('compiled/sass-loader')
 }
 // eslint-disable-next-line camelcase
-externals['schema-utils'] = 'next/dist/compiled/schema-utils'
-export async function ncc_schema_utils(task, opts) {
+externals['schema-utils'] = 'MISSING_VERSION schema-utils version not specified'


Forcing to fail if that is no overriden to force choosing a version

sokra · 2021-09-16T08:49:06Z

packages/react-dev-overlay/src/middleware.ts

@@ -11,7 +11,7 @@ import { StackFrame } from 'stacktrace-parser'
 import url from 'url'
 // @ts-ignore
 // eslint-disable-next-line import/no-extraneous-dependencies
-import webpack from 'webpack'
+import webpack from 'webpack4'


We can now incrementally move all these webpack4 imports to webpack5. Step by step.

sokra · 2021-09-16T08:50:53Z

packages/next/types/webpack.d.ts

+  import webpack4 from 'webpack4'
+  import webpack5 from 'webpack5'
+  export type Compiler = webpack4.Compiler | webpack5.Compiler
+  export type Stats = webpack4.Stats | webpack5.Stats


I started a combined webpack type here, which can be used to type things independent of webpack version

This is now visible because `webpack` no longer exists as package in next.js

that's needed to use require-hook correctly

ijjk · 2021-09-21T15:23:46Z

Failing test suites

Commit: f4683bb

test/development/acceptance/ReactRefresh.test.ts

ReactRefresh > can edit a component without losing state
ReactRefresh > cyclic dependencies

Expand output

● ReactRefresh › can edit a component without losing state

browserType.launch: Executable doesn't exist at /ms-playwright/chromium-907428/chrome-linux/chrome
╔═════════════════════════════════════════════════════════════════════════╗
║ Looks like Playwright Test or Playwright was just installed or updated. ║
║ Please run the following command to download new browsers:              ║
║                                                                         ║
║     npx playwright install                                              ║
║                                                                         ║
║ <3 Playwright Team                                                      ║
╚═════════════════════════════════════════════════════════════════════════╝

  35 |       browser = await firefox.launch({ headless })
  36 |     } else {
> 37 |       browser = await chromium.launch({ headless, devtools: !headless })
     |                                ^
  38 |     }
  39 |     context = await browser.newContext()
  40 |   }

  at Playwright.setup (lib/browsers/playwright.ts:37:32)
  at Object.webdriver [as default] (lib/next-webdriver.ts:68:17)
  at Object.sandbox (development/acceptance/helpers.ts:7:39)
  at Object.<anonymous> (development/acceptance/ReactRefresh.test.ts:18:34)

● ReactRefresh › cyclic dependencies

browserType.launch: Executable doesn't exist at /ms-playwright/chromium-907428/chrome-linux/chrome
╔═════════════════════════════════════════════════════════════════════════╗
║ Looks like Playwright Test or Playwright was just installed or updated. ║
║ Please run the following command to download new browsers:              ║
║                                                                         ║
║     npx playwright install                                              ║
║                                                                         ║
║ <3 Playwright Team                                                      ║
╚═════════════════════════════════════════════════════════════════════════╝

  35 |       browser = await firefox.launch({ headless })
  36 |     } else {
> 37 |       browser = await chromium.launch({ headless, devtools: !headless })
     |                                ^
  38 |     }
  39 |     context = await browser.newContext()
  40 |   }

  at Playwright.setup (lib/browsers/playwright.ts:37:32)
  at Object.webdriver [as default] (lib/next-webdriver.ts:68:17)
  at Object.sandbox (development/acceptance/helpers.ts:7:39)
  at Object.<anonymous> (development/acceptance/ReactRefresh.test.ts:58:40)

test/integration/app-document-remove-hmr/test/index.test.js

_app removal HMR > should HMR when _document is removed

Expand output

● _app removal HMR › should HMR when _document is removed

TIMED OUT: success

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><meta name="next-head-count" content="2"><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1632237806355"></script><script src="/_next/static/chunks/webpack.js?ts=1632237806355" defer=""></script><script src="/_next/static/chunks/main.js?ts=1632237806355" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1632237806355" defer=""></script><script src="/_next/static/chunks/pages/index.js?ts=1632237806355" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1632237806355" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1632237806355" defer=""></script><noscript id="__next_css__DO_NOT_USE__"></noscript></head><body><p>custom _document</p><div id="__next"><p>custom _app</p><p>index page</p></div><script src="/_next/static/chunks/react-refresh.js?ts=1632237806355"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script><div id="__next-build-watcher" style="position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;"></div><next-route-announcer><p aria-live="assertive" id="__next-route-announcer__" role="alert" style="border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap; overflow-wrap: normal;"></p></next-route-announcer></body>

  437 |
  438 |   if (hardError) {
> 439 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  440 |   }
  441 |   return false
  442 | }

  at Object.check (lib/next-test-utils.js:439:11)
  at Object.<anonymous> (integration/app-document-remove-hmr/test/index.test.js:123:7)

ijjk · 2021-09-21T15:29:14Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js refactor/types	Change
buildDuration	15.4s	15.4s	-70ms
buildDurationCached	3.8s	3.9s	⚠️ +97ms
nodeModulesSize	182 MB	181 MB	-882 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js refactor/types	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.289	3.368	⚠️ +0.08
/ avg req/sec	760.1	742.28	⚠️ -17.82
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.895	1.941	⚠️ +0.05
/error-in-render avg req/sec	1319.04	1287.95	⚠️ -31.09

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js refactor/types	Change
779.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	26.8 kB	26.8 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	70.6 kB	70.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js refactor/types	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js refactor/types	Change
_app-HASH.js gzip	977 B	977 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	328 B	328 B	✓
dynamic-HASH.js gzip	2.67 kB	2.67 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	4.14 kB	4.14 kB	✓
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	13 kB	13 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js refactor/types	Change
_buildManifest.js gzip	493 B	493 B	✓
Overall change	493 B	493 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js refactor/types	Change
index.html gzip	539 B	539 B	✓
link.html gzip	550 B	550 B	✓
withRouter.html gzip	533 B	533 B	✓
Overall change	1.62 kB	1.62 kB	✓

Default Build with SWC (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js refactor/types	Change
buildDuration	7.9s	7.9s	-33ms
buildDurationCached	3.8s	3.9s	⚠️ +98ms
nodeModulesSize	182 MB	181 MB	-882 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js refactor/types	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.299	3.436	⚠️ +0.14
/ avg req/sec	757.79	727.52	⚠️ -30.27
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.836	1.863	⚠️ +0.03
/error-in-render avg req/sec	1361.85	1341.94	⚠️ -19.91

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js refactor/types	Change
675-HASH.js gzip	13.8 kB	13.8 kB	✓
770.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	50.7 kB	50.7 kB	✓
main-HASH.js gzip	34.7 kB	34.7 kB	✓
webpack-HASH.js gzip	1.65 kB	1.65 kB	✓
Overall change	101 kB	101 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js refactor/types	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js refactor/types	Change
_app-HASH.js gzip	1.32 kB	1.32 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	315 B	315 B	✓
css-HASH.js gzip	331 B	331 B	✓
dynamic-HASH.js gzip	2.8 kB	2.8 kB	✓
head-HASH.js gzip	356 B	356 B	✓
hooks-HASH.js gzip	637 B	637 B	✓
image-HASH.js gzip	573 B	573 B	✓
index-HASH.js gzip	262 B	262 B	✓
link-HASH.js gzip	2.2 kB	2.2 kB	✓
routerDirect..HASH.js gzip	326 B	326 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	322 B	322 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	10.1 kB	10.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js refactor/types	Change
_buildManifest.js gzip	511 B	511 B	✓
Overall change	511 B	511 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js refactor/types	Change
index.html gzip	538 B	538 B	✓
link.html gzip	550 B	550 B	✓
withRouter.html gzip	531 B	531 B	✓
Overall change	1.62 kB	1.62 kB	✓

Commit: f4683bb

This reverts commit 93303bd.

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Sep 15, 2021

This comment has been minimized.

Sign in to view

name all dependencies with multiple version by their version

b8e933b

remove old terser-webpack-plugin from webpack bundles add support to use webpack 5 typings manually remove bundles/package.json as it's no longer needed

sokra force-pushed the refactor/types branch from 00e6c36 to b8e933b Compare September 15, 2021 18:15

This comment has been minimized.

Sign in to view

sokra added 2 commits September 16, 2021 08:39

Merge branch 'canary' into refactor/types

e7bd7f2

fix async modules test case which was never executed before

46394a0

sokra commented Sep 16, 2021

View reviewed changes

add missing require hooks which are used by test cases

7857e86

This is now visible because `webpack` no longer exists as package in next.js

sokra force-pushed the refactor/types branch from 471712f to 7857e86 Compare September 16, 2021 08:54

This comment has been minimized.

Sign in to view

sokra added 3 commits September 16, 2021 12:09

fix require path for webpack 4

b5d3cab

remove left-over debugger

f95ca32

fix react-refresh-utils types

ea0b3aa

sokra force-pushed the refactor/types branch from a87e719 to ea0b3aa Compare September 16, 2021 11:39

This comment has been minimized.

Sign in to view

sokra added 4 commits September 16, 2021 16:14

Merge branch 'canary' into refactor/types

90e0baf

remove outdated comment

d2167c7

fix amp usage

2d426ff

migrate test case to nextStart

f93a76a

that's needed to use require-hook correctly

This comment has been minimized.

Sign in to view

Merge branch 'canary' into refactor/types

b76ab2e

This comment has been minimized.

Sign in to view

sokra added 2 commits September 17, 2021 09:17

improve test runner to avoid throwing when stopping

44994cc

skip test in webpack 4

69b12c2

need to checkout before commit

7fae5a1

This comment has been minimized.

Sign in to view

sokra and others added 3 commits September 21, 2021 14:54

fix pre-committed commit action

a765fb0

fix pre-committed commit action

84669da

⚙ Update compiled files

e79b96e

This comment has been minimized.

Sign in to view

workaround yarn hoisting problem

3384ddd

This comment has been minimized.

Sign in to view

keep line endings

5fcc177

This comment has been minimized.

Sign in to view

sokra added 3 commits September 21, 2021 16:28

restore dependency

b198d3a

install chromium

93303bd

Merge branch 'canary' into refactor/types

f4683bb

sokra added 2 commits September 21, 2021 17:33

Revert "install chromium"

8e4e059

This reverts commit 93303bd.

Merge branch 'canary' into refactor/types

147f46d

sokra marked this pull request as ready for review September 21, 2021 17:09

sokra requested review from huozhi, ijjk, padmaia, shuding, styfle and timneutkens as code owners September 21, 2021 17:09

timneutkens merged commit 4f212ee into canary Sep 21, 2021

timneutkens deleted the refactor/types branch September 21, 2021 17:17

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

the way towards webpack 5 typings #29105

the way towards webpack 5 typings #29105

sokra commented Sep 15, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

sokra Sep 16, 2021

sokra Sep 16, 2021

sokra Sep 16, 2021

sokra Sep 16, 2021

sokra Sep 16, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Sep 21, 2021 •

edited

ijjk commented Sep 21, 2021

the way towards webpack 5 typings #29105

the way towards webpack 5 typings #29105

Conversation

sokra commented Sep 15, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

sokra Sep 16, 2021

Choose a reason for hiding this comment

sokra Sep 16, 2021

Choose a reason for hiding this comment

sokra Sep 16, 2021

Choose a reason for hiding this comment

sokra Sep 16, 2021

Choose a reason for hiding this comment

sokra Sep 16, 2021

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Sep 21, 2021 • edited

Failing test suites

ijjk commented Sep 21, 2021

Stats from current PR

ijjk commented Sep 21, 2021 •

edited