KEMBAR78
Store css file dependencies info for dynamic imports and apply it at SSR by khades · Pull Request #12843 · vercel/next.js · GitHub
Skip to content

Conversation

@khades
Copy link
Contributor

@khades khades commented May 13, 2020

To prevent FOUC, discussed in #10557 i need to store information about css file dependencies for chunk. Right now current implementation just throws away everything but js.

Can there be more than one css file in chunk? If no - code will be simplified.

closes #10557

@ijjk
Copy link
Member

ijjk commented May 13, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
buildDuration 13.7s 13.3s -462ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +199 B
Page Load Tests Overall increase ✓
zeit/next.js canary khades/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 2.283 2.224 -0.06
/ avg req/sec 1094.88 1123.96 ⚠️ +29.08
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.488 1.424 -0.06
/error-in-render avg req/sec 1679.68 1755.73 ⚠️ +76.05
Client Bundles (main, webpack, commons)
zeit/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary khades/next.js canary Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary khades/next.js canary Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary khades/next.js canary Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary khades/next.js canary Change
index.html gzip 927 B 927 B
link.html gzip 937 B 937 B
withRouter.html gzip 923 B 923 B
Overall change 2.79 kB 2.79 kB

Serverless Mode
General Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
buildDuration 13.4s 14.5s ⚠️ +1.1s
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +199 B
Client Bundles (main, webpack, commons)
zeit/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary khades/next.js canary Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary khades/next.js canary Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary khades/next.js canary Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles
zeit/next.js canary khades/next.js canary Change
_error.js 850 kB 850 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 851 kB 851 kB
link.js 888 kB 888 kB
routerDirect.js 880 kB 880 kB
withRouter.js 880 kB 880 kB
Overall change 4.36 MB 4.36 MB

@khades khades changed the title Store css file dependency info for dynamic imports Store css file dependency info for dynamic imports and apply it at SSR May 14, 2020
@khades khades changed the title Store css file dependency info for dynamic imports and apply it at SSR Store css file dependencies info for dynamic imports and apply it at SSR May 14, 2020
@khades khades marked this pull request as ready for review May 14, 2020 09:01
@ijjk
Copy link
Member

ijjk commented May 14, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
buildDuration 12.4s 12.4s ⚠️ +65ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +515 B
Page Load Tests Overall increase ✓
zeit/next.js canary khades/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 2.152 2.107 -0.04
/ avg req/sec 1161.69 1186.43 ⚠️ +24.74
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.381 1.33 -0.05
/error-in-render avg req/sec 1810.79 1879.94 ⚠️ +69.15
Client Bundles (main, webpack, commons)
zeit/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary khades/next.js canary Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary khades/next.js canary Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary khades/next.js canary Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary khades/next.js canary Change
index.html gzip 926 B 926 B
link.html gzip 936 B 936 B
withRouter.html gzip 923 B 923 B
Overall change 2.79 kB 2.79 kB

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
buildDuration 13.4s 13.5s ⚠️ +103ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +515 B
Client Bundles (main, webpack, commons)
zeit/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary khades/next.js canary Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary khades/next.js canary Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary khades/next.js canary Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
_error.js 850 kB 852 kB ⚠️ +1.49 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 851 kB 852 kB ⚠️ +1.49 kB
link.js 888 kB 889 kB ⚠️ +1.49 kB
routerDirect.js 880 kB 882 kB ⚠️ +1.49 kB
withRouter.js 880 kB 882 kB ⚠️ +1.49 kB
Overall change 4.36 MB 4.37 MB ⚠️ +7.46 kB

@ijjk
Copy link
Member

ijjk commented May 14, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
buildDuration 12.3s 12.4s ⚠️ +132ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +515 B
Page Load Tests Overall decrease ⚠️
zeit/next.js canary khades/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 2.087 2.037 -0.05
/ avg req/sec 1198.15 1227.59 ⚠️ +29.44
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.19 1.213 ⚠️ +0.02
/error-in-render avg req/sec 2101.57 2060.31 -41.26
Client Bundles (main, webpack, commons)
zeit/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary khades/next.js canary Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary khades/next.js canary Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary khades/next.js canary Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary khades/next.js canary Change
index.html gzip 926 B 926 B
link.html gzip 936 B 936 B
withRouter.html gzip 923 B 923 B
Overall change 2.79 kB 2.79 kB

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
buildDuration 13.1s 13.2s ⚠️ +109ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +515 B
Client Bundles (main, webpack, commons)
zeit/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary khades/next.js canary Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary khades/next.js canary Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary khades/next.js canary Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
_error.js 850 kB 852 kB ⚠️ +1.49 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 851 kB 852 kB ⚠️ +1.49 kB
link.js 888 kB 889 kB ⚠️ +1.49 kB
routerDirect.js 880 kB 882 kB ⚠️ +1.49 kB
withRouter.js 880 kB 882 kB ⚠️ +1.49 kB
Overall change 4.36 MB 4.37 MB ⚠️ +7.46 kB

Copy link
Member

@timneutkens timneutkens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add integration tests for this to test/integration/production and test/ingration/basic (I believe those have next/dynamic tests already)

@khades
Copy link
Contributor Author

khades commented May 14, 2020

Could you add integration tests for this to test/integration/production and test/ingration/basic (I believe those have next/dynamic tests already)

yes, i will try to do that

@khades
Copy link
Contributor Author

khades commented May 14, 2020

@timneutkens isn't mini-css-extract-plugin enabled only in production mode?

@ijjk
Copy link
Member

ijjk commented May 14, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
buildDuration 12.8s 12.8s -5ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +515 B
Page Load Tests Overall decrease ⚠️
zeit/next.js canary khades/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 2.111 2.215 ⚠️ +0.1
/ avg req/sec 1184.12 1128.42 -55.7
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.367 1.408 ⚠️ +0.04
/error-in-render avg req/sec 1828.34 1776.15 -52.19
Client Bundles (main, webpack, commons)
zeit/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary khades/next.js canary Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary khades/next.js canary Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary khades/next.js canary Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary khades/next.js canary Change
index.html gzip 927 B 927 B
link.html gzip 936 B 936 B
withRouter.html gzip 923 B 923 B
Overall change 2.79 kB 2.79 kB

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
buildDuration 13.8s 13.9s ⚠️ +162ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +515 B
Client Bundles (main, webpack, commons)
zeit/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary khades/next.js canary Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary khades/next.js canary Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary khades/next.js canary Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
_error.js 850 kB 852 kB ⚠️ +1.49 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 851 kB 852 kB ⚠️ +1.49 kB
link.js 888 kB 889 kB ⚠️ +1.49 kB
routerDirect.js 880 kB 882 kB ⚠️ +1.49 kB
withRouter.js 880 kB 882 kB ⚠️ +1.49 kB
Overall change 4.36 MB 4.37 MB ⚠️ +7.46 kB

@ijjk
Copy link
Member

