Style loader without externals #21359

guybedford · 2021-01-19T21:49:38Z

WIP to test if the style-loader cycles bug is due to externalization.

ijjk · 2021-01-19T21:59:14Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	guybedford/next.js style-loader	Change
buildDuration	8.7s	8.6s	-114ms
nodeModulesSize	75.3 MB	75.5 MB	⚠️ +208 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	guybedford/next.js style-loader	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.782	1.764	-0.02
/ avg req/sec	1403.05	1416.92	+13.87
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.096	1.098	0
/error-in-render avg req/sec	2281.17	2277.8	⚠️ -3.37

Client Bundles (main, webpack, commons)

	vercel/next.js canary	guybedford/next.js style-loader	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	guybedford/next.js style-loader	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	guybedford/next.js style-loader	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	guybedford/next.js style-loader	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	guybedford/next.js style-loader	Change
index.html gzip	616 B	616 B	✓
link.html gzip	622 B	622 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.85 kB	1.85 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	guybedford/next.js style-loader	Change
buildDuration	10.6s	10.4s	-218ms
nodeModulesSize	75.3 MB	75.5 MB	⚠️ +208 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	guybedford/next.js style-loader	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	guybedford/next.js style-loader	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	guybedford/next.js style-loader	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	guybedford/next.js style-loader	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	guybedford/next.js style-loader	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.19 MB	5.19 MB	✓

Webpack 5 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	guybedford/next.js style-loader	Change
buildDuration	10.5s	10.8s	⚠️ +232ms
nodeModulesSize	75.3 MB	75.5 MB	⚠️ +208 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	guybedford/next.js style-loader	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.764	1.755	-0.01
/ avg req/sec	1417.3	1424.58	+7.28
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.094	1.13	⚠️ +0.04
/error-in-render avg req/sec	2285.11	2211.99	⚠️ -73.12

Client Bundles (main, webpack, commons)

	vercel/next.js canary	guybedford/next.js style-loader	Change
597-3bd7d6bd..868b.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	6.58 kB	6.58 kB	✓
webpack-HASH.js gzip	954 B	954 B	✓
Overall change	59.8 kB	59.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	guybedford/next.js style-loader	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	guybedford/next.js style-loader	Change
_app-a5b2e84..33cf.js gzip	1.26 kB	1.26 kB	✓
_error-6f1f9..5577.js gzip	3.38 kB	3.38 kB	✓
hooks-725de8..0a15.js gzip	904 B	904 B	✓
index-939503..6e1c.js gzip	232 B	232 B	✓
link-e0cc871..fdbb.js gzip	1.63 kB	1.63 kB	✓
routerDirect..9360.js gzip	308 B	308 B	✓
withRouter-6..44ec.js gzip	304 B	304 B	✓
Overall change	8.02 kB	8.02 kB	✓

Client Build Manifests

	vercel/next.js canary	guybedford/next.js style-loader	Change
_buildManifest.js gzip	299 B	299 B	✓
Overall change	299 B	299 B	✓

Rendered Page Sizes

	vercel/next.js canary	guybedford/next.js style-loader	Change
index.html gzip	587 B	587 B	✓
link.html gzip	593 B	593 B	✓
withRouter.html gzip	581 B	581 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "gKqCkGLYlOQlgKsZHOiZA",
+        "buildId": "1hHz4L70AJzyI5hHmyPyu",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/gKqCkGLYlOQlgKsZHOiZA/_buildManifest.js"
+      src="/_next/static/1hHz4L70AJzyI5hHmyPyu/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/gKqCkGLYlOQlgKsZHOiZA/_ssgManifest.js"
+      src="/_next/static/1hHz4L70AJzyI5hHmyPyu/_ssgManifest.js"
       async=""
     ></script>
   </body>

Diff for link.html

@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "gKqCkGLYlOQlgKsZHOiZA",
+        "buildId": "1hHz4L70AJzyI5hHmyPyu",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/gKqCkGLYlOQlgKsZHOiZA/_buildManifest.js"
+      src="/_next/static/1hHz4L70AJzyI5hHmyPyu/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/gKqCkGLYlOQlgKsZHOiZA/_ssgManifest.js"
+      src="/_next/static/1hHz4L70AJzyI5hHmyPyu/_ssgManifest.js"
       async=""
     ></script>
   </body>

Diff for withRouter.html

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "gKqCkGLYlOQlgKsZHOiZA",
+        "buildId": "1hHz4L70AJzyI5hHmyPyu",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/gKqCkGLYlOQlgKsZHOiZA/_buildManifest.js"
+      src="/_next/static/1hHz4L70AJzyI5hHmyPyu/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/gKqCkGLYlOQlgKsZHOiZA/_ssgManifest.js"
+      src="/_next/static/1hHz4L70AJzyI5hHmyPyu/_ssgManifest.js"
       async=""
     ></script>
   </body>

Commit: cbd4a66

ijjk · 2021-01-19T22:01:08Z

Failing test suites

Commit: cbd4a66

test/integration/dynamic-routing/test/index.test.js

