startup performance improvements #24129

sokra · 2021-04-16T08:47:56Z

import next-server logic during the time the configuration is loaded
load minimizer plugins only when used
load ReactDevOverlay only when used
load only meta information of tsconfig for validation
make worker for configuration loading lighter
only load runTypeCheck when used
load postcss config only when used

ijjk · 2021-04-16T13:00:53Z

Failing test suites

Commit: af461ef

test/integration/amphtml-fragment-style/test/index.test.js

AMP Fragment Styles > adds styles from fragment in AMP mode correctly

Expand output

● AMP Fragment Styles › adds styles from fragment in AMP mode correctly

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Test suite failed to run

TypeError: Cannot read property '__app' of undefined

  325 |
  326 | export async function stopApp(server) {
> 327 |   if (server.__app) {
      |              ^
  328 |     await server.__app.close()
  329 |   }
  330 |   await promiseCall(server, 'close')

  at stopApp (lib/next-test-utils.js:327:14)
  at integration/amphtml-fragment-style/test/index.test.js:32:18

test/integration/absolute-assetprefix/test/index.test.js

absolute assetPrefix with path prefix > should not fetch static data from a CDN
absolute assetPrefix with path prefix > should fetch from cache correctly
absolute assetPrefix with path prefix > should work with getStaticPaths prerendered
absolute assetPrefix with path prefix > should work with getStaticPaths fallback
absolute assetPrefix with path prefix > should work with getServerSideProps

Expand output

● absolute assetPrefix with path prefix › should not fetch static data from a CDN

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● absolute assetPrefix with path prefix › should fetch from cache correctly

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● absolute assetPrefix with path prefix › should work with getStaticPaths prerendered

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● absolute assetPrefix with path prefix › should work with getStaticPaths fallback

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● absolute assetPrefix with path prefix › should work with getServerSideProps

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  291 | export async function killApp(instance) {
  292 |   await new Promise((resolve, reject) => {
> 293 |     treeKill(instance.pid, (err) => {
      |                       ^
  294 |       if (err) {
  295 |         if (
  296 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:293:23
  at killApp (lib/next-test-utils.js:292:9)
  at integration/absolute-assetprefix/test/index.test.js:65:18

test/integration/auto-export-error-bail/test/index.test.js

Auto Export _error bail > server mode > should not opt-out of auto static optimization from invalid _error
Auto Export _error bail > serverless mode > should not opt-out of auto static optimization from invalid _error

Expand output

● Auto Export _error bail › server mode › should not opt-out of auto static optimization from invalid _error

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

Expected: 0
Received: 1

  22 |     const combinedOutput = output.stderr + output.stdout
  23 |
> 24 |     expect(output.code).toBe(0)
     |                         ^
  25 |     expect(combinedOutput).not.toContain(
  26 |       'You have opted-out of Automatic Static Optimization due to'
  27 |     )

  at Object.<anonymous> (integration/auto-export-error-bail/test/index.test.js:24:25)

● Auto Export _error bail › serverless mode › should not opt-out of auto static optimization from invalid _error

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

Expected: 0
Received: 1

  22 |     const combinedOutput = output.stderr + output.stdout
  23 |
> 24 |     expect(output.code).toBe(0)
     |                         ^
  25 |     expect(combinedOutput).not.toContain(
  26 |       'You have opted-out of Automatic Static Optimization due to'
  27 |     )

  at Object.<anonymous> (integration/auto-export-error-bail/test/index.test.js:24:25)

test/integration/amphtml-custom-optimizer/test/index.test.js

AMP Custom Optimizer > should build and start for static page
AMP Custom Optimizer > should build and start for dynamic page

Expand output

● AMP Custom Optimizer › should build and start for static page

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● AMP Custom Optimizer › should build and start for dynamic page

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

test/integration/basepath-root-catch-all/test/index.test.js

dev mode > should use correct data URL for root catch-all
production mode > should use correct data URL for root catch-all
serverless mode > should use correct data URL for root catch-all

Expand output

● dev mode › should use correct data URL for root catch-all

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● production mode › should use correct data URL for root catch-all

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● serverless mode › should use correct data URL for root catch-all

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  291 | export async function killApp(instance) {
  292 |   await new Promise((resolve, reject) => {
> 293 |     treeKill(instance.pid, (err) => {
      |                       ^
  294 |       if (err) {
  295 |         if (
  296 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:293:23
  at killApp (lib/next-test-utils.js:292:9)
  at integration/basepath-root-catch-all/test/index.test.js:41:18

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  291 | export async function killApp(instance) {
  292 |   await new Promise((resolve, reject) => {
> 293 |     treeKill(instance.pid, (err) => {
      |                       ^
  294 |       if (err) {
  295 |         if (
  296 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:293:23
  at killApp (lib/next-test-utils.js:292:9)
  at integration/basepath-root-catch-all/test/index.test.js:52:18

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  291 | export async function killApp(instance) {
  292 |   await new Promise((resolve, reject) => {
> 293 |     treeKill(instance.pid, (err) => {
      |                       ^
  294 |       if (err) {
  295 |         if (
  296 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:293:23
  at killApp (lib/next-test-utils.js:292:9)
  at integration/basepath-root-catch-all/test/index.test.js:66:11

test/integration/404-page-app/test/index.test.js

404 Page Support with _app > production mode > should build successfully
404 Page Support with _app > production mode > should not output static 404 if _app has getInitialProps
404 Page Support with _app > production mode > should still use 404 page

Expand output

● 404 Page Support with _app › production mode › should build successfully

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

Expected: 0
Received: 1

  32 |       })
  33 |
> 34 |       expect(code).toBe(0)
     |                    ^
  35 |       expect(stderr).not.toMatch(gip404Err)
  36 |       expect(stdout).not.toMatch(gip404Err)
  37 |

  at Object.<anonymous> (integration/404-page-app/test/index.test.js:34:20)

● 404 Page Support with _app › production mode › should not output static 404 if _app has getInitialProps

InvalidArgumentError: invalid argument
  (Session info: headless chrome=89.0.4389.114)

  177 |   console.log(`\n> Loading browser with ${url}\n`)
  178 |
> 179 |   await browser.get(url)
      |   ^
  180 |   console.log(`\n> Loaded browser with ${url}\n`)
  181 |
  182 |   // Wait for application to hydrate

  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 _default (lib/next-webdriver.js:179:3)
  at Object.<anonymous> (integration/404-page-app/test/index.test.js:43:23)

● 404 Page Support with _app › production mode › should still use 404 page

FetchError: request to http://localhost/:undefined/abc failed, reason: connect ECONNREFUSED 127.0.0.1:80

  at ClientRequest.<anonymous> (../node_modules/node-fetch/lib/index.js:1461:11)

● Test suite failed to run

TypeError: Cannot read property 'pid' of undefined

  291 | export async function killApp(instance) {
  292 |   await new Promise((resolve, reject) => {
> 293 |     treeKill(instance.pid, (err) => {
      |                       ^
  294 |       if (err) {
  295 |         if (
  296 |           process.platform === 'win32' &&

  at lib/next-test-utils.js:293:23
  at killApp (lib/next-test-utils.js:292:9)
  at integration/404-page-app/test/index.test.js:26:20

ijjk · 2021-04-16T13:53:36Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	15s	14.8s	-206ms
buildDurationCached	4.6s	4.3s	-356ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +10.8 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js perf/startup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.731	2.627	-0.1
/ avg req/sec	915.56	951.53	+35.97
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.566	1.343	-0.22
/error-in-render avg req/sec	1596.18	1860.9	+264.72

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/startup	Change
index.html gzip	611 B	611 B	✓
link.html gzip	616 B	616 B	✓
withRouter.html gzip	605 B	605 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	19.1s	18.5s	-566ms
buildDurationCached	6.6s	6.2s	-443ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +10.8 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js perf/startup	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.7 kB	10.7 kB	✓
amp.html	1.96 kB	1.96 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	✓
routerDirect.js	1.44 MB	1.44 MB	✓
withRouter.js	1.44 MB	1.44 MB	✓
Overall change	7.14 MB	7.14 MB	✓

Webpack 4 Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	13s	13s	-1ms
buildDurationCached	5.3s	4.9s	-406ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +10.8 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js perf/startup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.708	2.729	⚠️ +0.02
/ avg req/sec	923.1	916.01	⚠️ -7.09
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.543	1.532	-0.01
/error-in-render avg req/sec	1620.17	1631.67	+11.5

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.12 kB	7.12 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
hooks-HASH.js gzip	888 B	888 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
Overall change	8.89 kB	8.89 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	371 B	371 B	✓
Overall change	371 B	371 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/startup	Change
index.html gzip	612 B	612 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: c68edeb

ijjk · 2021-04-16T14:02:27Z

Failing test suites

Commit: c68edeb

test/integration/serverless-trace-revalidate/test/index.test.js

Serverless Trace > should set correct Cache-Control header

Expand output

● Serverless Trace › should set correct Cache-Control header

ReferenceError: fetch is not defined

  51 |   it('should set correct Cache-Control header', async () => {
  52 |     const url = `http://localhost:${appPort}/revalidate`
> 53 |     const res = await fetch(url)
     |                 ^
  54 |     expect(res.headers.get('Cache-Control')).toMatch(
  55 |       's-maxage=10, stale-while-revalidate'
  56 |     )

  at Object.<anonymous> (integration/serverless-trace-revalidate/test/index.test.js:53:17)

ijjk · 2021-04-16T14:02:27Z

Failing test suites

Commit: c68edeb

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

Bad CSS Customization > should compile successfully
Bad CSS Customization > should've compiled and prefixed
Bad CSS Customization > should've emitted a source map
Bad CSS Customization Array (1) > should fail the build
Bad CSS Customization Array (2) > should fail the build
Bad CSS Customization Array (3) > should fail the build
Bad CSS Customization Array (4) > should fail the build
Bad CSS Customization Array (5) > should fail the build
Bad CSS Customization Array (6) > should fail the build
Bad CSS Customization Array (7) > should fail the build
Bad CSS Customization Array (8) > should fail the build
Bad CSS Customization Function > should fail the build
CSS Customization > should compile successfully
CSS Customization > should've compiled and prefixed
CSS Customization > should've emitted a source map
CSS Customization Array > should compile successfully
CSS Customization Array > should've compiled and prefixed
CSS Customization Array > should've emitted a source map
Custom CSS Customization via Webpack > should've compiled and prefixed

Expand output

● CSS Customization › should compile successfully

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

Expected: 0
Received: 1

  21 |       stdout: true,
  22 |     })
> 23 |     expect(code).toBe(0)
     |                  ^
  24 |     expect(stdout).toMatch(/Compiled successfully/)
  25 |   })
  26 |

  at Object.<anonymous> (integration/css-customization/test/index.test.js:23:18)

● CSS Customization › should've compiled and prefixed

ENOENT: no such file or directory, scandir '/home/runner/work/next.js/next.js/test/integration/css-fixtures/custom-configuration/.next/static/css'

● CSS Customization › should've emitted a source map

ENOENT: no such file or directory, scandir '/home/runner/work/next.js/next.js/test/integration/css-fixtures/custom-configuration/.next/static/css'

● Custom CSS Customization via Webpack › should've compiled and prefixed

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Custom CSS Customization via Webpack should've compiled and prefixed 1`

Snapshot: "@media (480px <= width < 768px){::placeholder{color:green}}.video{max-width:400px;max-height:300px}"
Received: "@media (min-width:480px) and (max-width:767px){::-moz-placeholder{color:green}:-ms-input-placeholder{color:green}::placeholder{color:green}}.video{-xyz-max-size:400px 300px}"

  136 |     expect(cssFiles.length).toBe(1)
  137 |     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
> 138 |     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
      |                                                           ^
  139 |       `"@media (480px <= width < 768px){::placeholder{color:green}}.video{max-width:400px;max-height:300px}"`
  140 |     )
  141 |   })

  at Object.<anonymous> (integration/css-customization/test/index.test.js:138:59)

● CSS Customization Array › should compile successfully

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

Expected: 0
Received: 1

  153 |       stdout: true,
  154 |     })
> 155 |     expect(code).toBe(0)
      |                  ^
  156 |     expect(stdout).toMatch(/Compiled successfully/)
  157 |   })
  158 |

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

● CSS Customization Array › should've compiled and prefixed

ENOENT: no such file or directory, scandir '/home/runner/work/next.js/next.js/test/integration/css-fixtures/custom-configuration-arr/.next/static/css'

● CSS Customization Array › should've emitted a source map

ENOENT: no such file or directory, scandir '/home/runner/work/next.js/next.js/test/integration/css-fixtures/custom-configuration-arr/.next/static/css'

● Bad CSS Customization › should compile successfully

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
info  - Checking validity of types...
info  - Creating an optimized production build...
info  - Using external babel configuration from /home/runner/work/next.js/next.js/test/.babelrc
"

  223 |       stderr: true,
  224 |     })
> 225 |     expect(stdout).toMatch(/Compiled successfully/)
      |                    ^
  226 |     expect(stderr).toMatch(/field which is not supported.*?sourceMap/)
  227 |     ;[
  228 |       'postcss-modules-values',

  at Object.<anonymous> (integration/css-customization/test/index.test.js:225:20)

● Bad CSS Customization › should've compiled and prefixed

ENOENT: no such file or directory, scandir '/home/runner/work/next.js/next.js/test/integration/css-fixtures/bad-custom-configuration/.next/static/css'

● Bad CSS Customization › should've emitted a source map

ENOENT: no such file or directory, scandir '/home/runner/work/next.js/next.js/test/integration/css-fixtures/bad-custom-configuration/.next/static/css'

● Bad CSS Customization Array (1) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: A PostCSS Plugin was passed as an array but did not provide its configuration ('postcss-trolling').
Read more: https://nextjs.org/docs/messages/postcss-shape
(node:7330) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
  6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
> 7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=parsed.map(p=>loadPlugin(dir,p[0],p[1]));const filtered=resolved.filter(Boolean);return filtered;}
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       ^
  8 | //# sourceMappingURL=plugins.js.map

  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1207
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at rule.options.postcssOptions (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:580)
  at getPostcssOptions (../packages/next/dist/compiled/postcss-loader/cjs.js:1:126379)
  at Object.loader (../packages/next/dist/compiled/postcss-loader/cjs.js:1:123314)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:7330) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:279:20)

● Bad CSS Customization Array (2) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: Your PostCSS configuration for 'postcss-trolling' cannot have null configuration.
To disable 'postcss-trolling', pass false, otherwise, pass true or a configuration object.
(node:7542) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

> 1 | "use strict";exports.__esModule=true;exports.getPostCssPlugins=getPostCssPlugins;var _chalk=_interopRequireDefault(require("chalk"));var _findConfig=require("../../../../../lib/find-config");var _browserslist=_interopRequireDefault(require("browserslist"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}const genericErrorText='Malformed PostCSS Configuration';function getError_NullConfig(pluginName){return`${_chalk.default.red.bold('Error')}: Your PostCSS configuration for '${pluginName}' cannot have ${_chalk.default.bold('null')} configuration.\nTo disable '${pluginName}', pass ${_chalk.default.bold('false')}, otherwise, pass ${_chalk.default.bold('true')} or a configuration object.`;}function isIgnoredPlugin(pluginPath){const ignoredRegex=/(?:^|[\\/])(postcss-modules-values|postcss-modules-scope|postcss-modules-extract-imports|postcss-modules-local-by-default|postcss-modules)(?:[\\/]|$)/i;const match=ignoredRegex.exec(pluginPath);if(match==null){return false;}const plugin=match.pop();console.warn(`${_chalk.default.yellow.bold('Warning')}: Please remove the ${_chalk.default.underline(plugin)} plugin from your PostCSS configuration. `+`This plugin is automatically configured by Next.js.\n`+'Read more: https://nextjs.org/docs/messages/postcss-ignored-plugin');return true;}function loadPlugin(dir,pluginName,options){if(options===false||isIgnoredPlugin(pluginName)){return false;}if(options==null){console.error(getError_NullConfig(pluginName));throw new Error(genericErrorText);}const pluginPath=require.resolve(pluginName,{paths:[dir]});if(isIgnoredPlugin(pluginPath)){return false;}else if(options===true){return require(pluginPath);}else{const keys=Object.keys(options);if(keys.length===0){return require(pluginPath);}return require(pluginPath)(options);}}function getDefaultPlugins(baseDirectory,isProduction){var _browsers;let browsers;try{browsers=_browserslist.default.loadConfig({path:baseDirectory,env:isProduction?'production':'development'});}catch(_unused){}return[require.resolve('next/dist/compiled/postcss-flexbugs-fixes'),[require.resolve('next/dist/compiled/postcss-preset-env'),{browsers:(_browsers=browsers)!=null?_browsers:['defaults'],autoprefixer:{// Disable legacy flexbox support
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ^
  2 | flexbox:'no-2009'},// Enable CSS features that have shipped to the
  3 | // web platform, i.e. in 2+ browsers unflagged.
  4 | stage:3,features:{'custom-properties':false}}]];}function getPostCssPlugins(dir,isProduction,defaults=false){let config=defaults?null:(0,_findConfig.findConfigSync)(dir,'postcss');if(config==null){config={plugins:getDefaultPlugins(dir,isProduction)};}if(typeof config==='function'){throw new Error(`Your custom PostCSS configuration may not export a function. Please export a plain object instead.\n`+'Read more: https://nextjs.org/docs/messages/postcss-function');}// Warn user about configuration keys which are not respected

  at loadPlugin (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:1:1506)
  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1783
      at Array.map (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1776)
  at rule.options.postcssOptions (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:580)
  at getPostcssOptions (../packages/next/dist/compiled/postcss-loader/cjs.js:1:126379)
  at Object.loader (../packages/next/dist/compiled/postcss-loader/cjs.js:1:123314)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:7542) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:299:20)

● Bad CSS Customization Array (3) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: A PostCSS Plugin must be provided as a string. Instead, we got: '5'.
Read more: https://nextjs.org/docs/messages/postcss-shape
(node:7602) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
  6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
> 7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=parsed.map(p=>loadPlugin(dir,p[0],p[1]));const filtered=resolved.filter(Boolean);return filtered;}
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       ^
  8 | //# sourceMappingURL=plugins.js.map

  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1207
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at rule.options.postcssOptions (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:580)
  at getPostcssOptions (../packages/next/dist/compiled/postcss-loader/cjs.js:1:126379)
  at Object.loader (../packages/next/dist/compiled/postcss-loader/cjs.js:1:123314)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:7602) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:316:20)

● Bad CSS Customization Array (4) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: An unknown PostCSS plugin was provided (5).
Read more: https://nextjs.org/docs/messages/postcss-shape
(node:7721) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
  6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
> 7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=parsed.map(p=>loadPlugin(dir,p[0],p[1]));const filtered=resolved.filter(Boolean);return filtered;}
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ^
  8 | //# sourceMappingURL=plugins.js.map

  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1722
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at rule.options.postcssOptions (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:580)
  at getPostcssOptions (../packages/next/dist/compiled/postcss-loader/cjs.js:1:126379)
  at Object.loader (../packages/next/dist/compiled/postcss-loader/cjs.js:1:123314)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:7721) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:331:20)

● Bad CSS Customization Array (5) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "(node:7776) UnhandledPromiseRejectionWarning: Error: Your custom PostCSS configuration must export a `plugins` key.

  4 | stage:3,features:{'custom-properties':false}}]];}function getPostCssPlugins(dir,isProduction,defaults=false){let config=defaults?null:(0,_findConfig.findConfigSync)(dir,'postcss');if(config==null){config={plugins:getDefaultPlugins(dir,isProduction)};}if(typeof config==='function'){throw new Error(`Your custom PostCSS configuration may not export a function. Please export a plain object instead.\n`+'Read more: https://nextjs.org/docs/messages/postcss-function');}// Warn user about configuration keys which are not respected
  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
> 6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
    |                                                                               ^
  7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=parsed.map(p=>loadPlugin(dir,p[0],p[1]));const filtered=resolved.filter(Boolean);return filtered;}
  8 | //# sourceMappingURL=plugins.js.map

  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:6:79)
  at rule.options.postcssOptions (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:580)
  at getPostcssOptions (../packages/next/dist/compiled/postcss-loader/cjs.js:1:126379)
  at Object.loader (../packages/next/dist/compiled/postcss-loader/cjs.js:1:123314)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:7776) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:348:20)

● Bad CSS Customization Array (6) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "(node:7990) UnhandledPromiseRejectionWarning: Error: Your custom PostCSS configuration must export a `plugins` key.

  4 | stage:3,features:{'custom-properties':false}}]];}function getPostCssPlugins(dir,isProduction,defaults=false){let config=defaults?null:(0,_findConfig.findConfigSync)(dir,'postcss');if(config==null){config={plugins:getDefaultPlugins(dir,isProduction)};}if(typeof config==='function'){throw new Error(`Your custom PostCSS configuration may not export a function. Please export a plain object instead.\n`+'Read more: https://nextjs.org/docs/messages/postcss-function');}// Warn user about configuration keys which are not respected
  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
> 6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
    |                                                                               ^
  7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=parsed.map(p=>loadPlugin(dir,p[0],p[1]));const filtered=resolved.filter(Boolean);return filtered;}
  8 | //# sourceMappingURL=plugins.js.map

  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:6:79)
  at rule.options.postcssOptions (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:580)
  at getPostcssOptions (../packages/next/dist/compiled/postcss-loader/cjs.js:1:126379)
  at Object.loader (../packages/next/dist/compiled/postcss-loader/cjs.js:1:123314)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:7990) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:365:20)

● Bad CSS Customization Array (7) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: A PostCSS Plugin was passed as an array but did not provide its configuration ('postcss-trolling').
Read more: https://nextjs.org/docs/messages/postcss-shape
(node:8143) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
  6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
> 7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=parsed.map(p=>loadPlugin(dir,p[0],p[1]));const filtered=resolved.filter(Boolean);return filtered;}
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       ^
  8 | //# sourceMappingURL=plugins.js.map

  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1207
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at rule.options.postcssOptions (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:580)
  at getPostcssOptions (../packages/next/dist/compiled/postcss-loader/cjs.js:1:126379)
  at Object.loader (../packages/next/dist/compiled/postcss-loader/cjs.js:1:123314)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:8143) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:382:20)