ijjk commented May 14, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
buildDuration 13.6s 13.7s ⚠️ +94ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +515 B
Page Load Tests Overall decrease ⚠️
zeit/next.js canary khades/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 2.286 2.368 ⚠️ +0.08
/ avg req/sec 1093.66 1055.91 -37.75
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.46 1.523 ⚠️ +0.06
/error-in-render avg req/sec 1712.04 1641.7 -70.34
Client Bundles (main, webpack, commons)
zeit/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary khades/next.js canary Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary khades/next.js canary Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary khades/next.js canary Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Rendered Page Sizes
zeit/next.js canary khades/next.js canary Change
index.html gzip 927 B 927 B
link.html gzip 936 B 936 B
withRouter.html gzip 923 B 923 B
Overall change 2.79 kB 2.79 kB

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
buildDuration 14.8s 14.6s -291ms
nodeModulesSize 58.7 MB 58.7 MB ⚠️ +515 B
Client Bundles (main, webpack, commons)
zeit/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.68 kB 6.68 kB
webpack-HASH.js gzip 746 B 746 B
de003c3a9d30..e49d.js gzip 10.4 kB 10.4 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57 kB 57 kB
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 746 B 746 B
de003c3a9d30..dule.js gzip 6.85 kB 6.85 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.5 kB 52.5 kB
Legacy Client Bundles (polyfills)
zeit/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB
Overall change 26.3 kB 26.3 kB
Client Pages
zeit/next.js canary khades/next.js canary Change
_app.js gzip 1.26 kB 1.26 kB
_error.js gzip 3.29 kB 3.29 kB
hooks.js gzip 880 B 880 B
index.js gzip 222 B 222 B
link.js gzip 2.06 kB 2.06 kB
routerDirect.js gzip 280 B 280 B
withRouter.js gzip 278 B 278 B
Overall change 8.26 kB 8.26 kB
Client Pages Modern
zeit/next.js canary khades/next.js canary Change
_app.module.js gzip 599 B 599 B
_error.module.js gzip 2.09 kB 2.09 kB
hooks.module.js gzip 383 B 383 B
index.module.js gzip 223 B 223 B
link.module.js gzip 1.52 kB 1.52 kB
routerDirect..dule.js gzip 279 B 279 B
withRouter.m..dule.js gzip 278 B 278 B
Overall change 5.37 kB 5.37 kB
Client Build Manifests
zeit/next.js canary khades/next.js canary Change
_buildManifest.js gzip 61 B 61 B
_buildManife..dule.js gzip 61 B 61 B
Overall change 122 B 122 B
Serverless bundles Overall increase ⚠️
zeit/next.js canary khades/next.js canary Change
_error.js 850 kB 852 kB ⚠️ +1.49 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.81 kB 3.81 kB
index.js 851 kB 852 kB ⚠️ +1.49 kB
link.js 888 kB 889 kB ⚠️ +1.49 kB
routerDirect.js 880 kB 882 kB ⚠️ +1.49 kB
withRouter.js 880 kB 882 kB ⚠️ +1.49 kB
Overall change 4.36 MB 4.37 MB ⚠️ +7.46 kB

@khades khades marked this pull request as draft May 14, 2020 17:22
@ijjk
Copy link
Member

ijjk commented May 14, 2020

Failing test suites

test/integration/basic/test/index.test.js

  • Basic Features > Dynamic import > Import mapping > should render dynamic imports bundle
  • Basic Features > Dynamic import > Import mapping > should render dynamic imports bundle with additional components
  • Basic Features > Dynamic import > Import mapping > should render components
  • Basic Features > Dynamic import > Import mapping > should render support React context
  • Basic Features > Dynamic import > Import mapping > should load new components and render for prop changes
  • Basic Features > Dynamic import > Multiple modules > should only include the rendered module script tag
  • Basic Features > Dynamic import > Multiple modules > should only load the rendered module in the browser
  • Basic Features > Dynamic import > Multiple modules > should only render one bundle if component is used multiple times
  • Basic Features > Dynamic import > custom chunkfilename > should render the correct filename
  • Basic Features > Dynamic import > custom chunkfilename > should render the component on client side
  • Basic Features > Dynamic import > custom loading > should render custom loading on the server side when ssr:false and loading is provided
  • Basic Features > Dynamic import > custom loading > should render the component on client side
  • Basic Features > Error Recovery > should recover from 404 after a page has been added
  • Basic Features > Error Recovery > should detect syntax errors and recover
  • Basic Features > Error Recovery > should show the error on all pages
  • Basic Features > Error Recovery > should detect runtime errors on the module scope
  • Basic Features > Error Recovery > should recover from errors in the render function
  • Basic Features > Error Recovery > should recover after exporting an invalid page
  • Basic Features > Error Recovery > should recover after a bad return from the render function
  • Basic Features > Error Recovery > should recover after undefined exported as default
  • Basic Features > Error Recovery > should recover from errors in getInitialProps in client
  • Basic Features > Error Recovery > should recover after an error reported via SSR
  • Basic Features > Hot Module Reloading > delete a page and add it back > should load the page properly
  • Basic Features > Hot Module Reloading > editing a page > should detect the changes and display it
  • Basic Features > Hot Module Reloading > editing a page > should not reload unrelated pages
  • Basic Features > Hot Module Reloading > editing a page > should update styles correctly
  • Basic Features > Hot Module Reloading > editing a page > should update styles in a stateful component correctly
  • Basic Features > Hot Module Reloading > editing a page > should update styles in a dynamic component correctly
  • Basic Features > With Security Related Issues > should not allow accessing files outside .next/static and .next/server directory
  • Basic Features > process.env > should set process.env.NODE_ENV in development
Expand output

● Basic Features › Dynamic import › custom chunkfilename › should render the correct filename

expect(received).toMatch(expected)

Expected pattern: /test chunkfilename/
Received string:  "{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"ModuleNotFoundError\",\"message\":\"Module not found: Error: Can't resolve './hello-chunkfilename.module.scss' in '/home/runner/work/next.js/next.js/test/integration/basic/components'\",\"stack\":\"ModuleNotFoundError: Module not found: Error: Can't resolve './hello-chunkfilename.module.scss' in '/home/runner/work/next.js/next.js/test/integration/basic/components'\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/Compilation.js:925:10\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:401:22\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:130:21\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:224:22\\n    at /home/runner/work/next.js/next.js/node_modules/neo-async/async.js:2830:7\\n    at /home/runner/work/next.js/next.js/node_modules/neo-async/async.js:6877:13\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:214:25\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:213:14\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:285:5\\n    at eval (eval at create (/home/runner/work/next.js/next.js/node_modules/tapable/lib/HookCodeFactory.js:33:10), \\u003canonymous\\u003e:13:1)\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:285:5\\n    at eval (eval at create (/home/runner/work/next.js/next.js/node_modules/tapable/lib/HookCodeFactory.js:33:10), \\u003canonymous\\u003e:13:1)\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:285:5\\n    at eval (eval at create (/home/runner/work/next.js/next.js/node_modules/tapable/lib/HookCodeFactory.js:33:10), \\u003canonymous\\u003e:25:1)\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43\"},\"gip\":true}"

  144 |       it('should render the correct filename', async () => {
  145 |         const $ = await get$('/dynamic/chunkfilename')
> 146 |         expect($('body').text()).toMatch(/test chunkfilename/)
      |                                  ^
  147 |         expect($('html').html()).toMatch(/hello-world\.js/)
  148 |         expect($('html').html()).toMatch(/hello-world-css\.css/)
  149 |       })

  at Object.<anonymous> (integration/basic/test/dynamic.js:146:34)

● Basic Features › Dynamic import › custom chunkfilename › should render the component on client side

TIMED OUT: /test chunkfilename/

Failed to compile
./components/hello-chunkfilename.js
Module not found: Can't resolve './hello-chunkfilename.module.scss' in '/home/runner/work/next.js/next.js/test/integration/basic/components'
This error occured during the build process and can only be dismissed by fixing the error.

  361 | 
  362 |   if (hardError) {
> 363 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  364 |   }
  365 |   return false
  366 | }

  at check (lib/next-test-utils.js:363:11)
  at Object.<anonymous> (integration/basic/test/dynamic.js:155:11)

● Basic Features › Dynamic import › custom loading › should render custom loading on the server side when ssr:false and loading is provided

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

