Fix styled-jsx import error with yarn with PNP enabled; Close: #10149 #21320

jordinl · 2021-01-19T09:04:12Z

Fix Your application tried to access styled-jsx, but it isn't declared in your dependencies error thrown when using yarn 2 with PNP enabled (which is the default).

#11224 describes the current behavior and #10149 explains the cause and a possible solution. Also #9325 explains why styled-jsx can't be added as a dependency either.

The solution is to:

Expose styled-jsx/style as next/styled-jsx/style.
Pass styleModule: 'next/styled-jsx/style' to styled-jsx so it injects an import with that path on the pages, instead of using styled-jsx/style.

Notes:

I've added a test case for with-styled-jsx to test-pnp.sh. Note that, in order for the tests to fail, they must be moved outside of the next.js directory, otherwise they give a false negative.
For completeness I've also exposed styled-jsx/css as next/styled-jsx/css. Not sure if server and macro should also be exposed, probably yes?
Probably it should be documented somewhere that next/styled-jsx/css should be imported instead of styled-jsx/css.

ijjk · 2021-01-19T09:15:58Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	10.4s	10.6s	⚠️ +221ms
nodeModulesSize	77.6 MB	77.6 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.129	2.085	-0.04
/ avg req/sec	1174.45	1199	+24.55
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.35	1.322	-0.03
/error-in-render avg req/sec	1851.41	1891.22	+39.81

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9e3e4e6..2023.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	614 B	614 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	12.3s	12.4s	⚠️ +70ms
nodeModulesSize	77.6 MB	77.6 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9e3e4e6..2023.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.18 MB	5.18 MB	✓

Webpack 5 Mode (Increase detected ⚠️)

General

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	13.1s	13s	-55ms
nodeModulesSize	77.6 MB	77.6 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.054	2.097	⚠️ +0.04
/ avg req/sec	1217.43	1192.09	⚠️ -25.34
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.35	1.323	-0.03
/error-in-render avg req/sec	1851.87	1889.9	+38.03

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
597-3bd7d6bd..868b.js gzip	13 kB	13 kB	✓
778-d412f8e7..3ee1.js gzip	6.56 kB	6.56 kB	✓
838-adcbad39..6e83.js gzip	31.1 kB	31.1 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-6a6a792..6877.js gzip	96 B	96 B	✓
webpack-e302..54e9.js gzip	954 B	954 B	✓
Overall change	91 kB	91 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-a0..538c.js gzip	88 B	88 B	✓
Overall change	88 B	88 B	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	299 B	299 B	✓
Overall change	299 B	299 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	585 B	585 B	✓
link.html gzip	592 B	592 B	✓
withRouter.html gzip	581 B	581 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: ed31e67

merceyz · 2021-01-19T09:56:04Z

test-pnp.sh

-  mkdir -p "./e2e-tests/$testCase"
-  cp -r "./examples/$testCase/." "./e2e-tests/$testCase"
-  cd "./e2e-tests/$testCase"
+  mkdir -p "/tmp/e2e-tests/$testCase"


This isn't Windows friendly, should use something like mktemp to get a temp folder

@merceyz changed to use mktemp -d

ijjk · 2021-01-19T12:04:26Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	10.4s	10.5s	⚠️ +112ms
nodeModulesSize	77.6 MB	77.6 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.08	2.005	-0.08
/ avg req/sec	1201.82	1246.84	+45.02
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.361	1.302	-0.06
/error-in-render avg req/sec	1837.22	1920.16	+82.94

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9e3e4e6..2023.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	614 B	614 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	12.5s	12.4s	-159ms
nodeModulesSize	77.6 MB	77.6 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9e3e4e6..2023.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.18 MB	5.18 MB	✓

Webpack 5 Mode (Decrease detected ✓)

General

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	13s	12.8s	-171ms
nodeModulesSize	77.6 MB	77.6 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.037	2.078	⚠️ +0.04
/ avg req/sec	1227.05	1203.24	⚠️ -23.81
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.3	1.293	-0.01
/error-in-render avg req/sec	1923.45	1933.07	+9.62

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
597-3bd7d6bd..868b.js gzip	13 kB	13 kB	✓
778-d412f8e7..3ee1.js gzip	6.56 kB	6.56 kB	✓
838-adcbad39..6e83.js gzip	31.1 kB	31.1 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-6a6a792..6877.js gzip	96 B	96 B	✓
webpack-e302..54e9.js gzip	954 B	954 B	✓
Overall change	91 kB	91 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-a0..538c.js gzip	88 B	88 B	✓
Overall change	88 B	88 B	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	299 B	299 B	✓
Overall change	299 B	299 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	585 B	585 B	✓
link.html gzip	592 B	592 B	✓
withRouter.html gzip	581 B	581 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: 633985c