Dynamic Routing > dev mode > [nested ssg: catch all] should pass params in getStaticProps during SSR
Dynamic Routing > dev mode > [predefined ssg: catch all] should pass param in getStaticProps during SSR
Dynamic Routing > dev mode > [predefined ssg: catch all] should pass params in getStaticProps during SSR
Dynamic Routing > dev mode > [predefined ssg: prerendered catch all] should pass param in getStaticProps during SSR
Dynamic Routing > dev mode > [predefined ssg: prerendered catch all] should pass params in getStaticProps during SSR
Dynamic Routing > dev mode > [ssg: catch-all] should pass params in getStaticProps during client navigation (single)
Dynamic Routing > dev mode > [ssg: catch-all] should pass params in getStaticProps during client navigation (single interpolated)
Dynamic Routing > dev mode > [ssg: catch-all] should pass params in getStaticProps during client navigation (multi)
Dynamic Routing > dev mode > [ssg: catch-all] should pass params in getStaticProps during client navigation (multi) no as
Dynamic Routing > dev mode > [ssg: catch-all] should pass params in getStaticProps during client navigation (multi interpolated)
Dynamic Routing > dev mode > [nested ssg: catch-all] should pass params in getStaticProps during client navigation (single)
Dynamic Routing > dev mode > [nested ssg: catch-all] should pass params in getStaticProps during client navigation (multi)
Dynamic Routing > dev mode > should update dynamic values on mount
Dynamic Routing > dev mode > should update with a hash in the URL
Dynamic Routing > dev mode > should scroll to a hash on mount
Dynamic Routing > dev mode > should scroll to a hash on client-side navigation
Dynamic Routing > dev mode > should respond with bad request with invalid encoding
Dynamic Routing > dev mode > should preload buildManifest for auto-export dynamic pages
Dynamic Routing > dev mode > should resolve dynamic route href for page added later
Dynamic Routing > dev mode > should show error when interpolating fails for href
Dynamic Routing > dev mode > should work with HMR correctly
Dynamic Routing > production mode > should output a routes-manifest correctly
Dynamic Routing > serverless mode > should output a routes-manifest correctly

Expand output

● Dynamic Routing › dev mode › [nested ssg: catch all] should pass params in getStaticProps during SSR

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

  447 |       `/_next/data/${buildId}/p1/p2/nested-all-ssg/test1/test2.json`
  448 |     )
> 449 |     expect(JSON.parse(data).pageProps.params).toEqual({
      |                 ^
  450 |       rest: ['test1', 'test2'],
  451 |     })
  452 |   })

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:449:17)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › dev mode › [predefined ssg: catch all] should pass param in getStaticProps during SSR

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

  457 |       `/_next/data/${buildId}/p1/p2/predefined-ssg/test1.json`
  458 |     )
> 459 |     expect(JSON.parse(data).pageProps.params).toEqual({ rest: ['test1'] })
      |                 ^
  460 |   })
  461 | 
  462 |   it('[predefined ssg: catch all] should pass params in getStaticProps during SSR', async () => {

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:459:17)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › dev mode › [predefined ssg: catch all] should pass params in getStaticProps during SSR

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

  465 |       `/_next/data/${buildId}/p1/p2/predefined-ssg/test1/test2.json`
  466 |     )
> 467 |     expect(JSON.parse(data).pageProps.params).toEqual({
      |                 ^
  468 |       rest: ['test1', 'test2'],
  469 |     })
  470 |   })

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:467:17)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › dev mode › [predefined ssg: prerendered catch all] should pass param in getStaticProps during SSR

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

  475 |       `/_next/data/${buildId}/p1/p2/predefined-ssg/one-level.json`
  476 |     )
> 477 |     expect(JSON.parse(data).pageProps.params).toEqual({ rest: ['one-level'] })
      |                 ^
  478 |   })
  479 | 
  480 |   it('[predefined ssg: prerendered catch all] should pass params in getStaticProps during SSR', async () => {

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:477:17)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › dev mode › [predefined ssg: prerendered catch all] should pass params in getStaticProps during SSR

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)

  483 |       `/_next/data/${buildId}/p1/p2/predefined-ssg/1st-level/2nd-level.json`
  484 |     )
> 485 |     expect(JSON.parse(data).pageProps.params).toEqual({
      |                 ^
  486 |       rest: ['1st-level', '2nd-level'],
  487 |     })
  488 |   })

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:485:17)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › dev mode › [ssg: catch-all] should pass params in getStaticProps during client navigation (single)

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#ssg-catch-all-single"}
  (Session info: headless chrome=87.0.4280.141)

  493 |       browser = await webdriver(appPort, '/')
  494 |       await browser.eval('window.beforeNav = 1')
> 495 |       await browser.elementByCss('#ssg-catch-all-single').click()
      |       ^
  496 |       await browser.waitForElementByCss('#all-ssg-content')
  497 | 
  498 |       expect(await browser.eval('window.beforeNav')).toBe(1)

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:495:7)

● Dynamic Routing › dev mode › [ssg: catch-all] should pass params in getStaticProps during client navigation (single interpolated)

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#ssg-catch-all-single-interpolated"}
  (Session info: headless chrome=87.0.4280.141)

  511 |       await browser.eval('window.beforeNav = 1')
  512 | 
> 513 |       const href = await browser
      |                    ^
  514 |         .elementByCss('#ssg-catch-all-single-interpolated')
  515 |         .getAttribute('href')
  516 | 

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:513:20)

● Dynamic Routing › dev mode › [ssg: catch-all] should pass params in getStaticProps during client navigation (multi)

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#ssg-catch-all-multi"}
  (Session info: headless chrome=87.0.4280.141)

  534 |       browser = await webdriver(appPort, '/')
  535 |       await browser.eval('window.beforeNav = 1')
> 536 |       await browser.elementByCss('#ssg-catch-all-multi').click()
      |       ^
  537 |       await browser.waitForElementByCss('#all-ssg-content')
  538 | 
  539 |       expect(await browser.eval('window.beforeNav')).toBe(1)

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:536:7)

