Warn in dev mode when stylesheets are added using next/head #34004

kara · 2022-02-04T18:41:20Z

This commit adds a development mode warning in the console
if you try to include tags in
next/head, e.g.

<Head>
  <link ref="stylesheet" href="..." />
</Head>

The warning message explains that this pattern will not
work well with Suspense/streaming and recommends using a
custom Document component instead.

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

This commit adds a development mode warning in the console if you try to include <link rel="stylesheet"> tags in next/head, e.g. ``` <Head> <link ref="stylesheet" href="..." /> </Head> ``` The warning message explains that this pattern will not work well with Suspense/streaming and recommends using a custom Document component instead.

errors/no-stylesheets-in-head-component.md

packages/next/shared/lib/head.tsx

ijjk · 2022-02-04T22:32:04Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	kara/next.js styles-warning	Change
buildDuration	14.8s	14.5s	-240ms
buildDurationCached	5.6s	6s	⚠️ +394ms
nodeModulesSize	359 MB	359 MB	⚠️ +783 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kara/next.js styles-warning	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.564	2.581	⚠️ +0.02
/ avg req/sec	974.88	968.49	⚠️ -6.39
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.322	1.351	⚠️ +0.03
/error-in-render avg req/sec	1891.44	1850.58	⚠️ -40.86

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kara/next.js styles-warning	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.4 kB	27.4 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.2 kB	71.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kara/next.js styles-warning	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	kara/next.js styles-warning	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.37 kB	2.37 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	4.94 kB	4.94 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.19 kB	2.19 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.3 kB	14.3 kB	✓

Client Build Manifests

	vercel/next.js canary	kara/next.js styles-warning	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	kara/next.js styles-warning	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for main-HASH.js

@@ -3826,8 +3826,8 @@
                 return /*#__PURE__*/ _react.default.cloneElement(c, newProps);
               }
             }
-            // TODO(kara): warn for stylesheets as well as scripts
             if (false) {
+              var srcMessage;
             }
             return /*#__PURE__*/ _react.default.cloneElement(c, {
               key: key

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fa20499f1cb366a.js"
+      src="/_next/static/chunks/main-59dd6fd6d9afacd0.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fa20499f1cb366a.js"
+      src="/_next/static/chunks/main-59dd6fd6d9afacd0.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fa20499f1cb366a.js"
+      src="/_next/static/chunks/main-59dd6fd6d9afacd0.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	kara/next.js styles-warning	Change
buildDuration	17.5s	18.3s	⚠️ +779ms
buildDurationCached	5.6s	6s	⚠️ +373ms
nodeModulesSize	359 MB	359 MB	⚠️ +783 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kara/next.js styles-warning	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.699	2.709	⚠️ +0.01
/ avg req/sec	926.26	922.77	⚠️ -3.49
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.363	1.387	⚠️ +0.02
/error-in-render avg req/sec	1833.56	1802.08	⚠️ -31.48

Client Bundles (main, webpack, commons)

	vercel/next.js canary	kara/next.js styles-warning	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	27.4 kB	27.4 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.3 kB	71.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kara/next.js styles-warning	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	kara/next.js styles-warning	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.36 kB	2.36 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	4.97 kB	4.97 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.21 kB	2.21 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.3 kB	14.3 kB	✓

Client Build Manifests

	vercel/next.js canary	kara/next.js styles-warning	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	kara/next.js styles-warning	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for main-HASH.js

@@ -3826,8 +3826,8 @@
                 return /*#__PURE__*/ _react.default.cloneElement(c, newProps);
               }
             }
-            // TODO(kara): warn for stylesheets as well as scripts
             if (false) {
+              var srcMessage;
             }
             return /*#__PURE__*/ _react.default.cloneElement(c, {
               key: key

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fa20499f1cb366a.js"
+      src="/_next/static/chunks/main-59dd6fd6d9afacd0.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fa20499f1cb366a.js"
+      src="/_next/static/chunks/main-59dd6fd6d9afacd0.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-1fa20499f1cb366a.js"
+      src="/_next/static/chunks/main-59dd6fd6d9afacd0.js"
       defer=""
     ></script>
     <script

Commit: 06abeb8

…4004) This commit adds a development mode warning in the console if you try to include <link rel="stylesheet"> tags in next/head, e.g. ``` <Head> <link ref="stylesheet" href="..." /> </Head> ``` The warning message explains that this pattern will not work well with Suspense/streaming and recommends using a custom Document component instead. ## Feature - [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [x] Errors have helpful link attached, see `contributing.md` Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>

x-ref: #34021 , #34004 Only log each warning once and only trigger in concurrent mode ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Errors have helpful link attached, see `contributing.md`

kara requested review from huozhi, ijjk, shuding and timneutkens as code owners February 4, 2022 18:41

ijjk added area: documentation created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Feb 4, 2022

huozhi reviewed Feb 4, 2022

View reviewed changes

errors/no-stylesheets-in-head-component.md Outdated Show resolved Hide resolved

fixup! Warn in dev mode when stylesheets are added using next/head

ab96fdb

This comment has been minimized.

Sign in to view

ijjk reviewed Feb 4, 2022

View reviewed changes

packages/next/shared/lib/head.tsx Outdated Show resolved Hide resolved

fixup! Warn in dev mode when stylesheets are added using next/head

0592962

huozhi previously approved these changes Feb 4, 2022

View reviewed changes

Merge branch 'canary' into styles-warning

d156778

This comment has been minimized.

Sign in to view

lint-fix

4fbd885

ijjk dismissed huozhi’s stale review via 4fbd885 February 4, 2022 22:15

Merge branch 'canary' into styles-warning

06abeb8

ijjk approved these changes Feb 4, 2022

View reviewed changes

kodiakhq bot merged commit 24fe279 into vercel:canary Feb 4, 2022

huozhi mentioned this pull request Feb 28, 2022

Only warn styles and scripts under next head in concurrent mode #34897

Merged

3 tasks

github-actions bot locked as resolved and limited conversation to collaborators Mar 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Warn in dev mode when stylesheets are added using next/head #34004

Warn in dev mode when stylesheets are added using next/head #34004

kara commented Feb 4, 2022

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 4, 2022

Diffs

Diffs

Warn in dev mode when stylesheets are added using next/head #34004

Warn in dev mode when stylesheets are added using next/head #34004

Conversation

kara commented Feb 4, 2022

Feature

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 4, 2022

Stats from current PR

Diffs

Diffs