merceyz · 2021-01-19T12:15:39Z

test-pnp.sh


 for testCase in "${testCases[@]}"
 do
-  cd $initialDir
+  testTarget=$(mktemp -d)


Suggested change

testTarget=$(mktemp -d)

testTarget=$(mktemp -d next-e2e-XXXX)

Makes them easier to clean up

@merceyz this creates the temp folder in the current directory unfortunately. I think you want mktemp -d -t next-e2e instead, but the -t option seems deprecated in newer versions, so I'm not sure if it should be used.

I have a slightly improved version that creates the temp dir only once and then creates subfolders for each test case instead. Also it has a trap to remove the temp dir on exit. Let me know if you want me to push that.

+tempDir=$(mktemp -d) +trap 'rm -rf -- "$tempDir"' EXIT for testCase in "${testCases[@]}" do - testTarget=$(mktemp -d) + testTarget="$tempDir/$testCase" + + mkdir -p "$testTarget"

ijjk · 2021-01-19T16:16:36Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	8.9s	8.5s	-374ms
nodeModulesSize	77.6 MB	77.6 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.733	1.713	-0.02
/ avg req/sec	1442.45	1459.01	+16.56
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.095	1.119	⚠️ +0.02
/error-in-render avg req/sec	2283.73	2234.14	⚠️ -49.59

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9e3e4e6..2023.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	614 B	614 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	10.2s	10.3s	⚠️ +104ms
nodeModulesSize	77.6 MB	77.6 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9e3e4e6..2023.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.18 MB	5.18 MB	✓

Webpack 5 Mode (Decrease detected ✓)

General

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	10.7s	10.9s	⚠️ +251ms
nodeModulesSize	77.6 MB	77.6 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.68	1.75	⚠️ +0.07
/ avg req/sec	1487.69	1428.73	⚠️ -58.96
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.093	1.097	0
/error-in-render avg req/sec	2287.93	2278.94	⚠️ -8.99

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
597-3bd7d6bd..868b.js gzip	13 kB	13 kB	✓
778-d412f8e7..3ee1.js gzip	6.56 kB	6.56 kB	✓
838-adcbad39..6e83.js gzip	31.1 kB	31.1 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-6a6a792..6877.js gzip	96 B	96 B	✓
webpack-e302..54e9.js gzip	954 B	954 B	✓
Overall change	91 kB	91 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-a0..538c.js gzip	88 B	88 B	✓
Overall change	88 B	88 B	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	299 B	299 B	✓
Overall change	299 B	299 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	585 B	585 B	✓
link.html gzip	592 B	592 B	✓
withRouter.html gzip	581 B	581 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: 6f4ae59

ijjk · 2021-01-19T17:09:29Z

Failing test suites

Commit: 1c9ad4d

test/integration/app-document-style-fragment/test/index.test.js

Custom Document Fragment Styles > correctly adds styles from fragment styles key

Expand output

● Custom Document Fragment Styles › correctly adds styles from fragment styles key

expect(received).toMatch(expected)

Expected pattern: /font-size:(.*|)16\.4px/
Received string:  "html { background: hotpink; }"

  37 |     const styles = $('style').text()
  38 |     expect(styles).toMatch(/background:(.*|)hotpink/)
> 39 |     expect(styles).toMatch(/font-size:(.*|)16\.4px/)
     |                    ^
  40 |   })
  41 | })
  42 | 

  at Object.<anonymous> (integration/app-document-style-fragment/test/index.test.js:39:20)

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

expect(received).toMatch(expected)

Expected pattern: /font-size:(.*|)16\.4px/
Received string:  "html{background:#ff69b4}"

  38 |     const styles = $('style[amp-custom]').text()
  39 |     expect(styles).toMatch(/background:(.*|)#ff69b4/)
> 40 |     expect(styles).toMatch(/font-size:(.*|)16\.4px/)
     |                    ^
  41 |   })
  42 | })
  43 | 

  at Object.<anonymous> (integration/amphtml-fragment-style/test/index.test.js:40:20)