Expected: "LOADING"
Received: ""

  168 |       it('should render custom loading on the server side when `ssr:false` and `loading` is provided', async () => {
  169 |         const $ = await get$('/dynamic/no-ssr-custom-loading')
> 170 |         expect($('p').text()).toBe('LOADING')
      |                               ^
  171 |       })
  172 | 
  173 |       it('should render the component on client side', async () => {

  at Object.<anonymous> (integration/basic/test/dynamic.js:170:31)

● Basic Features › Dynamic import › custom loading › should render the component on client side

TIMED OUT: /Hello World 1/

Failed to compile
./components/hello-chunkfilename.js
Module not found: Can't resolve './hello-chunkfilename.module.scss' in '/home/runner/work/next.js/next.js/test/integration/basic/components'
This error occured during the build process and can only be dismissed by fixing the error.

  361 | 
  362 |   if (hardError) {
> 363 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  364 |   }
  365 |   return false
  366 | }

  at check (lib/next-test-utils.js:363:11)
  at Object.<anonymous> (integration/basic/test/dynamic.js:180:11)

● Basic Features › Dynamic import › Multiple modules › should only include the rendered module script tag

expect(received).toMatch(expected)

Expected pattern: /hello1\.js/
Received string:  "<head><style data-next-hide-fouc=\"true\">body{display:none}</style><noscript data-next-hide-fouc=\"true\"><style>body{display:block}</style></noscript><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><meta name=\"next-head-count\" content=\"2\"><link rel=\"preload\" href=\"/_next/static/development/pages/_app.js?ts=1589475628061\" as=\"script\"><link rel=\"preload\" href=\"/_next/static/runtime/webpack.js?ts=1589475628061\" as=\"script\"><link rel=\"preload\" href=\"/_next/static/runtime/main.js?ts=1589475628061\" as=\"script\"><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body><div id=\"__next\"></div><script src=\"/_next/static/runtime/react-refresh.js?ts=1589475628061\"></script><script src=\"/_next/static/development/dll/dll_4837185721bd9b4b2227.js?ts=1589475628061\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"ModuleNotFoundError\",\"message\":\"Module not found: Error: Can't resolve './hello-chunkfilename.module.scss' in '/home/runner/work/next.js/next.js/test/integration/basic/components'\",\"stack\":\"ModuleNotFoundError: Module not found: Error: Can't resolve './hello-chunkfilename.module.scss' in '/home/runner/work/next.js/next.js/test/integration/basic/components'\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/Compilation.js:925:10\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:401:22\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:130:21\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:224:22\\n    at /home/runner/work/next.js/next.js/node_modules/neo-async/async.js:2830:7\\n    at /home/runner/work/next.js/next.js/node_modules/neo-async/async.js:6877:13\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:214:25\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:213:14\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:285:5\\n    at eval (eval at create (/home/runner/work/next.js/next.js/node_modules/tapable/lib/HookCodeFactory.js:33:10), \\u003canonymous\\u003e:13:1)\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:285:5\\n    at eval (eval at create (/home/runner/work/next.js/next.js/node_modules/tapable/lib/HookCodeFactory.js:33:10), \\u003canonymous\\u003e:13:1)\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:285:5\\n    at eval (eval at create (/home/runner/work/next.js/next.js/node_modules/tapable/lib/HookCodeFactory.js:33:10), \\u003canonymous\\u003e:25:1)\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43\"},\"gip\":true}</script><script nomodule src=\"/_next/static/runtime/polyfills.js?ts=1589475628061\"></script><script async data-next-page=\"/_app\" src=\"/_next/static/development/pages/_app.js?ts=1589475628061\"></script><script src=\"/_next/static/runtime/webpack.js?ts=1589475628061\" async></script><script src=\"/_next/static/runtime/main.js?ts=1589475628061\" async></script><script src=\"/_next/static/development/_buildManifest.js?ts=1589475628061\" async></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1589475628061\" async></script></body>"

  194 |         const $ = await get$('/dynamic/multiple-modules')
  195 |         const html = $('html').html()
> 196 |         expect(html).toMatch(/hello1\.js/)
      |                      ^
  197 |         expect(html).not.toMatch(/hello2\.js/)
  198 |       })
  199 | 

  at Object.<anonymous> (integration/basic/test/dynamic.js:196:22)

● Basic Features › Dynamic import › Multiple modules › should only load the rendered module in the browser

expect(received).toMatch(expected)

Expected pattern: /hello1\.js/
Received string:  "<head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><meta name=\"next-head-count\" content=\"2\"><link rel=\"preload\" href=\"/_next/static/development/pages/_app.js?ts=1589475628190\" as=\"script\"><link rel=\"preload\" href=\"/_next/static/runtime/webpack.js?ts=1589475628190\" as=\"script\"><link rel=\"preload\" href=\"/_next/static/runtime/main.js?ts=1589475628190\" as=\"script\"><noscript id=\"__next_css__DO_NOT_USE__\"></noscript><script charset=\"utf-8\" src=\"/_next/static/chunks/0.js\"></script></head><body style=\"overflow: hidden;\"><div id=\"__next\"></div><script src=\"/_next/static/runtime/react-refresh.js?ts=1589475628190\"></script><script src=\"/_next/static/development/dll/dll_4837185721bd9b4b2227.js?ts=1589475628190\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"ModuleNotFoundError\",\"message\":\"Module not found: Error: Can't resolve './hello-chunkfilename.module.scss' in '/home/runner/work/next.js/next.js/test/integration/basic/components'\",\"stack\":\"ModuleNotFoundError: Module not found: Error: Can't resolve './hello-chunkfilename.module.scss' in '/home/runner/work/next.js/next.js/test/integration/basic/components'\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/Compilation.js:925:10\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:401:22\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:130:21\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:224:22\\n    at /home/runner/work/next.js/next.js/node_modules/neo-async/async.js:2830:7\\n    at /home/runner/work/next.js/next.js/node_modules/neo-async/async.js:6877:13\\n    at /home/runner/work/next.js/next.js/node_modules/webpack/lib/NormalModuleFactory.js:214:25\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:213:14\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:285:5\\n    at eval (eval at create (/home/runner/work/next.js/next.js/node_modules/tapable/lib/HookCodeFactory.js:33:10), \\u003canonymous\\u003e:13:1)\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:285:5\\n    at eval (eval at create (/home/runner/work/next.js/next.js/node_modules/tapable/lib/HookCodeFactory.js:33:10), \\u003canonymous\\u003e:13:1)\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/Resolver.js:285:5\\n    at eval (eval at create (/home/runner/work/next.js/next.js/node_modules/tapable/lib/HookCodeFactory.js:33:10), \\u003canonymous\\u003e:25:1)\\n    at /home/runner/work/next.js/next.js/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43\"},\"gip\":true}</script><script nomodule=\"\" src=\"/_next/static/runtime/polyfills.js?ts=1589475628190\"></script><script async=\"\" data-next-page=\"/_app\" src=\"/_next/static/development/pages/_app.js?ts=1589475628190\"></script><script src=\"/_next/static/runtime/webpack.js?ts=1589475628190\" async=\"\"></script><script src=\"/_next/static/runtime/main.js?ts=1589475628190\" async=\"\"></script><script src=\"/_next/static/development/_buildManifest.js?ts=1589475628190\" async=\"\"></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1589475628190\" async=\"\"></script><script src=\"/_next/static/development/pages/_error.js\"></script><div id=\"__next-build-watcher\" style=\"position: fixed; bottom: 10px; right: 20px; width: 0px; height: 0px; z-index: 99999;\"></div><div id=\"__next-prerender-indicator\" style=\"position: fixed; bottom: 20px; right: 10px; width: 0px; height: 0px; z-index: 99998; transition: all 100ms ease 0s;\"></div><nextjs-portal></nextjs-portal></body>"

  208 |             .elementByCss('html')
  209 |             .getAttribute('innerHTML')