● Dynamic Routing › dev mode › [ssg: catch-all] should pass params in getStaticProps during client navigation (multi) no as

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#ssg-catch-all-multi-no-as"}
  (Session info: headless chrome=87.0.4280.141)

  551 |       browser = await webdriver(appPort, '/')
  552 |       await browser.eval('window.beforeNav = 1')
> 553 |       await browser.elementByCss('#ssg-catch-all-multi-no-as').click()
      |       ^
  554 |       await browser.waitForElementByCss('#all-ssg-content')
  555 | 
  556 |       expect(await browser.eval('window.beforeNav')).toBe(1)

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:553:7)

● Dynamic Routing › dev mode › [ssg: catch-all] should pass params in getStaticProps during client navigation (multi interpolated)

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#ssg-catch-all-multi-interpolated"}
  (Session info: headless chrome=87.0.4280.141)

  569 |       await browser.eval('window.beforeNav = 1')
  570 | 
> 571 |       const href = await browser
      |                    ^
  572 |         .elementByCss('#ssg-catch-all-multi-interpolated')
  573 |         .getAttribute('href')
  574 | 

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:571:20)

● Dynamic Routing › dev mode › [nested ssg: catch-all] should pass params in getStaticProps during client navigation (single)

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#nested-ssg-catch-all-single"}
  (Session info: headless chrome=87.0.4280.141)

  591 |     try {
  592 |       browser = await webdriver(appPort, '/')
> 593 |       await browser.elementByCss('#nested-ssg-catch-all-single').click()
      |       ^
  594 |       await browser.waitForElementByCss('#nested-all-ssg-content')
  595 | 
  596 |       const text = await browser.elementByCss('#nested-all-ssg-content').text()

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:593:7)

● Dynamic Routing › dev mode › [nested ssg: catch-all] should pass params in getStaticProps during client navigation (multi)

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#nested-ssg-catch-all-multi"}
  (Session info: headless chrome=87.0.4280.141)

  605 |     try {
  606 |       browser = await webdriver(appPort, '/')
> 607 |       await browser.elementByCss('#nested-ssg-catch-all-multi').click()
      |       ^
  608 |       await browser.waitForElementByCss('#nested-all-ssg-content')
  609 | 
  610 |       const text = await browser.elementByCss('#nested-all-ssg-content').text()

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:607:7)

● Dynamic Routing › dev mode › should update dynamic values on mount

expect(received).toMatch(expected)