test/integration/amphtml/test/index.test.js

AMP Usage > production mode > combined styles > should combine style tags

Expand output

● AMP Usage › production mode › combined styles › should combine style tags

expect(received).toMatch(expected)

Expected pattern: /div.jsx-\d+{color:red}span.jsx-\d+{color:#00f}body{background-color:green}/
Received string:  ""

  232 |         const html = await renderViaHTTP(appPort, '/styled?amp=1')
  233 |         const $ = cheerio.load(html)
> 234 |         expect($('style[amp-custom]').first().text()).toMatch(
      |                                                       ^
  235 |           /div.jsx-\d+{color:red}span.jsx-\d+{color:#00f}body{background-color:green}/
  236 |         )
  237 |       })

  at Object.<anonymous> (integration/amphtml/test/index.test.js:234:55)

test/integration/basepath/test/index.test.js

basePath development > Hot Module Reloading > editing a page > should update styles in a dynamic component correctly
multi-level basePath development > Hot Module Reloading > editing a page > should update styles in a dynamic component correctly

Expand output

● basePath development › Hot Module Reloading › editing a page › should update styles in a dynamic component correctly

expect(received).toBeTruthy()

Received: false

  299 |               `${basePath}/hmr/style-dynamic-component`
  300 |             )
> 301 |             expect(initialHtml.includes('100px')).toBeTruthy()
      |                                                   ^
  302 | 
  303 |             const $initialHtml = cheerio.load(initialHtml)
  304 |             const initialServerClassName = $initialHtml(

  at Object.<anonymous> (integration/basepath/test/index.test.js:301:51)

● multi-level basePath development › Hot Module Reloading › editing a page › should update styles in a dynamic component correctly

expect(received).toBeTruthy()

Received: false

  299 |               `${basePath}/hmr/style-dynamic-component`
  300 |             )
