Adds inline script functionality to `next/script` for `worker` and `beforeInteractive` strategies #36364

housseindjirdeh · 2022-04-21T19:25:18Z

Adds inline script functionality to next/script for worker and beforeInteractive strategies.

fixes [Script] Inline scripts do not work with the "worker" strategy #36318
fixes next/script using beforeInteractive strategy don't work with alert #26343
fixes next/script - Can't get Google Analytics inline script to load beforeInteractive - before close of <head> tag #26591
fixes next/script using beforeInteractive strategy don't work with alert #26343
fixes Script with "beforeInteractive" strategy and innerHTML rendered incorrectly. #26240

ijjk · 2022-04-21T19:54:14Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
buildDuration	15s	14.9s	-126ms
buildDurationCached	6.1s	6.1s	-10ms
nodeModulesSize	463 MB	463 MB	⚠️ +4.05 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.459	3.461	0
/ avg req/sec	722.68	722.39	⚠️ -0.29
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.124	1.166	⚠️ +0.04
/error-in-render avg req/sec	2223.3	2143.41	⚠️ -79.89

Client Bundles (main, webpack) Overall decrease ✓

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.6 kB	28.6 kB	-7 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.3 kB	72.3 kB	-7 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	3.08 kB	3.08 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.71 kB	5.71 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.64 kB	2.64 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.3 kB	16.3 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
index.html gzip	531 B	533 B	⚠️ +2 B
link.html gzip	544 B	546 B	⚠️ +2 B
withRouter.html gzip	526 B	528 B	⚠️ +2 B
Overall change	1.6 kB	1.61 kB	⚠️ +6 B

Diffs

Diff for main-HASH.js

@@ -3198,14 +3198,12 @@
           src = _src === void 0 ? "" : _src,
           _onLoad = props.onLoad,
           onLoad = _onLoad === void 0 ? function() {} : _onLoad,
-          dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
           _strategy = props.strategy,
           strategy = _strategy === void 0 ? "afterInteractive" : _strategy,
           onError = props.onError,
           restProps = _objectWithoutProperties(props, [
             "src",
             "onLoad",
-            "dangerouslySetInnerHTML",
             "strategy",
             "onError"
           ]);

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ac58a1e29dd8158c.js"
+      src="/_next/static/chunks/main-0dbd47e46b216587.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ac58a1e29dd8158c.js"
+      src="/_next/static/chunks/main-0dbd47e46b216587.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ac58a1e29dd8158c.js"
+      src="/_next/static/chunks/main-0dbd47e46b216587.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
buildDuration	17s	17.1s	⚠️ +57ms
buildDurationCached	6s	6.1s	⚠️ +47ms
nodeModulesSize	463 MB	463 MB	⚠️ +4.05 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.473	3.463	-0.01
/ avg req/sec	719.92	721.87	+1.95
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.134	1.133	0
/error-in-render avg req/sec	2204.11	2205.76	+1.65

Client Bundles (main, webpack) Overall decrease ✓

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	29.1 kB	29.1 kB	-6 B
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.9 kB	72.9 kB	-6 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	3.08 kB	3.08 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.76 kB	5.76 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.76 kB	2.76 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.5 kB	16.5 kB	✓

Client Build Manifests

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	housseindjirdeh/next.js bug/#36318	Change
index.html gzip	529 B	529 B	✓
link.html gzip	543 B	543 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for main-HASH.js

@@ -3198,14 +3198,12 @@
           src = _src === void 0 ? "" : _src,
           _onLoad = props.onLoad,
           onLoad = _onLoad === void 0 ? function() {} : _onLoad,
-          dangerouslySetInnerHTML = props.dangerouslySetInnerHTML,
           _strategy = props.strategy,
           strategy = _strategy === void 0 ? "afterInteractive" : _strategy,
           onError = props.onError,
           restProps = _objectWithoutProperties(props, [
             "src",
             "onLoad",
-            "dangerouslySetInnerHTML",
             "strategy",
             "onError"
           ]);

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ac58a1e29dd8158c.js"
+      src="/_next/static/chunks/main-0dbd47e46b216587.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ac58a1e29dd8158c.js"
+      src="/_next/static/chunks/main-0dbd47e46b216587.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ac58a1e29dd8158c.js"
+      src="/_next/static/chunks/main-0dbd47e46b216587.js"
       defer=""
     ></script>
     <script

Commit: cb78c58

housseindjirdeh · 2022-04-25T16:02:09Z

packages/next/pages/_document.tsx

@@ -500,6 +537,44 @@ export class Head extends Component<
    ]
  }