● Bad CSS Customization Array (8) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /A PostCSS Plugin was passed as a function using require\(\), but it must be provided as a string/
Received string:  "Failed to compile.·
./styles/global.css
TypeError [ERR_INVALID_ARG_TYPE]: The \"path\" argument must be of type string. Received undefined··
> Build error occurred
Error: > Build failed because of webpack errors

  15 | if(clientResult.errors.length>0){result={warnings:[...clientResult.warnings],errors:[...clientResult.errors]};}else{const serverResult=await(0,_compiler.runCompiler)(configs[1]);result={warnings:[...clientResult.warnings,...serverResult.warnings],errors:[...clientResult.errors,...serverResult.errors]};}});}else{result=await nextBuildSpan.traceChild('run-webpack-compiler').traceAsyncFn(()=>(0,_compiler.runCompiler)(configs));}const webpackBuildEnd=process.hrtime(webpackBuildStart);if(buildSpinner){buildSpinner.stopAndPersist();}result=nextBuildSpan.traceChild('format-webpack-messages').traceFn(()=>(0,_formatWebpackMessages.default)(result));if(result.errors.length>0){// Only keep the first error. Others are often indicative
  16 | // of the same problem, but confuse the reader with noise.
> 17 | if(result.errors.length>1){result.errors.length=1;}const error=result.errors.join('\n\n');console.error(_chalk.default.red('Failed to compile.\n'));if(error.indexOf('private-next-pages')>-1&&error.indexOf('does not contain a default export')>-1){const page_name_regex=/*#__PURE__*/_wrapRegExp(/'private\x2Dnext\x2Dpages\/((?:(?!')[\s\S])*)'/,{page_name:1});const parsed=page_name_regex.exec(error);const page_name=parsed&&parsed.groups&&parsed.groups.page_name;throw new Error(`webpack build failed: found page without a React Component as default export in pages/${page_name}\n\nSee https://nextjs.org/docs/messages/page-without-valid-component for more info.`);}console.error(error);console.error();if(error.indexOf('private-next-pages')>-1||error.indexOf('__next_polyfill__')>-1){throw new Error('> webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias');}throw new Error('> Build failed because of webpack errors');}else{telemetry.record((0,_events.eventBuildCompleted)(pagePaths,{durationInSeconds:webpackBuildEnd[0]}));if(result.warnings.length>0){Log.warn('Compiled with warnings\n');console.warn(result.warnings.join('\n\n'));console.warn();}else{Log.info('Compiled successfully');}}const postCompileSpinner=(0,_spinner.default)({prefixText:`${Log.prefixes.info} Collecting page data`});const buildManifestPath=_path.default.join(distDir,_constants2.BUILD_MANIFEST);const ssgPages=new Set();const ssgStaticFallbackPages=new Set();const ssgBlockingFallbackPages=new Set();const staticPages=new Set();const invalidPages=new Set();const hybridAmpPages=new Set();const serverPropsPages=new Set();const additionalSsgPaths=new Map();const additionalSsgPathsEncoded=new Map();const pageInfos=new Map();const pagesManifest=JSON.parse(await _fs.promises.readFile(manifestPath,'utf8'));const buildManifest=JSON.parse(await _fs.promises.readFile(buildManifestPath,'utf8'));let customAppGetInitialProps;let namedExports;let isNextImageImported;const analysisBegin=process.hrtime();let hasSsrAmpPages=false;const staticCheckSpan=nextBuildSpan.traceChild('static-check');const{hasNonStaticErrorPage}=await staticCheckSpan.traceAsyncFn(async()=>{process.env.NEXT_PHASE=_constants2.PHASE_PRODUCTION_BUILD;const staticCheckWorkers=new _jestWorker.Worker(staticCheckWorker,{numWorkers:config.experimental.cpus,enableWorkerThreads:config.experimental.workerThreads});staticCheckWorkers.getStdout().pipe(process.stdout);staticCheckWorkers.getStderr().pipe(process.stderr);const runtimeEnvConfig={publicRuntimeConfig:config.publicRuntimeConfig,serverRuntimeConfig:config.serverRuntimeConfig};const nonStaticErrorPageSpan=staticCheckSpan.traceChild('check-static-error-page');const nonStaticErrorPage=await nonStaticErrorPageSpan.traceAsyncFn(async()=>hasCustomErrorPage&&(await(0,_utils2.hasCustomGetInitialProps)('/_error',distDir,isLikeServerless,runtimeEnvConfig,false)));// we don't output _app in serverless mode so use _app export
     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ^
  18 | // from _error instead
  19 | const appPageToCheck=isLikeServerless?'/_error':'/_app';customAppGetInitialProps=await(0,_utils2.hasCustomGetInitialProps)(appPageToCheck,distDir,isLikeServerless,runtimeEnvConfig,true);namedExports=await(0,_utils2.getNamedExports)(appPageToCheck,distDir,isLikeServerless,runtimeEnvConfig);if(customAppGetInitialProps){console.warn(_chalk.default.bold.yellow(`Warning: `)+_chalk.default.yellow(`You have opted-out of Automatic Static Optimization due to \`getInitialProps\` in \`pages/_app\`. This does not opt-out pages with \`getStaticProps\``));console.warn('Read more: https://nextjs.org/docs/messages/opt-out-auto-static-optimization\n');}await Promise.all(pageKeys.map(async page=>{const checkPageSpan=staticCheckSpan.traceChild('check-page',{page});return checkPageSpan.traceAsyncFn(async()=>{const actualPage=(0,_normalizePagePath.normalizePagePath)(page);const[selfSize,allSize]=await(0,_utils2.getJsPageSizeInKb)(actualPage,distDir,buildManifest);let isSsg=false;let isStatic=false;let isHybridAmp=false;let ssgPageRoutes=null;const nonReservedPage=!page.match(/^\/(_app|_error|_document|api(\/|$))/);if(nonReservedPage){try{let isPageStaticSpan=checkPageSpan.traceChild('is-page-static');let workerResult=await isPageStaticSpan.traceAsyncFn(()=>{var _config$i18n,_config$i18n2;return staticCheckWorkers.isPageStatic(page,distDir,isLikeServerless,runtimeEnvConfig,(_config$i18n=config.i18n)==null?void 0:_config$i18n.locales,(_config$i18n2=config.i18n)==null?void 0:_config$i18n2.defaultLocale,isPageStaticSpan.id);});if(workerResult.isStatic===false&&(workerResult.isHybridAmp||workerResult.isAmpOnly)){hasSsrAmpPages=true;}if(workerResult.isHybridAmp){isHybridAmp=true;hybridAmpPages.add(page);}if(workerResult.isNextImageImported){isNextImageImported=true;}if(workerResult.hasStaticProps){ssgPages.add(page);isSsg=true;if(workerResult.prerenderRoutes&&workerResult.encodedPrerenderRoutes){additionalSsgPaths.set(page,workerResult.prerenderRoutes);additionalSsgPathsEncoded.set(page,workerResult.encodedPrerenderRoutes);ssgPageRoutes=workerResult.prerenderRoutes;}if(workerResult.prerenderFallback==='blocking'){ssgBlockingFallbackPages.add(page);}else if(workerResult.prerenderFallback===true){ssgStaticFallbackPages.add(page);}}else if(workerResult.hasServerProps){serverPropsPages.add(page);}else if(workerResult.isStatic&&customAppGetInitialProps===false){staticPages.add(page);isStatic=true;}if(hasPages404&&page==='/404'){if(!workerResult.isStatic&&!workerResult.hasStaticProps){throw new Error(`\`pages/404\` ${_constants.STATIC_STATUS_PAGE_GET_INITIAL_PROPS_ERROR}`);}// we need to ensure the 404 lambda is present since we use
  20 | // it when _app has getInitialProps

  at ../packages/next/dist/build/index.js:17:924
  at async Span.traceAsyncFn (../packages/next/dist/telemetry/trace/trace.js:5:584)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:396:20)

● Bad CSS Customization Function › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Your custom PostCSS configuration may not export a function/
Received string:  "Failed to compile.·
./styles/global.css
TypeError [ERR_INVALID_ARG_TYPE]: The \"path\" argument must be of type string. Received undefined··
> Build error occurred
Error: > Build failed because of webpack errors

  15 | if(clientResult.errors.length>0){result={warnings:[...clientResult.warnings],errors:[...clientResult.errors]};}else{const serverResult=await(0,_compiler.runCompiler)(configs[1]);result={warnings:[...clientResult.warnings,...serverResult.warnings],errors:[...clientResult.errors,...serverResult.errors]};}});}else{result=await nextBuildSpan.traceChild('run-webpack-compiler').traceAsyncFn(()=>(0,_compiler.runCompiler)(configs));}const webpackBuildEnd=process.hrtime(webpackBuildStart);if(buildSpinner){buildSpinner.stopAndPersist();}result=nextBuildSpan.traceChild('format-webpack-messages').traceFn(()=>(0,_formatWebpackMessages.default)(result));if(result.errors.length>0){// Only keep the first error. Others are often indicative
  16 | // of the same problem, but confuse the reader with noise.
> 17 | if(result.errors.length>1){result.errors.length=1;}const error=result.errors.join('\n\n');console.error(_chalk.default.red('Failed to compile.\n'));if(error.indexOf('private-next-pages')>-1&&error.indexOf('does not contain a default export')>-1){const page_name_regex=/*#__PURE__*/_wrapRegExp(/'private\x2Dnext\x2Dpages\/((?:(?!')[\s\S])*)'/,{page_name:1});const parsed=page_name_regex.exec(error);const page_name=parsed&&parsed.groups&&parsed.groups.page_name;throw new Error(`webpack build failed: found page without a React Component as default export in pages/${page_name}\n\nSee https://nextjs.org/docs/messages/page-without-valid-component for more info.`);}console.error(error);console.error();if(error.indexOf('private-next-pages')>-1||error.indexOf('__next_polyfill__')>-1){throw new Error('> webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias');}throw new Error('> Build failed because of webpack errors');}else{telemetry.record((0,_events.eventBuildCompleted)(pagePaths,{durationInSeconds:webpackBuildEnd[0]}));if(result.warnings.length>0){Log.warn('Compiled with warnings\n');console.warn(result.warnings.join('\n\n'));console.warn();}else{Log.info('Compiled successfully');}}const postCompileSpinner=(0,_spinner.default)({prefixText:`${Log.prefixes.info} Collecting page data`});const buildManifestPath=_path.default.join(distDir,_constants2.BUILD_MANIFEST);const ssgPages=new Set();const ssgStaticFallbackPages=new Set();const ssgBlockingFallbackPages=new Set();const staticPages=new Set();const invalidPages=new Set();const hybridAmpPages=new Set();const serverPropsPages=new Set();const additionalSsgPaths=new Map();const additionalSsgPathsEncoded=new Map();const pageInfos=new Map();const pagesManifest=JSON.parse(await _fs.promises.readFile(manifestPath,'utf8'));const buildManifest=JSON.parse(await _fs.promises.readFile(buildManifestPath,'utf8'));let customAppGetInitialProps;let namedExports;let isNextImageImported;const analysisBegin=process.hrtime();let hasSsrAmpPages=false;const staticCheckSpan=nextBuildSpan.traceChild('static-check');const{hasNonStaticErrorPage}=await staticCheckSpan.traceAsyncFn(async()=>{process.env.NEXT_PHASE=_constants2.PHASE_PRODUCTION_BUILD;const staticCheckWorkers=new _jestWorker.Worker(staticCheckWorker,{numWorkers:config.experimental.cpus,enableWorkerThreads:config.experimental.workerThreads});staticCheckWorkers.getStdout().pipe(process.stdout);staticCheckWorkers.getStderr().pipe(process.stderr);const runtimeEnvConfig={publicRuntimeConfig:config.publicRuntimeConfig,serverRuntimeConfig:config.serverRuntimeConfig};const nonStaticErrorPageSpan=staticCheckSpan.traceChild('check-static-error-page');const nonStaticErrorPage=await nonStaticErrorPageSpan.traceAsyncFn(async()=>hasCustomErrorPage&&(await(0,_utils2.hasCustomGetInitialProps)('/_error',distDir,isLikeServerless,runtimeEnvConfig,false)));// we don't output _app in serverless mode so use _app export
     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ^
  18 | // from _error instead
  19 | const appPageToCheck=isLikeServerless?'/_error':'/_app';customAppGetInitialProps=await(0,_utils2.hasCustomGetInitialProps)(appPageToCheck,distDir,isLikeServerless,runtimeEnvConfig,true);namedExports=await(0,_utils2.getNamedExports)(appPageToCheck,distDir,isLikeServerless,runtimeEnvConfig);if(customAppGetInitialProps){console.warn(_chalk.default.bold.yellow(`Warning: `)+_chalk.default.yellow(`You have opted-out of Automatic Static Optimization due to \`getInitialProps\` in \`pages/_app\`. This does not opt-out pages with \`getStaticProps\``));console.warn('Read more: https://nextjs.org/docs/messages/opt-out-auto-static-optimization\n');}await Promise.all(pageKeys.map(async page=>{const checkPageSpan=staticCheckSpan.traceChild('check-page',{page});return checkPageSpan.traceAsyncFn(async()=>{const actualPage=(0,_normalizePagePath.normalizePagePath)(page);const[selfSize,allSize]=await(0,_utils2.getJsPageSizeInKb)(actualPage,distDir,buildManifest);let isSsg=false;let isStatic=false;let isHybridAmp=false;let ssgPageRoutes=null;const nonReservedPage=!page.match(/^\/(_app|_error|_document|api(\/|$))/);if(nonReservedPage){try{let isPageStaticSpan=checkPageSpan.traceChild('is-page-static');let workerResult=await isPageStaticSpan.traceAsyncFn(()=>{var _config$i18n,_config$i18n2;return staticCheckWorkers.isPageStatic(page,distDir,isLikeServerless,runtimeEnvConfig,(_config$i18n=config.i18n)==null?void 0:_config$i18n.locales,(_config$i18n2=config.i18n)==null?void 0:_config$i18n2.defaultLocale,isPageStaticSpan.id);});if(workerResult.isStatic===false&&(workerResult.isHybridAmp||workerResult.isAmpOnly)){hasSsrAmpPages=true;}if(workerResult.isHybridAmp){isHybridAmp=true;hybridAmpPages.add(page);}if(workerResult.isNextImageImported){isNextImageImported=true;}if(workerResult.hasStaticProps){ssgPages.add(page);isSsg=true;if(workerResult.prerenderRoutes&&workerResult.encodedPrerenderRoutes){additionalSsgPaths.set(page,workerResult.prerenderRoutes);additionalSsgPathsEncoded.set(page,workerResult.encodedPrerenderRoutes);ssgPageRoutes=workerResult.prerenderRoutes;}if(workerResult.prerenderFallback==='blocking'){ssgBlockingFallbackPages.add(page);}else if(workerResult.prerenderFallback===true){ssgStaticFallbackPages.add(page);}}else if(workerResult.hasServerProps){serverPropsPages.add(page);}else if(workerResult.isStatic&&customAppGetInitialProps===false){staticPages.add(page);isStatic=true;}if(hasPages404&&page==='/404'){if(!workerResult.isStatic&&!workerResult.hasStaticProps){throw new Error(`\`pages/404\` ${_constants.STATIC_STATUS_PAGE_GET_INITIAL_PROPS_ERROR}`);}// we need to ensure the 404 lambda is present since we use
  20 | // it when _app has getInitialProps

  at ../packages/next/dist/build/index.js:17:924
  at async Span.traceAsyncFn (../packages/next/dist/telemetry/trace/trace.js:5:584)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:413:20)

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

SCSS Support > Tailwind and Purge CSS > should compile successfully
SCSS Support > Tailwind and Purge CSS > should've compiled and prefixed
SCSS Support > Tailwind and Purge CSS > should've emitted a source map

Expand output

● SCSS Support › Tailwind and Purge CSS › should compile successfully

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

Expected: 0
Received: 1

  951 |         stdout: true,
  952 |       })
> 953 |       expect(code).toBe(0)
      |                    ^
  954 |       expect(stdout).toMatch(/Compiled successfully/)
  955 |     })
  956 |

  at Object.<anonymous> (integration/scss/test/index.test.js:953:20)

● SCSS Support › Tailwind and Purge CSS › should've compiled and prefixed

ENOENT: no such file or directory, scandir '/home/runner/work/next.js/next.js/test/integration/scss-fixtures/with-tailwindcss-and-purgecss/.next/static/css'

● SCSS Support › Tailwind and Purge CSS › should've emitted a source map

ENOENT: no such file or directory, scandir '/home/runner/work/next.js/next.js/test/integration/scss-fixtures/with-tailwindcss-and-purgecss/.next/static/css'

Timer · 2021-04-16T14:29:55Z

packages/next/build/webpack/config/blocks/css/overrideCssConfiguration.ts


  function patch(rule: webpack.RuleSetRule) {
    if (
      rule.options &&
      typeof rule.options === 'object' &&
-      typeof rule.options.postcssOptions === 'object'
+      (typeof rule.options.postcssOptions === 'object' ||
+        typeof rule.options.postcssOptions === 'function')


Was it intentional to add new behavior here? I don't see where this was added for in regards to performance.

postcss-loader allows to pass a Function as postcssOptions. I allows to patch that too.

In some other places I use this to load postcss options only when they are actually used.

But something is broken with that as some postcss related tests break, e. g. Bad CSS Customization

Yea, I believe we specifically have tests that ensure a function isn't allowed here. I'd revert this change for now.

packages/next/next-server/server/config-utils.ts

sokra · 2021-04-16T14:54:15Z

I'll put the postcss changes into a separate PR. They need more work...

ijjk · 2021-04-16T15:08:14Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	14.2s	13.8s	-414ms
buildDurationCached	4.5s	4.2s	-280ms
nodeModulesSize	46.2 MB	46.2 MB	⚠️ +5.02 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.539	2.525	-0.01
/ avg req/sec	984.51	989.9	+5.39
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.296	1.347	⚠️ +0.05
/error-in-render avg req/sec	1928.95	1856.43	⚠️ -72.52

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/startup	Change
index.html gzip	611 B	611 B	✓
link.html gzip	616 B	616 B	✓
withRouter.html gzip	605 B	605 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	17.8s	17.7s	-57ms
buildDurationCached	6.5s	6.4s	-112ms
nodeModulesSize	46.2 MB	46.2 MB	⚠️ +5.02 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js perf/startup	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.7 kB	10.7 kB	✓
amp.html	1.96 kB	1.96 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	✓
routerDirect.js	1.44 MB	1.44 MB	✓
withRouter.js	1.44 MB	1.44 MB	✓
Overall change	7.14 MB	7.14 MB	✓

Webpack 4 Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	12s	12s	⚠️ +57ms
buildDurationCached	4.8s	4.8s	-62ms
nodeModulesSize	46.2 MB	46.2 MB	⚠️ +5.02 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js perf/startup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.445	2.454	⚠️ +0.01
/ avg req/sec	1022.55	1018.69	⚠️ -3.86
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.292	1.288	0
/error-in-render avg req/sec	1935.41	1940.32	+4.91

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.12 kB	7.12 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
hooks-HASH.js gzip	888 B	888 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
Overall change	8.89 kB	8.89 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	371 B	371 B	✓
Overall change	371 B	371 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/startup	Change
index.html gzip	612 B	612 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: 5002f3a

ijjk · 2021-04-16T15:18:11Z

Failing test suites

Commit: 5002f3a

test/integration/serverless-trace-revalidate/test/index.test.js

Serverless Trace > should set correct Cache-Control header

Expand output

● Serverless Trace › should set correct Cache-Control header

ReferenceError: fetch is not defined

  51 |   it('should set correct Cache-Control header', async () => {
  52 |     const url = `http://localhost:${appPort}/revalidate`
> 53 |     const res = await fetch(url)
     |                 ^
  54 |     expect(res.headers.get('Cache-Control')).toMatch(
  55 |       's-maxage=10, stale-while-revalidate'
  56 |     )

  at Object.<anonymous> (integration/serverless-trace-revalidate/test/index.test.js:53:17)

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

Bad CSS Customization Array (1) > should fail the build
Bad CSS Customization Array (2) > should fail the build
Bad CSS Customization Array (3) > should fail the build
Bad CSS Customization Array (4) > should fail the build
Bad CSS Customization Array (5) > should fail the build
Bad CSS Customization Array (6) > should fail the build
Bad CSS Customization Array (7) > should fail the build
Bad CSS Customization Array (8) > should fail the build
Bad CSS Customization Function > should fail the build

Expand output

● Bad CSS Customization Array (1) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: A PostCSS Plugin was passed as an array but did not provide its configuration ('postcss-trolling').
Read more: https://nextjs.org/docs/messages/postcss-shape
(node:8497) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
  6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
> 7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=await Promise.all(parsed.map(p=>loadPlugin(dir,p[0],p[1])));const filtered=resolved.filter(Boolean);return filtered;}
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       ^
  8 | //# sourceMappingURL=plugins.js.map

  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1207
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:8497) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  Error: A PostCSS Plugin was passed as an array but did not provide its configuration ('postcss-trolling').
  Read more: https://nextjs.org/docs/messages/postcss-shape
  (node:8497) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration
  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1207
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (node:8497) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:279:20)

● Bad CSS Customization Array (2) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: Your PostCSS configuration for 'postcss-trolling' cannot have null configuration.
To disable 'postcss-trolling', pass false, otherwise, pass true or a configuration object.
(node:8746) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

> 1 | "use strict";exports.__esModule=true;exports.getPostCssPlugins=getPostCssPlugins;var _chalk=_interopRequireDefault(require("chalk"));var _findConfig=require("../../../../../lib/find-config");var _browserslist=_interopRequireDefault(require("browserslist"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}const genericErrorText='Malformed PostCSS Configuration';function getError_NullConfig(pluginName){return`${_chalk.default.red.bold('Error')}: Your PostCSS configuration for '${pluginName}' cannot have ${_chalk.default.bold('null')} configuration.\nTo disable '${pluginName}', pass ${_chalk.default.bold('false')}, otherwise, pass ${_chalk.default.bold('true')} or a configuration object.`;}function isIgnoredPlugin(pluginPath){const ignoredRegex=/(?:^|[\\/])(postcss-modules-values|postcss-modules-scope|postcss-modules-extract-imports|postcss-modules-local-by-default|postcss-modules)(?:[\\/]|$)/i;const match=ignoredRegex.exec(pluginPath);if(match==null){return false;}const plugin=match.pop();console.warn(`${_chalk.default.yellow.bold('Warning')}: Please remove the ${_chalk.default.underline(plugin)} plugin from your PostCSS configuration. `+`This plugin is automatically configured by Next.js.\n`+'Read more: https://nextjs.org/docs/messages/postcss-ignored-plugin');return true;}async function loadPlugin(dir,pluginName,options){if(options===false||isIgnoredPlugin(pluginName)){return false;}if(options==null){console.error(getError_NullConfig(pluginName));throw new Error(genericErrorText);}const pluginPath=require.resolve(pluginName,{paths:[dir]});if(isIgnoredPlugin(pluginPath)){return false;}else if(options===true){return require(pluginPath);}else{const keys=Object.keys(options);if(keys.length===0){return require(pluginPath);}return require(pluginPath)(options);}}function getDefaultPlugins(baseDirectory,isProduction){var _browsers;let browsers;try{browsers=_browserslist.default.loadConfig({path:baseDirectory,env:isProduction?'production':'development'});}catch(_unused){}return[require.resolve('next/dist/compiled/postcss-flexbugs-fixes'),[require.resolve('next/dist/compiled/postcss-preset-env'),{browsers:(_browsers=browsers)!=null?_browsers:['defaults'],autoprefixer:{// Disable legacy flexbox support
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ^
  2 | flexbox:'no-2009'},// Enable CSS features that have shipped to the
  3 | // web platform, i.e. in 2+ browsers unflagged.
  4 | stage:3,features:{'custom-properties':false}}]];}async function getPostCssPlugins(dir,isProduction,defaults=false){let config=defaults?null:await(0,_findConfig.findConfig)(dir,'postcss');if(config==null){config={plugins:getDefaultPlugins(dir,isProduction)};}if(typeof config==='function'){throw new Error(`Your custom PostCSS configuration may not export a function. Please export a plain object instead.\n`+'Read more: https://nextjs.org/docs/messages/postcss-function');}// Warn user about configuration keys which are not respected

  at loadPlugin (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:1:1512)
  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1801
      at Array.map (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1794)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:8746) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
  Error: Your PostCSS configuration for 'postcss-trolling' cannot have null configuration.
  To disable 'postcss-trolling', pass false, otherwise, pass true or a configuration object.
  (node:8746) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration
  at loadPlugin (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:1:1512)
  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1801
      at Array.map (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1794)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (node:8746) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 8)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:299:20)

● Bad CSS Customization Array (3) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: A PostCSS Plugin must be provided as a string. Instead, we got: '5'.
Read more: https://nextjs.org/docs/messages/postcss-shape
(node:8832) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
  6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
> 7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=await Promise.all(parsed.map(p=>loadPlugin(dir,p[0],p[1])));const filtered=resolved.filter(Boolean);return filtered;}
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       ^
  8 | //# sourceMappingURL=plugins.js.map

  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1207
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:8832) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  Error: A PostCSS Plugin must be provided as a string. Instead, we got: '5'.
  Read more: https://nextjs.org/docs/messages/postcss-shape
  (node:8832) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration
  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1207
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (node:8832) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:316:20)

● Bad CSS Customization Array (4) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: An unknown PostCSS plugin was provided (5).
Read more: https://nextjs.org/docs/messages/postcss-shape
(node:8913) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
  6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
> 7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=await Promise.all(parsed.map(p=>loadPlugin(dir,p[0],p[1])));const filtered=resolved.filter(Boolean);return filtered;}
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ^
  8 | //# sourceMappingURL=plugins.js.map

  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1722
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:8913) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  Error: An unknown PostCSS plugin was provided (5).
  Read more: https://nextjs.org/docs/messages/postcss-shape
  (node:8913) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration
  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1722
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (node:8913) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:331:20)

● Bad CSS Customization Array (5) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "(node:9088) UnhandledPromiseRejectionWarning: Error: Your custom PostCSS configuration must export a `plugins` key.

  4 | stage:3,features:{'custom-properties':false}}]];}async function getPostCssPlugins(dir,isProduction,defaults=false){let config=defaults?null:await(0,_findConfig.findConfig)(dir,'postcss');if(config==null){config={plugins:getDefaultPlugins(dir,isProduction)};}if(typeof config==='function'){throw new Error(`Your custom PostCSS configuration may not export a function. Please export a plain object instead.\n`+'Read more: https://nextjs.org/docs/messages/postcss-function');}// Warn user about configuration keys which are not respected
  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
> 6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
    |                                                                               ^
  7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=await Promise.all(parsed.map(p=>loadPlugin(dir,p[0],p[1])));const filtered=resolved.filter(Boolean);return filtered;}
  8 | //# sourceMappingURL=plugins.js.map

  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:6:79)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:9088) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  (node:9088) UnhandledPromiseRejectionWarning: Error: Your custom PostCSS configuration must export a `plugins` key.
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:6:79)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (node:9088) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:348:20)