Expected pattern: /onmpost:.*pending/
Received string:  "<!DOCTYPE html><html><head><style data-next-hide-fouc=\"true\">body{display:none}</style><noscript data-next-hide-fouc=\"true\"><style>body{display:block}</style></noscript><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main.js?ts=1611093604203\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/webpack.js?ts=1611093604203\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app.js?ts=1611093604203\" as=\"script\"/><link rel=\"preload\" href=\"/_next/static/chunks/pages/_error.js?ts=1611093604203\" as=\"script\"/><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body><div id=\"__next\"></div><script src=\"/_next/static/chunks/react-refresh.js?ts=1611093604203\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"Error\",\"message\":\"Module not found: Can't resolve '../../../../../../../../packages/next/dist/compiled/style-loader/runtime/injectStylesIntoStyleTag.js'\\nnull\",\"stack\":\"Error: Module not found: Can't resolve '../../../../../../../../packages/next/dist/compiled/style-loader/runtime/injectStylesIntoStyleTag.js'\\nnull\\n    at getNotFoundError (/home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:2:267)\\n    at async getModuleBuildError (/home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:1:2434)\\n    at async /home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:514\\n    at async Promise.all (index 0)\\n    at async /home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:439\"},\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1611093604203\"></script><script src=\"/_next/static/chunks/main.js?ts=1611093604203\"></script><script src=\"/_next/static/chunks/webpack.js?ts=1611093604203\"></script><script src=\"/_next/static/chunks/pages/_app.js?ts=1611093604203\"></script><script src=\"/_next/static/chunks/pages/_error.js?ts=1611093604203\"></script><script src=\"/_next/static/development/_buildManifest.js?ts=1611093604203\"></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1611093604203\"></script></body></html>"

  617 |   it('should update dynamic values on mount', async () => {
  618 |     const html = await renderViaHTTP(appPort, '/on-mount/post-1')
> 619 |     expect(html).toMatch(/onmpost:.*pending/)
      |                  ^
  620 | 
  621 |     const browser = await webdriver(appPort, '/on-mount/post-1')
  622 |     const text = await browser.eval(`document.body.innerHTML`)

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:619:18)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › dev mode › should update with a hash in the URL

expect(received).toMatch(expected)

Expected pattern: /onmpost:.*post-1/
Received string:  "<div id=\"__next\"></div><script src=\"/_next/static/chunks/react-refresh.js?ts=1611093604401\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"Error\",\"message\":\"Module not found: Can't resolve '../../../../../../../../packages/next/dist/compiled/style-loader/runtime/injectStylesIntoStyleTag.js'\\nnull\",\"stack\":\"Error: Module not found: Can't resolve '../../../../../../../../packages/next/dist/compiled/style-loader/runtime/injectStylesIntoStyleTag.js'\\nnull\\n    at getNotFoundError (/home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:2:267)\\n    at async getModuleBuildError (/home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:1:2434)\\n    at async /home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:514\\n    at async Promise.all (index 0)\\n    at async /home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:439\"},\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1611093604401\"></script><script src=\"/_next/static/chunks/main.js?ts=1611093604401\"></script><script src=\"/_next/static/chunks/webpack.js?ts=1611093604401\"></script><script src=\"/_next/static/chunks/pages/_app.js?ts=1611093604401\"></script><div id=\"__next-build-watcher\" style=\"position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;\"></div><script src=\"/_next/static/chunks/pages/_error.js?ts=1611093604401\"></script><script src=\"/_next/static/development/_buildManifest.js?ts=1611093604401\"></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1611093604401\"></script><nextjs-portal></nextjs-portal>"

  632 |     const browser = await webdriver(appPort, '/on-mount/post-1#abc')
  633 |     const text = await browser.eval(`document.body.innerHTML`)
> 634 |     expect(text).toMatch(/onmpost:.*post-1/)
      |                  ^
  635 |   })
  636 | 
  637 |   it('should scroll to a hash on mount', async () => {

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:634:18)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › dev mode › should scroll to a hash on mount

expect(received).toMatch(expected)

Expected pattern: /onmpost:.*post-1/
Received string:  "<div id=\"__next\"></div><script src=\"/_next/static/chunks/react-refresh.js?ts=1611093604963\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"Error\",\"message\":\"Module not found: Can't resolve '../../../../../../../../packages/next/dist/compiled/style-loader/runtime/injectStylesIntoStyleTag.js'\\nnull\",\"stack\":\"Error: Module not found: Can't resolve '../../../../../../../../packages/next/dist/compiled/style-loader/runtime/injectStylesIntoStyleTag.js'\\nnull\\n    at getNotFoundError (/home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:2:267)\\n    at async getModuleBuildError (/home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:1:2434)\\n    at async /home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:514\\n    at async Promise.all (index 0)\\n    at async /home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:439\"},\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1611093604963\"></script><script src=\"/_next/static/chunks/main.js?ts=1611093604963\"></script><script src=\"/_next/static/chunks/webpack.js?ts=1611093604963\"></script><script src=\"/_next/static/chunks/pages/_app.js?ts=1611093604963\"></script><div id=\"__next-build-watcher\" style=\"position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;\"></div><script src=\"/_next/static/chunks/pages/_error.js?ts=1611093604963\"></script><script src=\"/_next/static/development/_buildManifest.js?ts=1611093604963\"></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1611093604963\"></script><nextjs-portal></nextjs-portal>"

  639 | 
  640 |     const text = await browser.eval(`document.body.innerHTML`)
> 641 |     expect(text).toMatch(/onmpost:.*post-1/)
      |                  ^
  642 | 
  643 |     const scrollPosition = await browser.eval('window.pageYOffset')
  644 |     expect(scrollPosition).toBe(7232)

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:641:18)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › dev mode › should scroll to a hash on client-side navigation

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#view-dynamic-with-hash"}
  (Session info: headless chrome=87.0.4280.141)

  647 |   it('should scroll to a hash on client-side navigation', async () => {
  648 |     const browser = await webdriver(appPort, '/')
> 649 |     await browser.elementByCss('#view-dynamic-with-hash').click()
      |     ^
  650 |     await browser.waitForElementByCss('#asdf')
  651 | 
  652 |     const text = await browser.elementByCss('#asdf').text()

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:649:5)

● Dynamic Routing › dev mode › should respond with bad request with invalid encoding

expect(received).toBe(expected) // Object.is equality

Expected: 400
Received: 500

  720 |   it('should respond with bad request with invalid encoding', async () => {
  721 |     const res = await fetchViaHTTP(appPort, '/%')
> 722 |     expect(res.status).toBe(400)
      |                        ^
  723 |   })
  724 | 
  725 |   it('should preload buildManifest for auto-export dynamic pages', async () => {

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:722:24)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › dev mode › should preload buildManifest for auto-export dynamic pages

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 0

  734 |       }
  735 |     }
> 736 |     expect(found).toBe(1)
      |                   ^
  737 |   })
  738 | 
  739 |   it('should not preload buildManifest for non-auto export dynamic pages', async () => {

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:736:19)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › dev mode › should resolve dynamic route href for page added later

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#added-later-link"}
  (Session info: headless chrome=87.0.4280.141)

  776 |       }, 'success')
  777 | 
> 778 |       await browser.elementByCss('#added-later-link').click()
      |       ^
  779 |       await browser.waitForElementByCss('#added-later')
  780 | 
  781 |       const text = await browser.elementByCss('#added-later').text()

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:778:7)

