Fix HMR for middleware #30791 #31548

javivelasco · 2021-11-17T17:17:10Z

The issue is that with Middleware we are introducing client compilation on a new layer. When a middleware changes (or is dropped after some time), Webpack reorganizes non-user modules as they are duplicated across different layer. This is currently triggering a full reload.

This also brings tests for HMR:

Refresh on a Middleware change
HMR works after a middleware compilation change.

Co-authored-by: Tobias Koppers <[email protected]>

shuding

🤯

timneutkens

Looks like this is breaking css handling 🤔

ijjk · 2021-11-18T13:53:17Z

Failing test suites

Commit: 9f7c4f4

test/integration/middleware/with-eval/test/index.test.js

Middleware usage of dynamic code evaluation > dev mode > shows a warning when running code with eval
Middleware usage of dynamic code evaluation > production mode > should have middleware warning during build

Expand output

● Middleware usage of dynamic code evaluation › dev mode › shows a warning when running code with eval

expect(received).toContain(expected) // indexOf

Expected substring: "Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware"
Received string:    "warn  - using beta Middleware (not covered by semver) - https://nextjs.org/docs/messages/beta-middleware
wait  - compiling /_middleware...
event - compiled client and server successfully in 173 ms (185 modules)
"

  39 |     afterAll(() => killApp(context.app))
  40 |