> 210 |           expect(html).toMatch(/hello1\.js/)
      |                        ^
  211 |           expect(html).not.toMatch(/hello2\.js/)
  212 |         } finally {
  213 |           if (browser) {

  at Object.<anonymous> (integration/basic/test/dynamic.js:210:24)

● Basic Features › Dynamic import › Multiple modules › should only render one bundle if component is used multiple times

TypeError: Cannot read property 'length' of null

  221 |         const html = $('html').html()
  222 |         try {
> 223 |           expect(html.match(/chunks[\\/]hello1\.js/g).length).toBe(2) // one for preload, one for the script tag
      |                  ^
  224 |           expect(html).not.toMatch(/hello2\.js/)
  225 |         } catch (err) {
  226 |           console.error(html)

  at Object.<anonymous> (integration/basic/test/dynamic.js:223:18)

● Basic Features › Dynamic import › Import mapping › should render dynamic imports bundle

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

Expected: true
Received: false

  234 |         const $ = await get$('/dynamic/bundle')
  235 |         const bodyText = $('body').text()
> 236 |         expect(/Dynamic Bundle/.test(bodyText)).toBe(true)
      |                                                 ^
  237 |         expect(/Hello World 1/.test(bodyText)).toBe(true)
  238 |         expect(/Hello World 2/.test(bodyText)).toBe(false)
  239 |       })

  at Object.<anonymous> (integration/basic/test/dynamic.js:236:49)

● Basic Features › Dynamic import › Import mapping › should render dynamic imports bundle with additional components

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

Expected: true
Received: false

  242 |         const $ = await get$('/dynamic/bundle?showMore=1')
  243 |         const bodyText = $('body').text()
> 244 |         expect(/Dynamic Bundle/.test(bodyText)).toBe(true)
      |                                                 ^
  245 |         expect(/Hello World 1/.test(bodyText)).toBe(true)
  246 |         expect(/Hello World 2/.test(bodyText)).toBe(true)
  247 |       })

  at Object.<anonymous> (integration/basic/test/dynamic.js:244:49)

● Basic Features › Dynamic import › Import mapping › should render components

: Timeout - Async callback was not invoked within the 300000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 300000ms timeout specified by jest.setTimeout.Error:

  247 |       })
  248 | 
> 249 |       it('should render components', async () => {
      |       ^
  250 |         const browser = await webdriver(context.appPort, '/dynamic/bundle')
  251 | 
  252 |         while (true) {

  at new Spec (../node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
  at Suite.<anonymous> (integration/basic/test/dynamic.js:249:7)

● Basic Features › Dynamic import › Import mapping › should render support React context

: Timeout - Async callback was not invoked within the 300000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 300000ms timeout specified by jest.setTimeout.Error:

  265 |       })
  266 | 
> 267 |       it('should render support React context', async () => {
      |       ^
  268 |         const browser = await webdriver(context.appPort, '/dynamic/bundle')
  269 | 
  270 |         while (true) {

  at new Spec (../node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
  at Suite.<anonymous> (integration/basic/test/dynamic.js:267:7)

● Basic Features › Dynamic import › Import mapping › should load new components and render for prop changes

: Timeout - Async callback was not invoked within the 300000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 300000ms timeout specified by jest.setTimeout.Error:

  277 |       })
  278 | 
> 279 |       it('should load new components and render for prop changes', async () => {
      |       ^
  280 |         const browser = await webdriver(context.appPort, '/dynamic/bundle')
  281 | 
  282 |         await browser

  at new Spec (../node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
  at Suite.<anonymous> (integration/basic/test/dynamic.js:279:7)

● Basic Features › Hot Module Reloading › delete a page and add it back › should load the page properly

NoSuchWindowError: no such window: target window already closed
from unknown error: web view not found
  (Session info: headless chrome=81.0.4044.129)

  251 | 
  252 |         while (true) {
> 253 |           const bodyText = await browser.elementByCss('body').text()
      |                            ^
  254 |           if (
  255 |             /Dynamic Bundle/.test(bodyText) &&
  256 |             /Hello World 1/.test(bodyText) &&

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/basic/test/dynamic.js:253:28)

● Basic Features › Hot Module Reloading › editing a page › should detect the changes and display it

StaleElementReferenceError: stale element reference: element is not attached to the page document
  (Session info: headless chrome=81.0.4044.129)

  146 | 
  147 |   const newTabLink = await browser.findElement(By.css('#new'))
> 148 |   await newTabLink.click()
      |   ^
  149 | 
  150 |   allWindows = await browser.getAllWindowHandles()
  151 |   const newWindow = allWindows.find(win => win !== initialWindow)

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at freshWindow (lib/next-webdriver.js:148:3)
  at _default (lib/next-webdriver.js:166:5)
  at Object.<anonymous> (integration/basic/test/hmr.js:28:21)

● Basic Features › Hot Module Reloading › editing a page › should detect the changes and display it

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"p"}
  (Session info: headless chrome=81.0.4044.129)

  62 |         try {
  63 |           browser = await webdriver(context.appPort, '/hmr/about')
> 64 |           const text = await browser.elementByCss('p').text()
     |                        ^
  65 |           expect(text).toBe('This is the about page.')
  66 | 
  67 |           const aboutPagePath = join(

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/basic/test/hmr.js:64:24)

● Basic Features › Hot Module Reloading › editing a page › should not reload unrelated pages

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"button"}
  (Session info: headless chrome=81.0.4044.129)

  102 |         try {
  103 |           browser = await webdriver(context.appPort, '/hmr/counter')
> 104 |           const text = await browser
      |                        ^
  105 |             .elementByCss('button')
  106 |             .click()
  107 |             .elementByCss('button')

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/basic/test/hmr.js:104:24)

● Basic Features › Hot Module Reloading › editing a page › should update styles correctly

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":".hmr-style-page p"}
  (Session info: headless chrome=81.0.4044.129)

  150 |         try {
  151 |           browser = await webdriver(context.appPort, '/hmr/style')
> 152 |           const pTag = await browser.elementByCss('.hmr-style-page p')
      |                        ^
  153 |           const initialFontSize = await pTag.getComputedCss('font-size')
  154 | 
  155 |           expect(initialFontSize).toBe('100px')

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/basic/test/hmr.js:152:24)

● Basic Features › Hot Module Reloading › editing a page › should update styles in a stateful component correctly

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":".hmr-style-page p"}
  (Session info: headless chrome=81.0.4044.129)

  198 |             '/hmr/style-stateful-component'
  199 |           )
> 200 |           const pTag = await browser.elementByCss('.hmr-style-page p')
      |                        ^
  201 |           const initialFontSize = await pTag.getComputedCss('font-size')
  202 | 
  203 |           expect(initialFontSize).toBe('100px')

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/basic/test/hmr.js:200:24)

● Basic Features › Hot Module Reloading › editing a page › should update styles in a dynamic component correctly

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

  238 |             '/hmr/style-dynamic-component'
  239 |           )
> 240 |           const div = await browser.elementByCss('#dynamic-component')
      |                       ^
  241 |           const initialClientClassName = await div.getAttribute('class')
  242 |           const initialFontSize = await div.getComputedCss('font-size')
  243 | 

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/basic/test/hmr.js:240:23)

● Basic Features › Error Recovery › should recover from 404 after a page has been added

ENOENT: no such file or directory, unlink '/home/runner/work/next.js/next.js/test/integration/basic/pages/hmr/new-page.js'

  387 | 
  388 |   delete() {
> 389 |     unlinkSync(this.path)
      |     ^
  390 |   }
  391 | 
  392 |   restore() {

  at File.delete (lib/next-test-utils.js:389:5)
  at Object.<anonymous> (integration/basic/test/error-recovery.js:42:9)
      at runMicrotasks (<anonymous>)

● Basic Features › Error Recovery › should detect syntax errors and recover

TIMED OUT: /This is the about page/

  361 | 
  362 |   if (hardError) {
> 363 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  364 |   }
  365 |   return false
  366 | }

  at check (lib/next-test-utils.js:363:11)
  at Object.<anonymous> (integration/basic/test/error-recovery.js:73:11)

● Basic Features › Error Recovery › should show the error on all pages

TIMED OUT: /This is the contact page/

  361 | 
  362 |   if (hardError) {
> 363 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  364 |   }
  365 |   return false
  366 | }

  at check (lib/next-test-utils.js:363:11)
  at Object.<anonymous> (integration/basic/test/error-recovery.js:113:11)

● Basic Features › Error Recovery › should detect runtime errors on the module scope

TIMED OUT: /This is the about page/

  361 | 
  362 |   if (hardError) {
> 363 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  364 |   }
  365 |   return false
  366 | }

  at check (lib/next-test-utils.js:363:11)
  at Object.<anonymous> (integration/basic/test/error-recovery.js:135:9)

● Basic Features › Error Recovery › should recover from errors in the render function

TIMED OUT: /This is the about page/

  361 | 
  362 |   if (hardError) {
> 363 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  364 |   }
  365 |   return false
  366 | }

  at check (lib/next-test-utils.js:363:11)
  at Object.<anonymous> (integration/basic/test/error-recovery.js:176:11)