+  getBeforeInteractiveInlineScripts() {


@janicklas-ralph Would it make more sense if I just move the src or dangerouslyInnerHtml logic I wrote in getPreNextWorkerScripts to a separate function and reuse that for beforeInteractive scripts? We wouldn't need this separate getter if we did that.

Sure. For beforeInteractive we have two functions, one for inline and one for regular scripts

Noted. As discussed, the two functions are needed here because of ordering so I'll leave it as is :)

janicklas-ralph · 2022-04-25T18:21:51Z

fixes #26343 #26591 #26343 #26240

docs/basic-features/script.md

packages/next/pages/_document.tsx

ijjk · 2022-04-26T18:23:39Z

Failing test suites

Commit: 3537e0d

yarn testheadless test/e2e/next-script-worker-strategy/index.test.ts

experimental.nextScriptWorkers: true with invalid script > Warning is shown when no src or inline script is provided

Expand output

● experimental.nextScriptWorkers: true with invalid script › Warning is shown when no src or inline script is provided

expect(received).toContain(expected) // indexOf

Expected substring: "Warning: Invalid usage of next/script. Did you forget to include a src attribute or an inline script? https://nextjs.org/docs/messages/invalid-script"
Received string:    "yarn run v1.22.18
$ /tmp/next-install-1650997391882/node_modules/.bin/next
ready - started server on 0.0.0.0:41375, url: http://localhost:41375
"

  358 |   it('Warning is shown when no src or inline script is provided', async () => {
  359 |     console.log(next.cliOutput)
> 360 |     expect(next.cliOutput).toContain(
      |                            ^
  361 |       'Warning: Invalid usage of next/script. Did you forget to include a src attribute or an inline script? https://nextjs.org/docs/messages/invalid-script'
  362 |     )
  363 |   })

  at Object.<anonymous> (e2e/next-script-worker-strategy/index.test.ts:360:28)
      at runMicrotasks (<anonymous>)

Read more about building and testing Next.js in contributing.md.

housseindjirdeh requested review from timneutkens, ijjk, shuding and huozhi as code owners April 21, 2022 19:25

ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Apr 21, 2022

housseindjirdeh force-pushed the bug/#36318 branch from 41ad854 to 63148ff Compare April 21, 2022 19:25

housseindjirdeh requested a review from janicklas-ralph April 22, 2022 03:43

housseindjirdeh marked this pull request as draft April 22, 2022 03:51

housseindjirdeh mentioned this pull request Apr 22, 2022

Making inline scripts work with the beforeInteractive strategy #36370

Closed

3 tasks

ijjk added the area: documentation label Apr 22, 2022

janicklas-ralph previously approved these changes Apr 22, 2022

View reviewed changes

housseindjirdeh commented Apr 25, 2022

View reviewed changes

housseindjirdeh marked this pull request as ready for review April 25, 2022 19:38

housseindjirdeh requested review from styfle, padmaia, leerob and balazsorban44 as code owners April 25, 2022 19:38

housseindjirdeh changed the title ~~Adds inline script functionality to next/script worker strategy~~ Adds inline script functionality to next/script for worker and beforeInteractive strategies Apr 25, 2022

styfle reviewed Apr 25, 2022

View reviewed changes

docs/basic-features/script.md Outdated Show resolved Hide resolved

housseindjirdeh and others added 3 commits April 25, 2022 17:28

adds inline script functionality to next/script worker strategy

bc7dd25

Making inline scripts work with the beforeInteractive strategy

0f7515c

updates to docs per review comments

fbc3d07

housseindjirdeh dismissed janicklas-ralph’s stale review via fbc3d07 April 25, 2022 21:29

housseindjirdeh force-pushed the bug/#36318 branch from 8c876e1 to fbc3d07 Compare April 25, 2022 21:29

styfle reviewed Apr 25, 2022

View reviewed changes

packages/next/pages/_document.tsx Outdated Show resolved Hide resolved

styfle reviewed Apr 25, 2022

View reviewed changes

packages/next/pages/_document.tsx Show resolved Hide resolved

updates per review comments

3f29ac0

housseindjirdeh force-pushed the bug/#36318 branch from 3537e0d to 3f29ac0 Compare April 26, 2022 19:16

styfle approved these changes Apr 28, 2022

View reviewed changes

ijjk approved these changes Apr 29, 2022

View reviewed changes

Merge branch 'canary' into bug/vercel#36318

cb78c58

kodiakhq bot merged commit fd2ba11 into vercel:canary Apr 29, 2022

pacocoursey mentioned this pull request May 5, 2022

v0.2 pacocoursey/next-themes#89

Merged

ijjk mentioned this pull request May 5, 2022

Unable to use dangerouslySetInnerHTML and beforeInteractive strategy in Script component #31275

Closed

NOUIY mentioned this pull request May 23, 2022

[Snyk] Upgrade next from 12.0.7 to 12.1.6 NOUIY/next.js#293

Open

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds inline script functionality to `next/script` for `worker` and `beforeInteractive` strategies #36364

Adds inline script functionality to `next/script` for `worker` and `beforeInteractive` strategies #36364

housseindjirdeh commented Apr 21, 2022 •

edited

ijjk commented Apr 21, 2022 •

edited

Diffs

Diffs

housseindjirdeh Apr 25, 2022 •

edited

janicklas-ralph Apr 25, 2022

housseindjirdeh Apr 25, 2022

janicklas-ralph commented Apr 25, 2022

ijjk commented Apr 26, 2022

Adds inline script functionality to next/script for worker and beforeInteractive strategies #36364

Adds inline script functionality to next/script for worker and beforeInteractive strategies #36364

Conversation

housseindjirdeh commented Apr 21, 2022 • edited

ijjk commented Apr 21, 2022 • edited

Stats from current PR

Diffs

Diffs

housseindjirdeh Apr 25, 2022 • edited

Choose a reason for hiding this comment

janicklas-ralph Apr 25, 2022

Choose a reason for hiding this comment

housseindjirdeh Apr 25, 2022

Choose a reason for hiding this comment

janicklas-ralph commented Apr 25, 2022

ijjk commented Apr 26, 2022

Failing test suites

Adds inline script functionality to `next/script` for `worker` and `beforeInteractive` strategies #36364

Adds inline script functionality to `next/script` for `worker` and `beforeInteractive` strategies #36364

housseindjirdeh commented Apr 21, 2022 •

edited

ijjk commented Apr 21, 2022 •

edited

housseindjirdeh Apr 25, 2022 •

edited