> 41 |     it('shows a warning when running code with eval', async () => {
     |                            ^
  42 |       const res = await fetchViaHTTP(context.appPort, `/using-eval`)
  43 |       const json = await res.json()
  44 |       await waitFor(500)

  at Object.<anonymous> (integration/middleware/with-eval/test/index.test.js:41:28)

● Middleware usage of dynamic code evaluation › production mode › should have middleware warning during build

expect(received).toContain(expected) // indexOf

Expected substring: "Failed to compile"
Received string:    "error - ESLint: Plugin \"react\" was conflicted between \"../../test/.eslintrc.json » eslint-config-next\" and \"../../.eslintrc.json\".
warn  - using beta Middleware (not covered by semver) - https://nextjs.org/docs/messages/beta-middleware
"

  70 |
  71 |   describe('production mode', () => {
> 72 |     let buildResult
     |                    ^
  73 |
  74 |     beforeAll(async () => {
  75 |       buildResult = await nextBuild(context.appDir, undefined, {

  at Object.<anonymous> (integration/middleware/with-eval/test/index.test.js:72:40)

test/integration/server-asset-modules/test/index.test.js

serverside asset modules > serverless mode > should enable reading local files in api routes

Expand output

● serverside asset modules › serverless mode › should enable reading local files in api routes

expect(received).toEqual(expected) // deep equality

Expected: 200
Received: 500

  16 | let app
  17 | let appPort
> 18 | const appDir = join(__dirname, '../')
     |                            ^
  19 |
  20 | function runTests() {
  21 |   it('should enable reading local files in api routes', async () => {

  at Object.<anonymous> (integration/server-asset-modules/test/index.test.js:18:28)

test/integration/telemetry/test/index.test.js

Telemetry CLI > emits telemery for usage of image, script & dynamic

Expand output

● Telemetry CLI › emits telemery for usage of image, script & dynamic

expect(received).toContain(expected) // indexOf

Expected substring: "\"invocationCount\": 1"
Received string:    "
    \"featureName\": \"next/image\",
    \"invocationCount\": 0
  "

  463 |       stderr: true,
  464 |       env: { NEXT_TELEMETRY_DEBUG: 1 },
> 465 |     })
      |       ^
  466 |
  467 |     await fs.rename(
  468 |       path.join(appDir, 'next.config.js'),

  at Object.<anonymous> (integration/telemetry/test/index.test.js:465:23)

ijjk · 2021-11-18T18:05:58Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
buildDuration	21.8s	21s	-847ms
buildDurationCached	4.1s	4.2s	⚠️ +49ms
nodeModulesSize	338 MB	338 MB	⚠️ +679 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.808	3.564	-0.24
/ avg req/sec	656.44	701.38	+44.94
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.073	1.991	-0.08
/error-in-render avg req/sec	1206.17	1255.71	+49.54

Client Bundles (main, webpack, commons)

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28.3 kB	28.3 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.2 kB	72.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.44 kB	4.45 kB	⚠️ +1 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.3 kB	13.3 kB	⚠️ +1 B

Client Build Manifests

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
index.html gzip	522 B	522 B	✓
link.html gzip	535 B	535 B	✓
withRouter.html gzip	517 B	517 B	✓
Overall change	1.57 kB	1.57 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-2a8b03d7b35abada.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-91f7c5ff8695376c.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa969765a079642e.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function() {
-          return __webpack_require__(3155);
+          return __webpack_require__(5924);
         }
       ]);
       if (false) {
@@ -969,7 +969,7 @@
       /***/
     },
 
-    /***/ 3155: /***/ function(
+    /***/ 5924: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
buildDuration	23.9s	22.6s	-1.2s
buildDurationCached	4s	4.1s	⚠️ +115ms
nodeModulesSize	338 MB	338 MB	⚠️ +679 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.663	3.944	⚠️ +0.28
/ avg req/sec	682.49	633.85	⚠️ -48.64
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.921	2.102	⚠️ +0.18
/error-in-render avg req/sec	1301.64	1189.59	⚠️ -112.05

Client Bundles (main, webpack, commons)

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.6 kB	28.6 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.5 kB	72.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.46 kB	4.47 kB	⚠️ +1 B
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.2 kB	13.2 kB	⚠️ +1 B

Client Build Manifests Overall decrease ✓

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
_buildManifest.js gzip	460 B	459 B	-1 B
Overall change	460 B	459 B	-1 B

Rendered Page Sizes

	vercel/next.js canary	javivelasco/next.js fix-30791	Change
index.html gzip	523 B	523 B	✓
link.html gzip	536 B	536 B	✓
withRouter.html gzip	517 B	517 B	✓
Overall change	1.58 kB	1.58 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-7100d3b2a548f0e4.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-ff60bc61acd2698b.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-2a8b03d7b35abada.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-91f7c5ff8695376c.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa969765a079642e.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-76232dd6bc335a24.js"

Diff for image-HASH.js

@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function() {
-          return __webpack_require__(3155);
+          return __webpack_require__(5924);
         }
       ]);
       if (false) {
@@ -969,7 +969,7 @@
       /***/
     },
 
-    /***/ 3155: /***/ function(
+    /***/ 5924: /***/ function(
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__

Commit: 3d357a6

javivelasco and others added 2 commits November 17, 2021 18:13

Fix middleware compilation

44265bc

Co-authored-by: Tobias Koppers <[email protected]>

Add middleware HMR tests

6094af5

javivelasco requested review from huozhi, ijjk, padmaia, shuding and timneutkens as code owners November 17, 2021 17:17

ijjk added the type: next label Nov 17, 2021

shuding previously approved these changes Nov 17, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

timneutkens requested changes Nov 17, 2021

View reviewed changes

avoid using the existing oneOf rule as more rules are added there

9f7c4f4

sokra dismissed shuding’s stale review via 9f7c4f4 November 18, 2021 13:26

This comment has been minimized.

Sign in to view

improve what's treated as non-user code

cb62683

This comment has been minimized.

Sign in to view

javivelasco requested a review from timneutkens November 18, 2021 17:46

Merge branch 'canary' into fix-30791

3d357a6

timneutkens approved these changes Nov 18, 2021

View reviewed changes

kodiakhq bot merged commit 5a3d558 into vercel:canary Nov 18, 2021

javivelasco deleted the fix-30791 branch November 19, 2021 08:40

iksent mentioned this pull request Dec 6, 2021

Fast refresh not working properly due to page reload when compiling middleware #31827

Closed

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

Fix HMR for middleware #30791 #31548

Fix HMR for middleware #30791 #31548

javivelasco commented Nov 17, 2021

shuding left a comment

This comment has been minimized.

timneutkens left a comment

This comment has been minimized.

ijjk commented Nov 18, 2021 •

edited

Loading

This comment has been minimized.

ijjk commented Nov 18, 2021

Diffs

Diffs

Fix HMR for middleware #30791 #31548

Fix HMR for middleware #30791 #31548

Conversation

javivelasco commented Nov 17, 2021

shuding left a comment

Choose a reason for hiding this comment

This comment has been minimized.

timneutkens left a comment

Choose a reason for hiding this comment

This comment has been minimized.

ijjk commented Nov 18, 2021 • edited Loading

Failing test suites

This comment has been minimized.

ijjk commented Nov 18, 2021

Stats from current PR

Diffs

Diffs

ijjk commented Nov 18, 2021 •

edited

Loading