> 301 |             expect(initialHtml.includes('100px')).toBeTruthy()
      |                                                   ^
  302 | 
  303 |             const $initialHtml = cheerio.load(initialHtml)
  304 |             const initialServerClassName = $initialHtml(

  at Object.<anonymous> (integration/basepath/test/index.test.js:301:51)
      at runMicrotasks (<anonymous>)

ijjk · 2021-01-19T17:14:43Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	9.1s	9s	-193ms
nodeModulesSize	77.6 MB	77.6 MB	⚠️ +166 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.77	1.748	-0.02
/ avg req/sec	1412.7	1429.86	+17.16
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.155	1.102	-0.05
/error-in-render avg req/sec	2164.04	2269.21	+105.17

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9e3e4e6..2023.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	614 B	614 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	10.8s	10.5s	-270ms
nodeModulesSize	77.6 MB	77.6 MB	⚠️ +166 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9e3e4e6..2023.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.18 MB	5.18 MB	✓

Webpack 5 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	11s	11.2s	⚠️ +196ms
nodeModulesSize	77.6 MB	77.6 MB	⚠️ +166 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.77	1.8	⚠️ +0.03
/ avg req/sec	1412.79	1388.9	⚠️ -23.89
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.13	1.147	⚠️ +0.02
/error-in-render avg req/sec	2212.53	2179.48	⚠️ -33.05

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
597-3bd7d6bd..868b.js gzip	13 kB	13 kB	✓
778-d412f8e7..3ee1.js gzip	6.56 kB	6.56 kB	✓
838-adcbad39..6e83.js gzip	31.1 kB	31.1 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-6a6a792..6877.js gzip	96 B	96 B	✓
webpack-e302..54e9.js gzip	954 B	954 B	✓
Overall change	91 kB	91 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-a0..538c.js gzip	88 B	88 B	✓
Overall change	88 B	88 B	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	299 B	299 B	✓
Overall change	299 B	299 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	585 B	585 B	✓
link.html gzip	592 B	592 B	✓
withRouter.html gzip	581 B	581 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: 1c9ad4d

This reverts commit 1c9ad4d.

ijjk · 2021-01-21T09:43:06Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	11.1s	11.2s	⚠️ +147ms
nodeModulesSize	73.3 MB	73.3 MB	⚠️ +215 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.269	2.118	-0.15
/ avg req/sec	1101.57	1180.2	+78.63
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.547	1.53	-0.02
/error-in-render avg req/sec	1615.63	1634.3	+18.67

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-7173c7a..5604.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	616 B	616 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	609 B	609 B	✓
Overall change	1.85 kB	1.85 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	13.1s	13.1s	-63ms
nodeModulesSize	73.3 MB	73.3 MB	⚠️ +215 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-7173c7a..5604.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.19 MB	5.19 MB	✓

Webpack 5 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	13.5s	13.4s	-102ms
nodeModulesSize	73.3 MB	73.3 MB	⚠️ +215 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.256	2.242	-0.01
/ avg req/sec	1107.93	1114.89	+6.96
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.617	1.55	-0.07
/error-in-render avg req/sec	1545.89	1613.23	+67.34

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
597-3bd7d6bd..868b.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-23983e6..e59f.js gzip	6.58 kB	6.58 kB	✓
webpack-e29b..5311.js gzip	954 B	954 B	✓
Overall change	59.8 kB	59.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
polyfills-79..a497.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

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

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	299 B	299 B	✓
Overall change	299 B	299 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	585 B	585 B	✓
link.html gzip	592 B	592 B	✓
withRouter.html gzip	579 B	579 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: f530241

jordinl · 2021-01-25T17:17:27Z

@Timer @lfades @timneutkens @ijjk Could anybody please review? It would allow use to use Yarn 2 with PNP

merceyz · 2021-01-25T17:52:51Z

I would prefer the title to be changed as it's saying it's an issue with Yarn 2 which it isn't, this is an issue unrelated to Yarn 2
https://yarnpkg.com/advanced/rulebook#packages-should-only-ever-require-what-they-formally-list-in-their-dependencies

NIT: Yarn 2 !== Yarn PnP

ijjk · 2021-01-26T11:08:04Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	10.4s	10.3s	-47ms
nodeModulesSize	74.9 MB	74.9 MB	⚠️ +215 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.082	2.066	-0.02
/ avg req/sec	1200.91	1210.19	+9.28
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.284	1.269	-0.02
/error-in-render avg req/sec	1947.36	1970.09	+22.73

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..38ed.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	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	cncf/next.js styled-jsx-yarn-2	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	614 B	614 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	12.5s	12.5s	⚠️ +14ms
nodeModulesSize	74.9 MB	74.9 MB	⚠️ +215 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..38ed.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	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	cncf/next.js styled-jsx-yarn-2	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.19 MB	5.19 MB	✓

Webpack 5 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	12.3s	12.5s	⚠️ +225ms
nodeModulesSize	74.9 MB	74.9 MB	⚠️ +215 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.02	1.984	-0.04
/ avg req/sec	1237.85	1260.36	+22.51
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.285	1.224	-0.06
/error-in-render avg req/sec	1945.47	2043.19	+97.72

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
597-c48889ef..1870.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	6.58 kB	6.58 kB	✓
webpack-HASH.js gzip	954 B	954 B	✓
Overall change	59.8 kB	59.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	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	cncf/next.js styled-jsx-yarn-2	Change
_app-a5b2e84..33cf.js gzip	1.26 kB	1.26 kB	✓
_error-6f1f9..5577.js gzip	3.38 kB	3.38 kB	✓
hooks-725de8..0a15.js gzip	904 B	904 B	✓
index-939503..6e1c.js gzip	232 B	232 B	✓
link-e0cc871..fdbb.js gzip	1.63 kB	1.63 kB	✓
routerDirect..9360.js gzip	308 B	308 B	✓
withRouter-6..44ec.js gzip	304 B	304 B	✓
Overall change	8.02 kB	8.02 kB	✓

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	299 B	299 B	✓
Overall change	299 B	299 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	587 B	587 B	✓
link.html gzip	591 B	591 B	✓
withRouter.html gzip	580 B	580 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: 7123455

timneutkens · 2021-01-26T11:34:25Z

packages/next/build/babel/preset.ts

-  if (!options) {
-    return {}
-  }
+  const baseOptions = { styleModule: 'next/styled-jsx/style', ...options }


This can just be a require.resolve it seems.

Suggested change

const baseOptions = { styleModule: 'next/styled-jsx/style', ...options }

const baseOptions = { styleModule: require.resolve('styled-jsx/style'), ...options }

I agree but it needs to be behind a babel-loader check - ref #19538

@timneutkens tried that 1c9ad4d. But then something else broke, it seems that the change caused CSS from styled-jsx not to be generated. Not sure if this is related to the issue @merceyz mentions

Also note that even if we could use require.resolve('styled-jsx/style'), it would still be necessary to export next/styled-jsx, given that the project that depends on next.js won't be able to import styled-jsx directly.

ijjk · 2021-01-26T13:26:52Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	8.6s	8.6s	-20ms
nodeModulesSize	74.9 MB	74.9 MB	⚠️ +215 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.683	1.799	⚠️ +0.12
/ avg req/sec	1485.62	1389.79	⚠️ -95.83
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.116	1.151	⚠️ +0.03
/error-in-render avg req/sec	2240.28	2172.82	⚠️ -67.46

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..38ed.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	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	cncf/next.js styled-jsx-yarn-2	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	614 B	614 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	10.4s	10.3s	-103ms
nodeModulesSize	74.9 MB	74.9 MB	⚠️ +215 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
677f882d2ed8..38ed.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	6.63 kB	6.63 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	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	cncf/next.js styled-jsx-yarn-2	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.19 MB	5.19 MB	✓

Webpack 5 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
buildDuration	10.4s	10.5s	⚠️ +59ms
nodeModulesSize	74.9 MB	74.9 MB	⚠️ +215 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.728	1.601	-0.13
/ avg req/sec	1446.54	1561.19	+114.65
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.171	1.156	-0.02
/error-in-render avg req/sec	2135.61	2161.86	+26.25

Client Bundles (main, webpack, commons)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
597-c48889ef..1870.js gzip	13 kB	13 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	6.58 kB	6.58 kB	✓
webpack-HASH.js gzip	954 B	954 B	✓
Overall change	59.8 kB	59.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	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	cncf/next.js styled-jsx-yarn-2	Change
_app-a5b2e84..33cf.js gzip	1.26 kB	1.26 kB	✓
_error-6f1f9..5577.js gzip	3.38 kB	3.38 kB	✓
hooks-725de8..0a15.js gzip	904 B	904 B	✓
index-939503..6e1c.js gzip	232 B	232 B	✓
link-e0cc871..fdbb.js gzip	1.63 kB	1.63 kB	✓
routerDirect..9360.js gzip	308 B	308 B	✓
withRouter-6..44ec.js gzip	304 B	304 B	✓
Overall change	8.02 kB	8.02 kB	✓

Client Build Manifests

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
_buildManifest.js gzip	299 B	299 B	✓
Overall change	299 B	299 B	✓

Rendered Page Sizes

	vercel/next.js canary	cncf/next.js styled-jsx-yarn-2	Change
index.html gzip	587 B	587 B	✓
link.html gzip	591 B	591 B	✓
withRouter.html gzip	580 B	580 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: 5d55232

jordinl · 2021-02-02T12:46:53Z

@merceyz @timneutkens Is there anything I can do to move this PR forward?

When using pnpm / yarnPnP to install next.js, styled-jsx as dependency is not hoisted in the top level node_modules, it will fail when nodejs is trying to resolve `styled-jsx/style` from project directory. Re-export `styled-jsx/style` in next.js and let swc/babel plugin compile the import path it to `next/dist/shared/lib/styled-jsx` Resolves #10149 Closes #21320 Closes #9325 Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>

Add failing e2e test for styled-jsx

ed31e67

jordinl mentioned this pull request Jan 19, 2021

The styled-jsx integration relies on hoisting #10149

Closed

merceyz reviewed Jan 19, 2021

View reviewed changes

Use mktemp to generate temp directories for test cases

633985c

merceyz reviewed Jan 19, 2021

View reviewed changes

Only create one temp directory and add trap to clean it up

6f4ae59

Pass styleModule to style-jsx babel preset

1c9ad4d

ijjk added the type: next label Jan 19, 2021

jordinl added 2 commits January 20, 2021 15:24

Revert "Pass styleModule to style-jsx babel preset"

ea784b4

This reverts commit 1c9ad4d.

Expose styled-jsx dependency via next/styled-jsx

f530241

jordinl changed the title ~~Add e2e test for styled-jsx~~ Fix styled-jsx import error with yarn 2; Close: #10149 Jan 21, 2021

jordinl marked this pull request as ready for review January 21, 2021 10:33

jordinl requested review from ijjk, lfades, Timer and timneutkens as code owners January 21, 2021 10:33

Merge branch 'canary' into styled-jsx-yarn-2

7123455

timneutkens reviewed Jan 26, 2021

View reviewed changes

jordinl changed the title ~~Fix styled-jsx import error with yarn 2; Close: #10149~~ Fix styled-jsx import error with yarn with PNP enabled; Close: #10149 Jan 26, 2021

Merge branch 'canary' into styled-jsx-yarn-2

5d55232

jordinl requested review from huozhi, padmaia, shuding and styfle as code owners October 26, 2021 15:29

Timer removed request for Timer and lfades December 10, 2021 02:57

huozhi mentioned this pull request Apr 30, 2022

Reexports styled-jsx JSXStyle in nextjs #36585

Merged

kodiakhq bot closed this in #36585 Apr 30, 2022

github-actions bot locked as resolved and limited conversation to collaborators May 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix styled-jsx import error with yarn with PNP enabled; Close: #10149 #21320

Fix styled-jsx import error with yarn with PNP enabled; Close: #10149 #21320

jordinl commented Jan 19, 2021 •

edited

ijjk commented Jan 19, 2021

Diffs

merceyz Jan 19, 2021 •

edited

jordinl Jan 19, 2021

ijjk commented Jan 19, 2021

Diffs

merceyz Jan 19, 2021

jordinl Jan 19, 2021

ijjk commented Jan 19, 2021

Diffs

ijjk commented Jan 19, 2021 •

edited

ijjk commented Jan 19, 2021

Diffs

ijjk commented Jan 21, 2021

Diffs

jordinl commented Jan 25, 2021

merceyz commented Jan 25, 2021

ijjk commented Jan 26, 2021

Diffs

timneutkens Jan 26, 2021

merceyz Jan 26, 2021 •

edited

jordinl Jan 26, 2021

jordinl Jan 26, 2021

ijjk commented Jan 26, 2021

Diffs

jordinl commented Feb 2, 2021

	testTarget=$(mktemp -d)
	testTarget=$(mktemp -d next-e2e-XXXX)

	const baseOptions = { styleModule: 'next/styled-jsx/style', ...options }
	const baseOptions = { styleModule: require.resolve('styled-jsx/style'), ...options }

Fix styled-jsx import error with yarn with PNP enabled; Close: #10149 #21320

Fix styled-jsx import error with yarn with PNP enabled; Close: #10149 #21320

Conversation

jordinl commented Jan 19, 2021 • edited

ijjk commented Jan 19, 2021

Stats from current PR

Diffs

merceyz Jan 19, 2021 • edited

Choose a reason for hiding this comment

jordinl Jan 19, 2021

Choose a reason for hiding this comment

ijjk commented Jan 19, 2021

Stats from current PR

Diffs

merceyz Jan 19, 2021

Choose a reason for hiding this comment

jordinl Jan 19, 2021

Choose a reason for hiding this comment

ijjk commented Jan 19, 2021

Stats from current PR

Diffs

ijjk commented Jan 19, 2021 • edited

Failing test suites

ijjk commented Jan 19, 2021

Stats from current PR

Diffs

ijjk commented Jan 21, 2021

Stats from current PR

Diffs

jordinl commented Jan 25, 2021

merceyz commented Jan 25, 2021

ijjk commented Jan 26, 2021

Stats from current PR

Diffs

timneutkens Jan 26, 2021

Choose a reason for hiding this comment

merceyz Jan 26, 2021 • edited

Choose a reason for hiding this comment

jordinl Jan 26, 2021

Choose a reason for hiding this comment

jordinl Jan 26, 2021

Choose a reason for hiding this comment

ijjk commented Jan 26, 2021

Stats from current PR

Diffs

jordinl commented Feb 2, 2021

jordinl commented Jan 19, 2021 •

edited

merceyz Jan 19, 2021 •

edited

ijjk commented Jan 19, 2021 •

edited

merceyz Jan 26, 2021 •

edited