● Dynamic Routing › dev mode › should show error when interpolating fails for href

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#view-post-1-interpolated-incorrectly"}
  (Session info: headless chrome=87.0.4280.141)

  787 |     it('should show error when interpolating fails for href', async () => {
  788 |       const browser = await webdriver(appPort, '/')
> 789 |       await browser
      |       ^
  790 |         .elementByCss('#view-post-1-interpolated-incorrectly')
  791 |         .click()
  792 |       expect(await hasRedbox(browser)).toBe(true)

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:789:7)

● Dynamic Routing › dev mode › should work with HMR correctly

expect(received).toMatch(expected)

Expected pattern: /comments for.*post-1/
Received string:  "<head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><meta name=\"next-head-count\" content=\"2\"><noscript data-n-css=\"\"></noscript><link rel=\"preload\" href=\"/_next/static/chunks/main.js?ts=1611093607239\" as=\"script\"><link rel=\"preload\" href=\"/_next/static/chunks/webpack.js?ts=1611093607239\" as=\"script\"><link rel=\"preload\" href=\"/_next/static/chunks/pages/_app.js?ts=1611093607239\" as=\"script\"><link rel=\"preload\" href=\"/_next/static/chunks/pages/_error.js?ts=1611093607239\" as=\"script\"><noscript id=\"__next_css__DO_NOT_USE__\"></noscript><script charset=\"utf-8\" src=\"/_next/static/chunks/0.js\"></script></head><body style=\"overflow: hidden;\"><div id=\"__next\"></div><script src=\"/_next/static/chunks/react-refresh.js?ts=1611093607239\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"Error\",\"message\":\"Module not found: Can't resolve '../../../../../../../../packages/next/dist/compiled/style-loader/runtime/injectStylesIntoStyleTag.js'\\nnull\",\"stack\":\"Error: Module not found: Can't resolve '../../../../../../../../packages/next/dist/compiled/style-loader/runtime/injectStylesIntoStyleTag.js'\\nnull\\n    at getNotFoundError (/home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.js:2:267)\\n    at async getModuleBuildError (/home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.js:1:2434)\\n    at async /home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:514\\n    at async Promise.all (index 0)\\n    at async /home/runner/work/next.js/next.js/packages/next/dist/build/webpack/plugins/wellknown-errors-plugin/index.js:1:439\"},\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1611093607239\"></script><script src=\"/_next/static/chunks/main.js?ts=1611093607239\"></script><script src=\"/_next/static/chunks/webpack.js?ts=1611093607239\"></script><script src=\"/_next/static/chunks/pages/_app.js?ts=1611093607239\"></script><div id=\"__next-build-watcher\" style=\"position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;\"></div><script src=\"/_next/static/chunks/pages/_error.js?ts=1611093607239\"></script><script src=\"/_next/static/development/_buildManifest.js?ts=1611093607239\"></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1611093607239\"></script><nextjs-portal></nextjs-portal></body>"

  800 |       const browser = await webdriver(appPort, '/post-1/comments')
  801 |       let text = await browser.eval(`document.documentElement.innerHTML`)
> 802 |       expect(text).toMatch(/comments for.*post-1/)
      |                    ^
  803 | 
  804 |       const page = join(appDir, 'pages/[name]/comments.js')
  805 |       const origContent = await fs.readFile(page, 'utf8')

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:802:20)
      at runMicrotasks (<anonymous>)

● Dynamic Routing › production mode › should output a routes-manifest correctly

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

- Expected  - 0
+ Received  + 8

@@ -42,10 +42,18 @@
        },
      },
    ],
    "dynamicRoutes": Array [
      Object {
+       "namedRegex": "^/added\\-later/(?<slug>[^/]+?)(?:/)?$",
+       "page": "/added-later/[slug]",
+       "regex": "^\\/added\\-later\\/([^\\/]+?)(?:\\/)?$",
+       "routeKeys": Object {
+         "slug": "slug",
+       },
+     },
+     Object {
        "namedRegex": "^/b/(?<a>[^/]+?)(?:/)?$",
        "page": "/b/[123]",
        "regex": "^\\/b\\/([^\\/]+?)(?:\\/)?$",
        "routeKeys": Object {
          "a": "123",

  839 |       }
  840 | 
> 841 |       expect(manifest).toEqual({
      |                        ^
  842 |         version: 3,
  843 |         pages404: true,
  844 |         basePath: '',

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:841:24)

● Dynamic Routing › serverless mode › should output a routes-manifest correctly

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

- Expected  - 0
+ Received  + 8

@@ -42,10 +42,18 @@
        },
      },
    ],
    "dynamicRoutes": Array [
      Object {
+       "namedRegex": "^/added\\-later/(?<slug>[^/]+?)(?:/)?$",
+       "page": "/added-later/[slug]",
+       "regex": "^\\/added\\-later\\/([^\\/]+?)(?:\\/)?$",
+       "routeKeys": Object {
+         "slug": "slug",
+       },
+     },
+     Object {
        "namedRegex": "^/b/(?<a>[^/]+?)(?:/)?$",
        "page": "/b/[123]",
        "regex": "^\\/b\\/([^\\/]+?)(?:\\/)?$",
        "routeKeys": Object {
          "a": "123",

  839 |       }
  840 | 
> 841 |       expect(manifest).toEqual({
      |                        ^
  842 |         version: 3,
  843 |         pages404: true,
  844 |         basePath: '',

  at Object.<anonymous> (integration/dynamic-routing/test/index.test.js:841:24)

test/acceptance/ReactRefreshLogBox.dev.test.js

css syntax errors
scss syntax errors

Expand output

● css syntax errors

expect(received).toBe(expected) // Object.is equality

Expected: false
Received: true

  807 |   )
  808 | 
> 809 |   expect(await session.hasRedbox()).toBe(false)
      |                                     ^
  810 | 
  811 |   // Syntax error
  812 |   await session.patch('index.module.css', `.button {`)

  at Object.<anonymous> (acceptance/ReactRefreshLogBox.dev.test.js:809:37)

● scss syntax errors

expect(received).toBe(expected) // Object.is equality

Expected: false
Received: true

  852 |   )
  853 | 
> 854 |   expect(await session.hasRedbox()).toBe(false)
      |                                     ^
  855 | 
  856 |   // Syntax error
  857 |   await session.patch('index.module.scss', `.button { font-size: :5px; }`)

  at Object.<anonymous> (acceptance/ReactRefreshLogBox.dev.test.js:854:37)

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

Can hot reload CSS Module without losing state > should update CSS color without remounting
Has CSS Module in computed styles in Development > should have CSS for page

Expand output

● Has CSS Module in computed styles in Development › should have CSS for page

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Has CSS Module in computed styles in Development should have CSS for page 1`

Snapshot: "rgb(255, 0, 0)"
Received: "rgb(0, 0, 0)"

  153 |       `window.getComputedStyle(document.querySelector('#verify-red')).color`
  154 |     )
> 155 |     expect(currentColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
      |                          ^
  156 |   })
  157 | })
  158 | 

  at Object.<anonymous> (integration/css-modules/test/index.test.js:155:26)

● Can hot reload CSS Module without losing state › should update CSS color without remounting

ElementNotInteractableError: element not interactable
  (Session info: headless chrome=87.0.4280.141)

  209 | 
  210 |     const desiredText = 'hello world'
> 211 |     await browser.elementById('text-input').type(desiredText)
      |     ^
  212 |     expect(await browser.elementById('text-input').getValue()).toBe(desiredText)
  213 | 
  214 |     const currentColor = await browser.eval(

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/css-modules/test/index.test.js:211:5)

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

Can hot reload CSS Module without losing state > should update CSS color without remounting
Has CSS Module in computed styles in Development > should have CSS for page

Expand output

● Has CSS Module in computed styles in Development › should have CSS for page

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Has CSS Module in computed styles in Development should have CSS for page 1`

Snapshot: "rgb(255, 0, 0)"
Received: "rgb(0, 0, 0)"

  152 |       `window.getComputedStyle(document.querySelector('#verify-red')).color`
  153 |     )
> 154 |     expect(currentColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
      |                          ^
  155 |   })
  156 | })
  157 | 

  at Object.<anonymous> (integration/scss-modules/test/index.test.js:154:26)