● Basic Features › Error Recovery › should recover after exporting an invalid page

TIMED OUT: /This is the about page/

  361 | 
  362 |   if (hardError) {
> 363 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  364 |   }
  365 |   return false
  366 | }

  at check (lib/next-test-utils.js:363:11)
  at Object.<anonymous> (integration/basic/test/error-recovery.js:221:11)

● Basic Features › Error Recovery › should recover after a bad return from the render function

TIMED OUT: /This is the about page/

  361 | 
  362 |   if (hardError) {
> 363 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  364 |   }
  365 |   return false
  366 | }

  at check (lib/next-test-utils.js:363:11)
  at Object.<anonymous> (integration/basic/test/error-recovery.js:273:11)

● Basic Features › Error Recovery › should recover after undefined exported as default

TIMED OUT: /This is the about page/

  361 | 
  362 |   if (hardError) {
> 363 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  364 |   }
  365 |   return false
  366 | }

  at check (lib/next-test-utils.js:363:11)
  at Object.<anonymous> (integration/basic/test/error-recovery.js:319:11)

● Basic Features › Error Recovery › should recover from errors in getInitialProps in client

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#error-in-gip-link"}
  (Session info: headless chrome=81.0.4044.129)

  338 |       try {
  339 |         browser = await webdriver(context.appPort, '/hmr')
> 340 |         await browser.elementByCss('#error-in-gip-link').click()
      |         ^
  341 | 
  342 |         expect(await hasRedbox(browser)).toBe(true)
  343 |         expect(await getRedboxHeader(browser)).toMatchInlineSnapshot(`

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/basic/test/error-recovery.js:340:9)

● Basic Features › Error Recovery › should recover after an error reported via SSR

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Basic Features Error Recovery should recover after an error reported via SSR 1`

- Snapshot
+ Received

-  1 of 1 unhandled error
- Server Error
- 
- Error: an-expected-error-in-gip
- 
- This error happened while generating the page. Any console logs will be displayed in the terminal window.
+ Failed to compile

  383 | 
  384 |         expect(await hasRedbox(browser)).toBe(true)
> 385 |         expect(await getRedboxHeader(browser)).toMatchInlineSnapshot(`
      |                                                ^
  386 |           " 1 of 1 unhandled error
  387 |           Server Error
  388 | 

  at Object.<anonymous> (integration/basic/test/error-recovery.js:385:48)

● Basic Features › process.env › should set process.env.NODE_ENV in development

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#node-env"}
  (Session info: headless chrome=81.0.4044.129)

   6 |     it('should set process.env.NODE_ENV in development', async () => {
   7 |       const browser = await webdriver(context.appPort, '/process-env')
>  8 |       const nodeEnv = await browser.elementByCss('#node-env').text()
     |                       ^
   9 |       expect(nodeEnv).toBe('development')
  10 |       await browser.close()
  11 |     })

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:563:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:489:26)
      at runMicrotasks (<anonymous>)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:699:17)
  at Object.<anonymous> (integration/basic/test/process-env.js:8:23)

● Basic Features › With Security Related Issues › should not allow accessing files outside .next/static and .next/server directory

Path /_next/static/../BUILD_ID accessible from the browser

  16 |           expect(text).toMatch(/This page could not be found/)
  17 |         } catch (err) {
> 18 |           throw new Error(`Path ${path} accessible from the browser`)
     |                 ^
  19 |         }
  20 |       }
  21 |     })

  at Object.<anonymous> (integration/basic/test/security.js:18:17)
      at runMicrotasks (<anonymous>)

@ijjk
Copy link
Member

ijjk commented Jul 10, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary khades/next.js canary Change
buildDuration 12.9s 13.1s ⚠️ +235ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +5.77 kB
Page Load Tests Overall increase ✓
vercel/next.js canary khades/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 2.232 2.184 -0.05
/ avg req/sec 1120.02 1144.59 +24.57
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.511 1.494 -0.02
/error-in-render avg req/sec 1654.56 1673.33 +18.77
Client Bundles (main, webpack, commons)
vercel/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.63 kB 6.63 kB
webpack-HASH.js gzip 751 B 751 B
19b7e98f51cc..e4a8.js gzip 10.7 kB 10.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57.2 kB 57.2 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 751 B 751 B
19b7e98f51cc..dule.js gzip 7.1 kB 7.1 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.7 kB 52.7 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB
Overall change 26.4 kB 26.4 kB
Client Build Manifests
vercel/next.js canary khades/next.js canary Change
_buildManifest.js gzip 268 B 268 B
_buildManife..dule.js gzip 272 B 272 B
Overall change 540 B 540 B
Rendered Page Sizes
vercel/next.js canary khades/next.js canary Change
index.html gzip 953 B 953 B
link.html gzip 961 B 961 B
withRouter.html gzip 945 B 945 B
Overall change 2.86 kB 2.86 kB

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary khades/next.js canary Change
buildDuration 14s 14.2s ⚠️ +217ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +5.77 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.63 kB 6.63 kB
webpack-HASH.js gzip 751 B 751 B
19b7e98f51cc..e4a8.js gzip 10.7 kB 10.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57.2 kB 57.2 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 751 B 751 B
19b7e98f51cc..dule.js gzip 7.1 kB 7.1 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.7 kB 52.7 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB
Overall change 26.4 kB 26.4 kB
Client Build Manifests
vercel/next.js canary khades/next.js canary Change
_buildManifest.js gzip 268 B 268 B
_buildManife..dule.js gzip 272 B 272 B
Overall change 540 B 540 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary khades/next.js canary Change
_error.js 876 kB 879 kB ⚠️ +2.83 kB
404.html 4.17 kB 4.17 kB
hooks.html 3.79 kB 3.79 kB
index.js 877 kB 879 kB ⚠️ +2.83 kB
link.js 916 kB 919 kB ⚠️ +2.83 kB
routerDirect.js 910 kB 912 kB ⚠️ +2.83 kB
withRouter.js 910 kB 912 kB ⚠️ +2.83 kB
Overall change 4.5 MB 4.51 MB ⚠️ +14.2 kB
Commit: 9516e9f

@ijjk
Copy link
Member

ijjk commented Jul 13, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary khades/next.js canary Change
buildDuration 10.9s 10.7s -217ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +5.77 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary khades/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 1.857 1.835 -0.02
/ avg req/sec 1346.6 1362.37 +15.77
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.097 1.115 ⚠️ +0.02
/error-in-render avg req/sec 2279.41 2242.87 ⚠️ -36.54
Client Bundles (main, webpack, commons)
vercel/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.63 kB 6.63 kB
webpack-HASH.js gzip 751 B 751 B
19b7e98f51cc..e4a8.js gzip 10.7 kB 10.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57.2 kB 57.2 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 751 B 751 B
19b7e98f51cc..dule.js gzip 7.1 kB 7.1 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.7 kB 52.7 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB
Overall change 26.4 kB 26.4 kB
Client Build Manifests
vercel/next.js canary khades/next.js canary Change
_buildManifest.js gzip 268 B 268 B
_buildManife..dule.js gzip 272 B 272 B
Overall change 540 B 540 B
Rendered Page Sizes
vercel/next.js canary khades/next.js canary Change
index.html gzip 953 B 953 B
link.html gzip 961 B 961 B
withRouter.html gzip 945 B 945 B
Overall change 2.86 kB 2.86 kB

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary khades/next.js canary Change
buildDuration 11.4s 11.6s ⚠️ +225ms
nodeModulesSize 66.4 MB 66.4 MB ⚠️ +5.77 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary khades/next.js canary Change
main-HASH.js gzip 6.63 kB 6.63 kB
webpack-HASH.js gzip 751 B 751 B
19b7e98f51cc..e4a8.js gzip 10.7 kB 10.7 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
Overall change 57.2 kB 57.2 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary khades/next.js canary Change
main-HASH.module.js gzip 5.72 kB 5.72 kB
webpack-HASH..dule.js gzip 751 B 751 B
19b7e98f51cc..dule.js gzip 7.1 kB 7.1 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
Overall change 52.7 kB 52.7 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary khades/next.js canary Change
polyfills-HASH.js gzip 26.4 kB 26.4 kB
Overall change 26.4 kB 26.4 kB
Client Build Manifests
vercel/next.js canary khades/next.js canary Change
_buildManifest.js gzip 268 B 268 B
_buildManife..dule.js gzip 272 B 272 B
Overall change 540 B 540 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary khades/next.js canary Change
_error.js 878 kB 881 kB ⚠️ +2.83 kB
404.html 4.17 kB 4.17 kB
hooks.html 3.79 kB 3.79 kB
index.js 878 kB 881 kB ⚠️ +2.83 kB
link.js 918 kB 920 kB ⚠️ +2.83 kB
routerDirect.js 911 kB 914 kB ⚠️ +2.83 kB
withRouter.js 911 kB 914 kB ⚠️ +2.83 kB
Overall change 4.5 MB 4.52 MB ⚠️ +14.2 kB
Commit: 884f574

@khades
Copy link
Contributor Author

khades commented Jul 13, 2020

@timneutkens @Timer Review, please

@ijjk
Copy link
Member

ijjk commented Jul 17, 2020

Failing test suites

Commit: a866937

test/integration/create-next-app/index.test.js

  • create next app > empty directory
  • create next app > should allow an example named default
Expand output

● create next app › empty directory

expect(received).toBeTruthy()

Received: false

  66 |         expect(
  67 |           fs.existsSync(path.join(cwd, projectName, 'pages/index.js'))
> 68 |         ).toBeTruthy()
     |           ^
  69 |       })
  70 |     })
  71 |   }

  at integration/create-next-app/index.test.js:68:11
  at usingTempDir (integration/create-next-app/index.test.js:30:12)
  at Object.<anonymous> (integration/create-next-app/index.test.js:58:7)

● create next app › should allow an example named default

expect(received).toBeTruthy()

Received: false

  233 |       expect(
  234 |         fs.existsSync(path.join(cwd, projectName, 'pages/index.js'))
> 235 |       ).toBeTruthy()
      |         ^
  236 |       // check we copied default `.gitignore`
  237 |       expect(
  238 |         fs.existsSync(path.join(cwd, projectName, '.gitignore'))

  at integration/create-next-app/index.test.js:235:9
  at usingTempDir (integration/create-next-app/index.test.js:30:12)
  at Object.<anonymous> (integration/create-next-app/index.test.js:225:5)

@ijjk
Copy link
Member

ijjk commented Aug 3, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall decrease ✓
vercel/next.js canary khades/next.js canary Change
buildDuration 12.6s 12.9s ⚠️ +258ms
nodeModulesSize 65.5 MB 60.8 MB -4.7 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary khades/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 2.159 2.207 ⚠️ +0.05
/ avg req/sec 1158.11 1132.98 ⚠️ -25.13
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.199 1.21 ⚠️ +0.01
/error-in-render avg req/sec 2085.36 2065.41 ⚠️ -19.95
Client Bundles (main, webpack, commons)
vercel/next.js canary khades/next.js canary Change
677f882d2ed8..39a4.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
main-5b25689..c07a.js gzip 6.73 kB 6.73 kB
webpack-488d..c0e7.js gzip 751 B 751 B
Overall change 56.8 kB 56.8 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary khades/next.js canary Change
677f882d2ed8..dule.js gzip 6.13 kB 6.13 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
main-6ac1f4e..dule.js gzip 5.81 kB 5.81 kB
webpack-4f62..dule.js gzip 751 B 751 B
Overall change 51.8 kB 51.8 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary khades/next.js canary Change
polyfills-05..1236.js gzip 30.8 kB 30.8 kB
Overall change 30.8 kB 30.8 kB
Client Pages
vercel/next.js canary khades/next.js canary Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB
_error-a98d9..5cb7.js gzip 3.45 kB 3.45 kB
hooks-f7f3d0..7465.js gzip 887 B 887 B
index-08fb3f..c0e9.js gzip 227 B 227 B
link-6f8445b..99e1.js gzip 1.3 kB 1.3 kB
routerDirect..8aa1.js gzip 284 B 284 B
withRouter-f..e777.js gzip 284 B 284 B
Overall change 7.72 kB 7.72 kB
Client Pages Modern
vercel/next.js canary khades/next.js canary Change
_app-669dbe5..dule.js gzip 626 B 626 B
_error-d5979..dule.js gzip 2.3 kB 2.3 kB
hooks-805c40..dule.js gzip 387 B 387 B
index-6ba5a4..dule.js gzip 226 B 226 B
link-91516ae..dule.js gzip 1.25 kB 1.25 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-d..dule.js gzip 282 B 282 B
Overall change 5.36 kB 5.36 kB
Client Build Manifests
vercel/next.js canary khades/next.js canary Change
_buildManifest.js gzip 274 B 274 B
_buildManife..dule.js gzip 282 B 282 B
Overall change 556 B 556 B
Rendered Page Sizes
vercel/next.js canary khades/next.js canary Change
index.html gzip 946 B 946 B
link.html gzip 952 B 952 B
withRouter.html gzip 939 B 939 B
Overall change 2.84 kB 2.84 kB

Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary khades/next.js canary Change
buildDuration 13.9s 15.4s ⚠️ +1.4s
nodeModulesSize 65.5 MB 65.5 MB ⚠️ +5.76 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary khades/next.js canary Change
677f882d2ed8..39a4.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
main-5b25689..c07a.js gzip 6.73 kB 6.73 kB
webpack-488d..c0e7.js gzip 751 B 751 B
Overall change 56.8 kB 56.8 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary khades/next.js canary Change
677f882d2ed8..dule.js gzip 6.13 kB 6.13 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
main-6ac1f4e..dule.js gzip 5.81 kB 5.81 kB
webpack-4f62..dule.js gzip 751 B 751 B
Overall change 51.8 kB 51.8 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary khades/next.js canary Change
polyfills-05..1236.js gzip 30.8 kB 30.8 kB
Overall change 30.8 kB 30.8 kB
Client Pages
vercel/next.js canary khades/next.js canary Change
_app-8f5f611..1f7b.js gzip 1.28 kB 1.28 kB
_error-a98d9..5cb7.js gzip 3.45 kB 3.45 kB
hooks-f7f3d0..7465.js gzip 887 B 887 B
index-08fb3f..c0e9.js gzip 227 B 227 B
link-6f8445b..99e1.js gzip 1.3 kB 1.3 kB
routerDirect..8aa1.js gzip 284 B 284 B
withRouter-f..e777.js gzip 284 B 284 B
Overall change 7.72 kB 7.72 kB
Client Pages Modern
vercel/next.js canary khades/next.js canary Change
_app-669dbe5..dule.js gzip 626 B 626 B
_error-d5979..dule.js gzip 2.3 kB 2.3 kB
hooks-805c40..dule.js gzip 387 B 387 B
index-6ba5a4..dule.js gzip 226 B 226 B
link-91516ae..dule.js gzip 1.25 kB 1.25 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-d..dule.js gzip 282 B 282 B
Overall change 5.36 kB 5.36 kB
Client Build Manifests
vercel/next.js canary khades/next.js canary Change
_buildManifest.js gzip 274 B 274 B
_buildManife..dule.js gzip 282 B 282 B
Overall change 556 B 556 B
Serverless bundles Overall increase ⚠️
vercel/next.js canary khades/next.js canary Change
_error.js 1.02 MB 1.02 MB ⚠️ +1.74 kB
404.html 4.18 kB 4.18 kB
hooks.html 3.82 kB 3.82 kB
index.js 1.02 MB 1.02 MB ⚠️ +1.74 kB
link.js 1.06 MB 1.06 MB ⚠️ +1.74 kB
routerDirect.js 1.05 MB 1.05 MB ⚠️ +1.74 kB
withRouter.js 1.05 MB 1.05 MB ⚠️ +1.74 kB
Overall change 5.2 MB 5.21 MB ⚠️ +8.7 kB
Commit: da3dfbf

@ijjk
Copy link
Member

ijjk commented Aug 3, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
vercel/next.js canary MehediH/next.js canary Change
buildDuration 12.9s 12.5s -434ms
nodeModulesSize 65.5 MB 65.5 MB
Page Load Tests Overall increase ✓
vercel/next.js canary MehediH/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 2.362 2.216 -0.15
/ avg req/sec 1058.21 1128.24 +70.03
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.255 1.253 0
/error-in-render avg req/sec 1992.29 1995.22 +2.93
Client Bundles (main, webpack, commons)
vercel/next.js canary MehediH/next.js canary Change
677f882d2ed8..adde.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
main-5932771..4350.js gzip 6.73 kB 6.73 kB
polyfills-4c..dbb6.js gzip 30.8 kB 30.8 kB
webpack-ccf5..276a.js gzip 751 B 751 B
Overall change 87.6 kB 87.6 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary MehediH/next.js canary Change
677f882d2ed8..dule.js gzip 6.13 kB 6.13 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
main-02cf3f6..dule.js gzip 5.81 kB 5.81 kB
polyfills-4c..dule.js gzip 30.8 kB 30.8 kB
webpack-10c7..dule.js gzip 751 B 751 B
Overall change 82.7 kB 82.7 kB
Client Pages
vercel/next.js canary MehediH/next.js canary Change
_app-874bd8a..0103.js gzip 1.28 kB 1.28 kB
_error-fa39c..ec40.js gzip 3.45 kB 3.45 kB
hooks-585f07..95a3.js gzip 887 B 887 B
index-c7b63f..fc02.js gzip 227 B 227 B
link-ea5d131..c2be.js gzip 1.3 kB 1.3 kB
routerDirect..ebc7.js gzip 284 B 284 B
withRouter-2..db68.js gzip 284 B 284 B
Overall change 7.72 kB 7.72 kB
Client Pages Modern
vercel/next.js canary MehediH/next.js canary Change
_app-97e743e..dule.js gzip 626 B 626 B
_error-b4004..dule.js gzip 2.3 kB 2.3 kB
hooks-696209..dule.js gzip 387 B 387 B
index-a4dd74..dule.js gzip 226 B 226 B
link-4448c30..dule.js gzip 1.25 kB 1.25 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-1..dule.js gzip 282 B 282 B
Overall change 5.36 kB 5.36 kB
Client Build Manifests
vercel/next.js canary MehediH/next.js canary Change
_buildManifest.js gzip 273 B 273 B
_buildManife..dule.js gzip 281 B 281 B
Overall change 554 B 554 B
Rendered Page Sizes
vercel/next.js canary MehediH/next.js canary Change
index.html gzip 946 B 946 B
link.html gzip 955 B 955 B
withRouter.html gzip 940 B 940 B
Overall change 2.84 kB 2.84 kB

Serverless Mode
General
vercel/next.js canary MehediH/next.js canary Change
buildDuration 13.7s 13.8s ⚠️ +95ms
nodeModulesSize 65.5 MB 65.5 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary MehediH/next.js canary Change
677f882d2ed8..adde.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
main-5932771..4350.js gzip 6.73 kB 6.73 kB
polyfills-4c..dbb6.js gzip 30.8 kB 30.8 kB
webpack-ccf5..276a.js gzip 751 B 751 B
Overall change 87.6 kB 87.6 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary MehediH/next.js canary Change
677f882d2ed8..dule.js gzip 6.13 kB 6.13 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
main-02cf3f6..dule.js gzip 5.81 kB 5.81 kB
polyfills-4c..dule.js gzip 30.8 kB 30.8 kB
webpack-10c7..dule.js gzip 751 B 751 B
Overall change 82.7 kB 82.7 kB
Client Pages
vercel/next.js canary MehediH/next.js canary Change
_app-874bd8a..0103.js gzip 1.28 kB 1.28 kB
_error-fa39c..ec40.js gzip 3.45 kB 3.45 kB
hooks-585f07..95a3.js gzip 887 B 887 B
index-c7b63f..fc02.js gzip 227 B 227 B
link-ea5d131..c2be.js gzip 1.3 kB 1.3 kB
routerDirect..ebc7.js gzip 284 B 284 B
withRouter-2..db68.js gzip 284 B 284 B
Overall change 7.72 kB 7.72 kB
Client Pages Modern
vercel/next.js canary MehediH/next.js canary Change
_app-97e743e..dule.js gzip 626 B 626 B
_error-b4004..dule.js gzip 2.3 kB 2.3 kB
hooks-696209..dule.js gzip 387 B 387 B
index-a4dd74..dule.js gzip 226 B 226 B
link-4448c30..dule.js gzip 1.25 kB 1.25 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-1..dule.js gzip 282 B 282 B
Overall change 5.36 kB 5.36 kB
Client Build Manifests
vercel/next.js canary MehediH/next.js canary Change
_buildManifest.js gzip 273 B 273 B
_buildManife..dule.js gzip 281 B 281 B
Overall change 554 B 554 B
Serverless bundles
vercel/next.js canary MehediH/next.js canary Change
_error.js 1.02 MB 1.02 MB
404.html 4.18 kB 4.18 kB
hooks.html 3.82 kB 3.82 kB
index.js 1.02 MB 1.02 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.05 MB 1.05 MB
withRouter.js 1.05 MB 1.05 MB
Overall change 5.2 MB 5.2 MB
Commit: 4077336

@ijjk
Copy link
Member

ijjk commented Aug 3, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
vercel/next.js canary MehediH/next.js canary Change
buildDuration 13.4s 14s ⚠️ +604ms
nodeModulesSize 65.5 MB 65.5 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary MehediH/next.js canary Change
/ failed reqs 0 0
/ total time (seconds) 2.549 2.643 ⚠️ +0.09
/ avg req/sec 980.96 945.99 ⚠️ -34.97
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.53 1.612 ⚠️ +0.08
/error-in-render avg req/sec 1633.6 1550.49 ⚠️ -83.11
Client Bundles (main, webpack, commons)
vercel/next.js canary MehediH/next.js canary Change
677f882d2ed8..adde.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
main-5932771..4350.js gzip 6.73 kB 6.73 kB
polyfills-4c..dbb6.js gzip 30.8 kB 30.8 kB
webpack-ccf5..276a.js gzip 751 B 751 B
Overall change 87.6 kB 87.6 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary MehediH/next.js canary Change
677f882d2ed8..dule.js gzip 6.13 kB 6.13 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
main-02cf3f6..dule.js gzip 5.81 kB 5.81 kB
polyfills-4c..dule.js gzip 30.8 kB 30.8 kB
webpack-10c7..dule.js gzip 751 B 751 B
Overall change 82.7 kB 82.7 kB
Client Pages
vercel/next.js canary MehediH/next.js canary Change
_app-874bd8a..0103.js gzip 1.28 kB 1.28 kB
_error-fa39c..ec40.js gzip 3.45 kB 3.45 kB
hooks-585f07..95a3.js gzip 887 B 887 B
index-c7b63f..fc02.js gzip 227 B 227 B
link-ea5d131..c2be.js gzip 1.3 kB 1.3 kB
routerDirect..ebc7.js gzip 284 B 284 B
withRouter-2..db68.js gzip 284 B 284 B
Overall change 7.72 kB 7.72 kB
Client Pages Modern
vercel/next.js canary MehediH/next.js canary Change
_app-97e743e..dule.js gzip 626 B 626 B
_error-b4004..dule.js gzip 2.3 kB 2.3 kB
hooks-696209..dule.js gzip 387 B 387 B
index-a4dd74..dule.js gzip 226 B 226 B
link-4448c30..dule.js gzip 1.25 kB 1.25 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-1..dule.js gzip 282 B 282 B
Overall change 5.36 kB 5.36 kB
Client Build Manifests
vercel/next.js canary MehediH/next.js canary Change
_buildManifest.js gzip 273 B 273 B
_buildManife..dule.js gzip 281 B 281 B
Overall change 554 B 554 B
Rendered Page Sizes
vercel/next.js canary MehediH/next.js canary Change
index.html gzip 946 B 946 B
link.html gzip 955 B 955 B
withRouter.html gzip 940 B 940 B
Overall change 2.84 kB 2.84 kB

Serverless Mode
General
vercel/next.js canary MehediH/next.js canary Change
buildDuration 15.6s 15.7s ⚠️ +124ms
nodeModulesSize 65.5 MB 65.5 MB
Client Bundles (main, webpack, commons)
vercel/next.js canary MehediH/next.js canary Change
677f882d2ed8..adde.js gzip 10.2 kB 10.2 kB
framework.HASH.js gzip 39.1 kB 39.1 kB
main-5932771..4350.js gzip 6.73 kB 6.73 kB
polyfills-4c..dbb6.js gzip 30.8 kB 30.8 kB
webpack-ccf5..276a.js gzip 751 B 751 B
Overall change 87.6 kB 87.6 kB
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary MehediH/next.js canary Change
677f882d2ed8..dule.js gzip 6.13 kB 6.13 kB
framework.HA..dule.js gzip 39.1 kB 39.1 kB
main-02cf3f6..dule.js gzip 5.81 kB 5.81 kB
polyfills-4c..dule.js gzip 30.8 kB 30.8 kB
webpack-10c7..dule.js gzip 751 B 751 B
Overall change 82.7 kB 82.7 kB
Client Pages
vercel/next.js canary MehediH/next.js canary Change
_app-874bd8a..0103.js gzip 1.28 kB 1.28 kB
_error-fa39c..ec40.js gzip 3.45 kB 3.45 kB
hooks-585f07..95a3.js gzip 887 B 887 B
index-c7b63f..fc02.js gzip 227 B 227 B
link-ea5d131..c2be.js gzip 1.3 kB 1.3 kB
routerDirect..ebc7.js gzip 284 B 284 B
withRouter-2..db68.js gzip 284 B 284 B
Overall change 7.72 kB 7.72 kB
Client Pages Modern
vercel/next.js canary MehediH/next.js canary Change
_app-97e743e..dule.js gzip 626 B 626 B
_error-b4004..dule.js gzip 2.3 kB 2.3 kB
hooks-696209..dule.js gzip 387 B 387 B
index-a4dd74..dule.js gzip 226 B 226 B
link-4448c30..dule.js gzip 1.25 kB 1.25 kB
routerDirect..dule.js gzip 284 B 284 B
withRouter-1..dule.js gzip 282 B 282 B
Overall change 5.36 kB 5.36 kB
Client Build Manifests
vercel/next.js canary MehediH/next.js canary Change
_buildManifest.js gzip 273 B 273 B
_buildManife..dule.js gzip 281 B 281 B
Overall change 554 B 554 B
Serverless bundles
vercel/next.js canary MehediH/next.js canary Change
_error.js 1.02 MB 1.02 MB
404.html 4.18 kB 4.18 kB
hooks.html 3.82 kB 3.82 kB
index.js 1.02 MB 1.02 MB
link.js 1.06 MB 1.06 MB
routerDirect.js 1.05 MB 1.05 MB
withRouter.js 1.05 MB 1.05 MB
Overall change 5.2 MB 5.2 MB
Commit: 5c095f4

@kodiakhq kodiakhq bot merged commit 1a7f3e5 into vercel:canary Aug 24, 2020
@timneutkens
Copy link
Member

Thanks @khades!

@khades
Copy link
Contributor Author

khades commented Aug 25, 2020

checked it, works as intended, thank you

@adamayres
Copy link

@khades Thanks for the fix, I too was having the issue in #10557 and was excited to try out this fix. I upgraded to the 9.5.3-canary.25 build and verified that when using dynamic components the FOUC no longer appears on first page load, however if I navigate to a subsequent page that contains a dynamically included component, the local styles for that component do not appear to be loaded at all.

Please note that without this fix, the styles for the dynamically loaded components for subsequent page views were loading, however with the FOUC.

@khades
Copy link
Contributor Author

khades commented Aug 29, 2020

@adamayres will look onto it, pretty strange, i didnt broke the mini-css-extract-plugin client style loader. Dont worry, if i can reproduce that with test i will fix that.

@adamayres
Copy link

@khades Thank you for the quick response. I created a sample repository to try and recreate the issue but it is not reproducible in my isolated repo. In the repo where I had seen the this issue, I had also run into this issue #10161 ("Cannot read property 'pop' of undefined"). I had added the following "fix" in my next.config.js to try and resolve it:

if (config.optimization.splitChunks) {
  config.optimization.splitChunks.cacheGroups.shared.enforce = true;
}

I replaced this with the most recent recommendation and that seems fix the "pop" issue as well as the CSS not loading for the dynamic components on a subsequent page, however I did see a FOUC on the next page load for an in the page. I will keep debugging on my side and report back. It may have nothing to do with your changes. Thanks for looking!

@khades
Copy link
Contributor Author

khades commented Aug 29, 2020

@adamayres i will still add test cases for such issue, just to be sure

@adamayres
Copy link

@khades I was able to isolate the issue that I commented about and created a new repo that has the steps to reproduce. I was able to reproduce the issue by creating two pages that both use next/dynamic to include the same component. When navigating from one page to the next, the CSS styles for the dynamically included component are lost/removed on the subsequent page.

@khades
Copy link
Contributor Author

khades commented Sep 7, 2020

@khades I was able to isolate the issue that I commented about and created a new repo that has the steps to reproduce. I was able to reproduce the issue by creating two pages that both use next/dynamic to include the same component. When navigating from one page to the next, the CSS styles for the dynamically included component are lost/removed on the subsequent page.

styleSheets.forEach(({ href, text }) => {
it breaks somewhere here, will look into it

Did you tried any getServerProps examples?

Can you make a bug?

@khades
Copy link
Contributor Author

khades commented Sep 7, 2020

@timneutkens @Timer @adamayres there's two solutions

  1. Explose react-loadable-manifest to client-loader so it would properly know that some specific css files should be stored between page transitions. This might fully replace mini-css-extract-plugin way of importing such css files.
  2. Dont unload css files that were requested by dynamic component.

@Timer
Copy link
Member

Timer commented Sep 8, 2020

Could y'all please open these findings in a new issue?

@adamayres
Copy link

I have created the following issue to track this bug: #16950.

Did you tried any getServerProps examples?

I am not sure I understand, but I did not do anything with getServerProps. In my linked repo where I reproduced this bug you can see there is no _app.js or any dynamically loaded content in either of the pages. Please let me know if this does not answer your question.

  1. Explose react-loadable-manifest to client-loader so it would properly know that some specific css files should be stored between page transitions. This might fully replace mini-css-extract-plugin way of importing such css files.
  2. Dont unload css files that were requested by dynamic component.

I would defer to the maintainers of the library to provide guidance on which of these approaches makes the most sense for the framework, however I do see that the react-loadable-manifest.json created by the build of my application is ~1.3 MBs raw and ~79kb gzipped, which seems like too much overheard to send to the client to solve this problem. Perhaps there is someway to only send the necessary information about the components being used for a given page OR perhaps it is acceptable to leave CSS on a page for the dynamically loaded components.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FOUC with css-modules while using "next/dynamic"

6 participants