● Bad CSS Customization Array (6) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "(node:9372) UnhandledPromiseRejectionWarning: Error: Your custom PostCSS configuration must export a `plugins` key.

  4 | stage:3,features:{'custom-properties':false}}]];}async function getPostCssPlugins(dir,isProduction,defaults=false){let config=defaults?null:await(0,_findConfig.findConfig)(dir,'postcss');if(config==null){config={plugins:getDefaultPlugins(dir,isProduction)};}if(typeof config==='function'){throw new Error(`Your custom PostCSS configuration may not export a function. Please export a plain object instead.\n`+'Read more: https://nextjs.org/docs/messages/postcss-function');}// Warn user about configuration keys which are not respected
  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
> 6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
    |                                                                               ^
  7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=await Promise.all(parsed.map(p=>loadPlugin(dir,p[0],p[1])));const filtered=resolved.filter(Boolean);return filtered;}
  8 | //# sourceMappingURL=plugins.js.map

  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:6:79)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:9372) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  (node:9372) UnhandledPromiseRejectionWarning: Error: Your custom PostCSS configuration must export a `plugins` key.
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:6:79)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (node:9372) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:365:20)

● Bad CSS Customization Array (7) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: A PostCSS Plugin was passed as an array but did not provide its configuration ('postcss-trolling').
Read more: https://nextjs.org/docs/messages/postcss-shape
(node:9524) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
  6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