● Can hot reload CSS Module without losing state › should update CSS color without remounting

ElementNotInteractableError: element not interactable
  (Session info: headless chrome=87.0.4280.141)

  208 | 
  209 |     const desiredText = 'hello world'
> 210 |     await browser.elementById('text-input').type(desiredText)
      |     ^
  211 |     expect(await browser.elementById('text-input').getValue()).toBe(desiredText)
  212 | 
  213 |     const currentColor = await browser.eval(

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/scss-modules/test/index.test.js:210:5)

test/integration/scss/test/index.test.js

SCSS Support > Can hot reload CSS without losing state > should update CSS color without remounting
SCSS Support > Has CSS in computed styles in Development > should have CSS for page
SCSS Support > Ordering with styled-jsx (dev) > should have the correct color (css ordering)

Expand output

● SCSS Support › Can hot reload CSS without losing state › should update CSS color without remounting

thrown: "Exceeded timeout of 120000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  411 |     let appPort
  412 |     let app
> 413 |     beforeAll(async () => {
      |     ^
  414 |       appPort = await findPort()
  415 |       app = await launchApp(appDir, appPort)
  416 |     })

  at integration/scss/test/index.test.js:413:5
  at integration/scss/test/index.test.js:404:3
  at Object.<anonymous> (integration/scss/test/index.test.js:24:1)

● SCSS Support › Has CSS in computed styles in Development › should have CSS for page

thrown: "Exceeded timeout of 120000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  469 |     let appPort
  470 |     let app
> 471 |     beforeAll(async () => {
      |     ^
  472 |       appPort = await findPort()
  473 |       app = await launchApp(appDir, appPort)
  474 |     })

  at integration/scss/test/index.test.js:471:5
  at integration/scss/test/index.test.js:462:3
  at Object.<anonymous> (integration/scss/test/index.test.js:24:1)

● SCSS Support › Ordering with styled-jsx (dev) › should have the correct color (css ordering)

thrown: "Exceeded timeout of 120000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  846 |     let appPort
  847 |     let app