> 7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=await Promise.all(parsed.map(p=>loadPlugin(dir,p[0],p[1])));const filtered=resolved.filter(Boolean);return filtered;}
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       ^
  8 | //# sourceMappingURL=plugins.js.map

  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1207
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:9524) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  Error: A PostCSS Plugin was passed as an array but did not provide its configuration ('postcss-trolling').
  Read more: https://nextjs.org/docs/messages/postcss-shape
  (node:9524) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration
  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1207
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (node:9524) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:382:20)

● Bad CSS Customization Array (8) › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "Error: A PostCSS Plugin was passed as a function using require(), but it must be provided as a string.
Read more: https://nextjs.org/docs/messages/postcss-shape
(node:9911) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration

  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
  6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
> 7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=await Promise.all(parsed.map(p=>loadPlugin(dir,p[0],p[1])));const filtered=resolved.filter(Boolean);return filtered;}
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ^
  8 | //# sourceMappingURL=plugins.js.map

  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1514
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:9911) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  Error: A PostCSS Plugin was passed as a function using require(), but it must be provided as a string.
  Read more: https://nextjs.org/docs/messages/postcss-shape
  (node:9911) UnhandledPromiseRejectionWarning: Error: Malformed PostCSS Configuration
  at ../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:1514
      at Array.forEach (<anonymous>)
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:7:248)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (node:9911) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:399:20)

● Bad CSS Customization Function › should fail the build

expect(received).toMatch(expected)

Expected pattern: /Build error occurred/
Received string:  "(node:10174) UnhandledPromiseRejectionWarning: Error: Your custom PostCSS configuration may not export a function. Please export a plain object instead.
Read more: https://nextjs.org/docs/messages/postcss-function

  2 | flexbox:'no-2009'},// Enable CSS features that have shipped to the
  3 | // web platform, i.e. in 2+ browsers unflagged.
> 4 | stage:3,features:{'custom-properties':false}}]];}async function getPostCssPlugins(dir,isProduction,defaults=false){let config=defaults?null:await(0,_findConfig.findConfig)(dir,'postcss');if(config==null){config={plugins:getDefaultPlugins(dir,isProduction)};}if(typeof config==='function'){throw new Error(`Your custom PostCSS configuration may not export a function. Please export a plain object instead.\n`+'Read more: https://nextjs.org/docs/messages/postcss-function');}// Warn user about configuration keys which are not respected
    |                                                                                                                                                                                                                                                                                                        ^
  5 | const invalidKey=Object.keys(config).find(key=>key!=='plugins');if(invalidKey){console.warn(`${_chalk.default.yellow.bold('Warning')}: Your PostCSS configuration defines a field which is not supported (\`${invalidKey}\`). `+`Please remove this configuration value.`);}// Enforce the user provided plugins if the configuration file is present
  6 | let plugins=config.plugins;if(plugins==null||typeof plugins!=='object'){throw new Error(`Your custom PostCSS configuration must export a \`plugins\` key.`);}if(!Array.isArray(plugins)){// Capture variable so TypeScript is happy
  7 | const pc=plugins;plugins=Object.keys(plugins).reduce((acc,curr)=>{const p=pc[curr];if(typeof p==='undefined'){console.error(getError_NullConfig(curr));throw new Error(genericErrorText);}acc.push([curr,p]);return acc;},[]);}const parsed=[];plugins.forEach(plugin=>{if(plugin==null){console.warn(`${_chalk.default.yellow.bold('Warning')}: A ${_chalk.default.bold('null')} PostCSS plugin was provided. This entry will be ignored.`);}else if(typeof plugin==='string'){parsed.push([plugin,true]);}else if(Array.isArray(plugin)){const pluginName=plugin[0];const pluginConfig=plugin[1];if(typeof pluginName==='string'&&(typeof pluginConfig==='boolean'||typeof pluginConfig==='object')){parsed.push([pluginName,pluginConfig]);}else{if(typeof pluginName!=='string'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin must be provided as a ${_chalk.default.bold('string')}. Instead, we got: '${pluginName}'.\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}else{console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as an array but did not provide its configuration ('${pluginName}').\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');}throw new Error(genericErrorText);}}else if(typeof plugin==='function'){console.error(`${_chalk.default.red.bold('Error')}: A PostCSS Plugin was passed as a function using require(), but it must be provided as a ${_chalk.default.bold('string')}.\nRead more: https://nextjs.org/docs/messages/postcss-shape`);throw new Error(genericErrorText);}else{console.error(`${_chalk.default.red.bold('Error')}: An unknown PostCSS plugin was provided (${plugin}).\n`+'Read more: https://nextjs.org/docs/messages/postcss-shape');throw new Error(genericErrorText);}});const resolved=await Promise.all(parsed.map(p=>loadPlugin(dir,p[0],p[1])));const filtered=resolved.filter(Boolean);return filtered;}

  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:4:296)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (Use `node --trace-warnings ...` to show where the warning was created)
  (node:10174) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 5)
  (node:10174) UnhandledPromiseRejectionWarning: Error: Your custom PostCSS configuration may not export a function. Please export a plain object instead.
  Read more: https://nextjs.org/docs/messages/postcss-function
  at getPostCssPlugins (../packages/next/dist/build/webpack/config/blocks/css/plugins.js:4:296)
  at async __overrideCssConfiguration (../packages/next/dist/build/webpack/config/blocks/css/overrideCssConfiguration.js:1:272)
  (node:10174) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 6)
  "
  at Object.<anonymous> (integration/css-customization/test/index.test.js:416:20)

test/integration/tsconfig-verifier/test/index.test.js

tsconfig.json verifier > allows you to extend another configuration file

Expand output

● tsconfig.json verifier › allows you to extend another configuration file

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `tsconfig.json verifier allows you to extend another configuration file 1`

- Snapshot  -  1
+ Received  + 12

- { "extends": "./tsconfig.base.json" }
+ {
+   "extends": "./tsconfig.base.json",
+   "include": [
+     "next-env.d.ts",
+     "**/*.ts",
+     "**/*.tsx"
+   ],
+   "exclude": [
+     "node_modules"
+   ]
+ }
+

  308 |     expect(code).toBe(0)
  309 |
> 310 |     expect(await readFile(tsConfig, 'utf8')).toMatchInlineSnapshot(
      |                                              ^
  311 |       `"{ \\"extends\\": \\"./tsconfig.base.json\\" }"`
  312 |     )
  313 |   })

  at Object.<anonymous> (integration/tsconfig-verifier/test/index.test.js:310:46)

ijjk · 2021-04-16T15:38:37Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	11.9s	11.8s	-39ms
buildDurationCached	3.7s	3.6s	-85ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.04 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js perf/startup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.084	2.076	-0.01
/ avg req/sec	1199.85	1204.48	+4.63
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.091	1.078	-0.01
/error-in-render avg req/sec	2291.01	2319.08	+28.07

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/startup	Change
index.html gzip	611 B	611 B	✓
link.html gzip	616 B	616 B	✓
withRouter.html gzip	604 B	604 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	14.7s	14.6s	-95ms
buildDurationCached	5.4s	5.4s	-77ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.04 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	vercel/next.js perf/startup	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.7 kB	10.7 kB	✓
amp.html	1.96 kB	1.96 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	-2 B
routerDirect.js	1.44 MB	1.44 MB	✓
withRouter.js	1.44 MB	1.44 MB	-2 B
Overall change	7.14 MB	7.14 MB	-4 B

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	9.8s	9.9s	⚠️ +72ms
buildDurationCached	4.1s	4.1s	-44ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.04 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.08	2.058	-0.02
/ avg req/sec	1201.69	1214.66	+12.97
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.06	1.091	⚠️ +0.03
/error-in-render avg req/sec	2359.51	2291.09	⚠️ -68.42

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.12 kB	7.12 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
hooks-HASH.js gzip	888 B	888 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
Overall change	8.89 kB	8.89 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	371 B	371 B	✓
Overall change	371 B	371 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/startup	Change
index.html gzip	613 B	613 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: c3619e8

ijjk · 2021-04-16T15:51:24Z

Failing test suites

Commit: c3619e8

test/integration/serverless-trace-revalidate/test/index.test.js

Serverless Trace > should set correct Cache-Control header

Expand output

● Serverless Trace › should set correct Cache-Control header

ReferenceError: fetch is not defined

  51 |   it('should set correct Cache-Control header', async () => {
  52 |     const url = `http://localhost:${appPort}/revalidate`
> 53 |     const res = await fetch(url)
     |                 ^
  54 |     expect(res.headers.get('Cache-Control')).toMatch(
  55 |       's-maxage=10, stale-while-revalidate'
  56 |     )

  at Object.<anonymous> (integration/serverless-trace-revalidate/test/index.test.js:53:17)

test/integration/tsconfig-verifier/test/index.test.js

tsconfig.json verifier > allows you to extend another configuration file

Expand output

● tsconfig.json verifier › allows you to extend another configuration file

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `tsconfig.json verifier allows you to extend another configuration file 1`

- Snapshot  -  1
+ Received  + 12

- { "extends": "./tsconfig.base.json" }
+ {
+   "extends": "./tsconfig.base.json",
+   "include": [
+     "next-env.d.ts",
+     "**/*.ts",
+     "**/*.tsx"
+   ],
+   "exclude": [
+     "node_modules"
+   ]
+ }
+

  308 |     expect(code).toBe(0)
  309 |
> 310 |     expect(await readFile(tsConfig, 'utf8')).toMatchInlineSnapshot(
      |                                              ^
  311 |       `"{ \\"extends\\": \\"./tsconfig.base.json\\" }"`
  312 |     )
  313 |   })

  at Object.<anonymous> (integration/tsconfig-verifier/test/index.test.js:310:46)

ijjk · 2021-04-17T17:58:04Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	14.8s	15s	⚠️ +240ms
buildDurationCached	4.4s	4.2s	-185ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.5 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.71	2.702	-0.01
/ avg req/sec	922.66	925.28	+2.62
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.51	1.563	⚠️ +0.05
/error-in-render avg req/sec	1655.67	1599.96	⚠️ -55.71

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/startup	Change
index.html gzip	611 B	611 B	✓
link.html gzip	616 B	616 B	✓
withRouter.html gzip	604 B	604 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	17.9s	17.5s	-404ms
buildDurationCached	6.5s	6.5s	-5ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.5 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js perf/startup	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.7 kB	10.7 kB	✓
amp.html	1.96 kB	1.96 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	✓
routerDirect.js	1.44 MB	1.44 MB	✓
withRouter.js	1.44 MB	1.44 MB	✓
Overall change	7.14 MB	7.14 MB	✓

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	11.7s	12.2s	⚠️ +507ms
buildDurationCached	4.9s	4.9s	⚠️ +11ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.5 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js perf/startup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.587	2.6	⚠️ +0.01
/ avg req/sec	966.31	961.47	⚠️ -4.84
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.526	1.5	-0.03
/error-in-render avg req/sec	1638	1666.94	+28.94

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.12 kB	7.12 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
hooks-HASH.js gzip	888 B	888 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
Overall change	8.89 kB	8.89 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	371 B	371 B	✓
Overall change	371 B	371 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/startup	Change
index.html gzip	613 B	613 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: c11884e

timneutkens

Looks great!

ijjk · 2021-04-18T10:12:59Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	15.4s	15.5s	⚠️ +95ms
buildDurationCached	4.7s	4.6s	-145ms
nodeModulesSize	46.3 MB	46.3 MB	⚠️ +5.5 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js perf/startup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.785	2.796	⚠️ +0.01
/ avg req/sec	897.72	894.26	⚠️ -3.46
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.607	1.584	-0.02
/error-in-render avg req/sec	1555.34	1577.84	+22.5

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.08 kB	7.08 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/startup	Change
index.html gzip	610 B	610 B	✓
link.html gzip	616 B	616 B	✓
withRouter.html gzip	605 B	605 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	19.5s	19.8s	⚠️ +274ms
buildDurationCached	6.7s	7s	⚠️ +277ms
nodeModulesSize	46.3 MB	46.3 MB	⚠️ +5.5 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.08 kB	7.08 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js perf/startup	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.7 kB	10.7 kB	✓
amp.html	1.96 kB	1.96 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	✓
routerDirect.js	1.44 MB	1.44 MB	✓
withRouter.js	1.44 MB	1.44 MB	✓
Overall change	7.15 MB	7.15 MB	✓

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
buildDuration	12.7s	12.8s	⚠️ +56ms
buildDurationCached	5.3s	5.1s	-147ms
nodeModulesSize	46.3 MB	46.3 MB	⚠️ +5.5 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js perf/startup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.732	2.73	0
/ avg req/sec	914.95	915.89	+0.94
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.571	1.58	⚠️ +0.01
/error-in-render avg req/sec	1591.02	1582.61	⚠️ -8.41

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js perf/startup	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.16 kB	7.16 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js perf/startup	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	vercel/next.js perf/startup	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
hooks-HASH.js gzip	888 B	888 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
Overall change	8.89 kB	8.89 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js perf/startup	Change
_buildManifest.js gzip	371 B	371 B	✓
Overall change	371 B	371 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js perf/startup	Change
index.html gzip	613 B	613 B	✓
link.html gzip	618 B	618 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: 8ea3130

* import next-server logic during the time the configuration is loaded * load minimizer plugins only when used * load ReactDevOverlay only when used * load only meta information of tsconfig for validation * make worker for configuration loading lighter * only load runTypeCheck when used * load postcss config only when used

sokra requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners April 16, 2021 08:47

ijjk added the type: next label Apr 16, 2021

sokra force-pushed the perf/startup branch from 7de17fb to af461ef Compare April 16, 2021 12:56

sokra force-pushed the perf/startup branch from af461ef to c68edeb Compare April 16, 2021 13:41

Timer reviewed Apr 16, 2021

View reviewed changes

packages/next/next-server/server/config-utils.ts Outdated Show resolved Hide resolved

sokra force-pushed the perf/startup branch from c68edeb to 3a8532e Compare April 16, 2021 14:53

sokra force-pushed the perf/startup branch from 5002f3a to c3619e8 Compare April 16, 2021 15:28

sokra added 8 commits April 17, 2021 19:46

import next-server logic during the time the configuration is loaded

626495b

load minimizer plugins only when used

627e0bb

load ReactDevOverlay only when used

25a5edf

load only meta information of tsconfig for validation

8c8908d

make worker for configuration loading lighter

5d2ca3c

only load runTypeCheck when used

cabb54c

disable worker threads for config loading

9917470

improve way of only reading meta info from tsconfig

c11884e

sokra force-pushed the perf/startup branch from c3619e8 to c11884e Compare April 17, 2021 17:46

timneutkens approved these changes Apr 18, 2021

View reviewed changes

Merge branch 'canary' into perf/startup

8ea3130

kodiakhq bot merged commit 5bdef6a into canary Apr 18, 2021

kodiakhq bot deleted the perf/startup branch April 18, 2021 10:28

sync-by-unito bot mentioned this pull request May 18, 2021

chore(deps): bump next from 10.0.7 to 10.2.0 filecoin-project/slate#736

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

startup performance improvements #24129

startup performance improvements #24129

sokra commented Apr 16, 2021

ijjk commented Apr 16, 2021 •

edited

Loading

ijjk commented Apr 16, 2021

ijjk commented Apr 16, 2021

ijjk commented Apr 16, 2021 •

edited

Loading

Timer Apr 16, 2021 •

edited

Loading

sokra Apr 16, 2021

Timer Apr 16, 2021

sokra commented Apr 16, 2021

ijjk commented Apr 16, 2021

ijjk commented Apr 16, 2021 •

edited

Loading

ijjk commented Apr 16, 2021

ijjk commented Apr 16, 2021 •

edited

Loading

ijjk commented Apr 17, 2021

timneutkens left a comment

ijjk commented Apr 18, 2021

startup performance improvements #24129

startup performance improvements #24129

Conversation

sokra commented Apr 16, 2021

ijjk commented Apr 16, 2021 • edited Loading

Failing test suites

ijjk commented Apr 16, 2021

Stats from current PR

ijjk commented Apr 16, 2021

Failing test suites

ijjk commented Apr 16, 2021 • edited Loading

Failing test suites

Timer Apr 16, 2021 • edited Loading

Choose a reason for hiding this comment

sokra Apr 16, 2021

Choose a reason for hiding this comment

Timer Apr 16, 2021

Choose a reason for hiding this comment

sokra commented Apr 16, 2021

ijjk commented Apr 16, 2021

Stats from current PR

ijjk commented Apr 16, 2021 • edited Loading

Failing test suites

ijjk commented Apr 16, 2021

Stats from current PR

ijjk commented Apr 16, 2021 • edited Loading

Failing test suites

ijjk commented Apr 17, 2021

Stats from current PR

timneutkens left a comment

Choose a reason for hiding this comment

ijjk commented Apr 18, 2021

Stats from current PR

ijjk commented Apr 16, 2021 •

edited

Loading

ijjk commented Apr 16, 2021 •

edited

Loading

Timer Apr 16, 2021 •

edited

Loading

ijjk commented Apr 16, 2021 •

edited

Loading

ijjk commented Apr 16, 2021 •

edited

Loading