> 848 |     beforeAll(async () => {
      |     ^
  849 |       await remove(join(appDir, '.next'))
  850 |       appPort = await findPort()
  851 |       app = await launchApp(appDir, appPort)

  at integration/scss/test/index.test.js:848:5
  at integration/scss/test/index.test.js:843:3
  at Object.<anonymous> (integration/scss/test/index.test.js:24:1)

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  282 | export async function killApp(instance) {
  283 |   await new Promise((resolve, reject) => {
> 284 |     treeKill(instance.pid, (err) => {
      |                       ^
  285 |       if (err) {
  286 |         if (
  287 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:284:23
  at killApp (lib/next-test-utils.js:283:9)
  at integration/scss/test/index.test.js:418:13

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  282 | export async function killApp(instance) {
  283 |   await new Promise((resolve, reject) => {
> 284 |     treeKill(instance.pid, (err) => {
      |                       ^
  285 |       if (err) {
  286 |         if (
  287 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:284:23
  at killApp (lib/next-test-utils.js:283:9)
  at integration/scss/test/index.test.js:476:13

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  282 | export async function killApp(instance) {
  283 |   await new Promise((resolve, reject) => {
> 284 |     treeKill(instance.pid, (err) => {
      |                       ^
  285 |       if (err) {
  286 |         if (
  287 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:284:23
  at killApp (lib/next-test-utils.js:283:9)
  at integration/scss/test/index.test.js:854:13

test/integration/css/test/index.test.js

CSS Support > Basic CSS Modules Ordering > Development Mode > should have correct color on index page (on load)
CSS Support > Basic CSS Modules Ordering > Development Mode > should have correct color on index page (on hover)
CSS Support > Basic CSS Modules Ordering > Development Mode > should have correct color on index page (on nav)
CSS Support > CSS Modules Composes Ordering > Development Mode > should have correct color on index page (on load)
CSS Support > CSS Modules Composes Ordering > Development Mode > should have correct color on index page (on hover)
CSS Support > CSS Modules Composes Ordering > Development Mode > should have correct color on index page (on nav from index)
CSS Support > CSS Modules Composes Ordering > Development Mode > should have correct color on index page (on nav from other)
CSS Support > Can hot reload CSS without losing state > should update CSS color without remounting
CSS Support > Has CSS in computed styles in Development > should have CSS for page
CSS Support > Ordering with Global CSS and Modules (dev) > should not execute scripts in any order
CSS Support > Ordering with Global CSS and Modules (dev) > should have the correct color (css ordering)
CSS Support > Ordering with Global CSS and Modules (dev) > should have the correct color (css ordering) during hot reloads
CSS Support > Ordering with styled-jsx (dev) > should have the correct color (css ordering)
CSS Support > React Lifecyce Order (dev) > should have the correct color on mount after navigation

Expand output

● CSS Support › React Lifecyce Order (dev) › should have the correct color on mount after navigation

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  262 |     })
  263 | 
> 264 |     it('should have the correct color on mount after navigation', async () => {
      |     ^
  265 |       let browser
  266 |       try {
  267 |         browser = await webdriver(appPort, '/')

  at integration/css/test/index.test.js:264:5
  at integration/css/test/index.test.js:248:3
  at Object.<anonymous> (integration/css/test/index.test.js:23:1)

● CSS Support › Can hot reload CSS without losing state › should update CSS color without remounting

thrown: "Exceeded timeout of 120000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  442 |     let appPort
  443 |     let app
> 444 |     beforeAll(async () => {
      |     ^
  445 |       appPort = await findPort()
  446 |       app = await launchApp(appDir, appPort)
  447 |     })

  at integration/css/test/index.test.js:444:5
  at integration/css/test/index.test.js:435:3
  at Object.<anonymous> (integration/css/test/index.test.js:23:1)

● CSS Support › Has CSS in computed styles in Development › should have CSS for page

thrown: "Exceeded timeout of 120000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  502 |     let appPort
  503 |     let app
> 504 |     beforeAll(async () => {
      |     ^
  505 |       appPort = await findPort()
  506 |       app = await launchApp(appDir, appPort)
  507 |     })

  at integration/css/test/index.test.js:504:5
  at integration/css/test/index.test.js:495:3
  at Object.<anonymous> (integration/css/test/index.test.js:23:1)

● CSS Support › Ordering with styled-jsx (dev) › should have the correct color (css ordering)

thrown: "Exceeded timeout of 120000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  864 |     let appPort
  865 |     let app
> 866 |     beforeAll(async () => {
      |     ^
  867 |       await remove(join(appDir, '.next'))
  868 |       appPort = await findPort()
  869 |       app = await launchApp(appDir, appPort)

  at integration/css/test/index.test.js:866:5
  at integration/css/test/index.test.js:861:3
  at Object.<anonymous> (integration/css/test/index.test.js:23:1)

● CSS Support › Ordering with Global CSS and Modules (dev) › should not execute scripts in any order

thrown: "Exceeded timeout of 120000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  922 |     let appPort
  923 |     let app
> 924 |     beforeAll(async () => {
      |     ^
  925 |       await remove(join(appDir, '.next'))
  926 |       appPort = await findPort()
  927 |       app = await launchApp(appDir, appPort)

  at integration/css/test/index.test.js:924:5
  at integration/css/test/index.test.js:919:3
  at Object.<anonymous> (integration/css/test/index.test.js:23:1)

● CSS Support › Ordering with Global CSS and Modules (dev) › should have the correct color (css ordering)

thrown: "Exceeded timeout of 120000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  922 |     let appPort
  923 |     let app
> 924 |     beforeAll(async () => {
      |     ^
  925 |       await remove(join(appDir, '.next'))
  926 |       appPort = await findPort()
  927 |       app = await launchApp(appDir, appPort)

  at integration/css/test/index.test.js:924:5
  at integration/css/test/index.test.js:919:3
  at Object.<anonymous> (integration/css/test/index.test.js:23:1)

● CSS Support › Ordering with Global CSS and Modules (dev) › should have the correct color (css ordering) during hot reloads

thrown: "Exceeded timeout of 120000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  922 |     let appPort
  923 |     let app
> 924 |     beforeAll(async () => {
      |     ^
  925 |       await remove(join(appDir, '.next'))
  926 |       appPort = await findPort()
  927 |       app = await launchApp(appDir, appPort)

  at integration/css/test/index.test.js:924:5
  at integration/css/test/index.test.js:919:3
  at Object.<anonymous> (integration/css/test/index.test.js:23:1)

● CSS Support › CSS Modules Composes Ordering › Development Mode › should have correct color on index page (on load)

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(17, 17, 17)"
Received: "rgb(0, 0, 0)"

  1323 |           `window.getComputedStyle(document.querySelector('#black-title')).color`
  1324 |         )
> 1325 |         expect(titleColor).toBe('rgb(17, 17, 17)')
       |                            ^
  1326 |       }
  1327 |       async function checkRedTitle(browser) {
  1328 |         await browser.waitForElementByCss('#red-title')

  at checkBlackTitle (integration/css/test/index.test.js:1325:28)
      at runMicrotasks (<anonymous>)
  at Object.<anonymous> (integration/css/test/index.test.js:1338:11)

● CSS Support › CSS Modules Composes Ordering › Development Mode › should have correct color on index page (on hover)

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  1342 |       })
  1343 | 
> 1344 |       it('should have correct color on index page (on hover)', async () => {
       |       ^
  1345 |         const browser = await webdriver(appPort, '/')
  1346 |         try {
  1347 |           await checkBlackTitle(browser)

  at tests (integration/css/test/index.test.js:1344:7)
  at integration/css/test/index.test.js:1465:7
  at integration/css/test/index.test.js:1453:5
  at integration/css/test/index.test.js:1315:3

● CSS Support › CSS Modules Composes Ordering › Development Mode › should have correct color on index page (on nav from index)

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  1414 |       }
  1415 | 
> 1416 |       it('should have correct color on index page (on nav from index)', async () => {
       |       ^
  1417 |         const browser = await webdriver(appPort, '/')
  1418 |         try {
  1419 |           await checkBlackTitle(browser)

  at tests (integration/css/test/index.test.js:1416:7)
  at integration/css/test/index.test.js:1465:7
  at integration/css/test/index.test.js:1453:5
  at integration/css/test/index.test.js:1315:3

● CSS Support › CSS Modules Composes Ordering › Development Mode › should have correct color on index page (on nav from other)

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  1432 |       })
  1433 | 
> 1434 |       it('should have correct color on index page (on nav from other)', async () => {
       |       ^
  1435 |         const browser = await webdriver(appPort, '/other')
  1436 |         try {
  1437 |           await checkRedTitle(browser)

  at tests (integration/css/test/index.test.js:1434:7)
  at integration/css/test/index.test.js:1465:7
  at integration/css/test/index.test.js:1453:5
  at integration/css/test/index.test.js:1315:3

● CSS Support › Basic CSS Modules Ordering › Development Mode › should have correct color on index page (on load)

expect(received).toBe(expected) // Object.is equality

Expected: "rgb(0, 255, 0)"
Received: "rgba(0, 0, 0, 0)"

  1713 |           `window.getComputedStyle(document.querySelector('#link-other')).backgroundColor`
  1714 |         )
> 1715 |         expect(titleColor).toBe('rgb(0, 255, 0)')
       |                            ^
  1716 |       }
  1717 |       async function checkPinkButton(browser) {
  1718 |         await browser.waitForElementByCss('#link-index')

  at checkGreenButton (integration/css/test/index.test.js:1715:28)
      at runMicrotasks (<anonymous>)
  at Object.<anonymous> (integration/css/test/index.test.js:1728:11)

● CSS Support › Basic CSS Modules Ordering › Development Mode › should have correct color on index page (on hover)

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  1732 |       })
  1733 | 
> 1734 |       it('should have correct color on index page (on hover)', async () => {
       |       ^
  1735 |         const browser = await webdriver(appPort, '/')
  1736 |         try {
  1737 |           await checkGreenButton(browser)

  at tests (integration/css/test/index.test.js:1734:7)
  at integration/css/test/index.test.js:1777:7
  at integration/css/test/index.test.js:1765:5
  at integration/css/test/index.test.js:1705:3

● CSS Support › Basic CSS Modules Ordering › Development Mode › should have correct color on index page (on nav)

thrown: "Exceeded timeout of 120000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  1744 |       })
  1745 | 
> 1746 |       it('should have correct color on index page (on nav)', async () => {
       |       ^
  1747 |         const browser = await webdriver(appPort, '/')
  1748 |         try {
  1749 |           await checkGreenButton(browser)

  at tests (integration/css/test/index.test.js:1746:7)
  at integration/css/test/index.test.js:1777:7
  at integration/css/test/index.test.js:1765:5
  at integration/css/test/index.test.js:1705:3

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  282 | export async function killApp(instance) {
  283 |   await new Promise((resolve, reject) => {
> 284 |     treeKill(instance.pid, (err) => {
      |                       ^
  285 |       if (err) {
  286 |         if (
  287 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:284:23
  at killApp (lib/next-test-utils.js:283:9)
  at integration/css/test/index.test.js:449:13

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  282 | export async function killApp(instance) {
  283 |   await new Promise((resolve, reject) => {
> 284 |     treeKill(instance.pid, (err) => {
      |                       ^
  285 |       if (err) {
  286 |         if (
  287 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:284:23
  at killApp (lib/next-test-utils.js:283:9)
  at integration/css/test/index.test.js:509:13

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  282 | export async function killApp(instance) {
  283 |   await new Promise((resolve, reject) => {
> 284 |     treeKill(instance.pid, (err) => {
      |                       ^
  285 |       if (err) {
  286 |         if (
  287 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:284:23
  at killApp (lib/next-test-utils.js:283:9)
  at integration/css/test/index.test.js:872:13

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  282 | export async function killApp(instance) {
  283 |   await new Promise((resolve, reject) => {
> 284 |     treeKill(instance.pid, (err) => {
      |                       ^
  285 |       if (err) {
  286 |         if (
  287 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:284:23
  at killApp (lib/next-test-utils.js:283:9)
  at integration/css/test/index.test.js:930:13

This PR compiles `style-loader` to resolve a peer dep warning. --- Closes #21359

Timer and others added 5 commits January 19, 2021 15:35

chore: compile deps

b667984

reference compiled loader

446ca8d

test compile from source

f330a51

test without externals

8a2dcb5

try remove externals

cbd4a66

guybedford requested review from ijjk, lfades, Timer and timneutkens as code owners January 19, 2021 21:49

ijjk added the type: next label Jan 19, 2021

Timer mentioned this pull request Jan 20, 2021

chore: compile style-loader dep #21355

Merged

kodiakhq bot closed this in #21355 Jan 20, 2021

kodiakhq bot pushed a commit that referenced this pull request Jan 20, 2021

chore: compile style-loader dep (#21355)

55b8502

This PR compiles `style-loader` to resolve a peer dep warning. --- Closes #21359

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Style loader without externals #21359

Style loader without externals #21359

guybedford commented Jan 19, 2021

ijjk commented Jan 19, 2021

Diffs

ijjk commented Jan 19, 2021 •

edited

Loading

Style loader without externals #21359

Style loader without externals #21359

Conversation

guybedford commented Jan 19, 2021

ijjk commented Jan 19, 2021

Stats from current PR

Diffs

ijjk commented Jan 19, 2021 • edited Loading

Failing test suites

ijjk commented Jan 19, 2021 •

edited

Loading