Fix inline scripts being duplicated when used with `next/script` component #27218

janicklas-ralph · 2021-07-16T02:47:46Z

Fixes inline scripts being duplicated when used with next/script component

Bug

fixes next/script in _app.js creates duplicate script tags in document after moving between pages #26860
Integration tests added

Documentation / Examples

Updated docs to indicate that id is needed for inline scripts

docs/basic-features/script.md

Co-authored-by: Lee Robinson <me@leerob.io>

ijjk · 2021-07-16T18:30:26Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
buildDuration	15s	14.9s	-85ms
buildDurationCached	3.4s	3.3s	-114ms
nodeModulesSize	49.5 MB	49.5 MB	⚠️ +225 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.512	2.606	⚠️ +0.09
/ avg req/sec	995.39	959.28	⚠️ -36.11
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.532	1.531	0
/error-in-render avg req/sec	1632.32	1632.94	+0.62

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
359.HASH.js gzip	2.96 kB	2.96 kB	✓
745.HASH.js gzip	180 B	180 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	20.9 kB	20.9 kB	⚠️ +4 B
webpack-HASH.js gzip	1.53 kB	1.53 kB	✓
Overall change	67.8 kB	67.8 kB	⚠️ +4 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script	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	janicklas-ralph/next.js script	Change
_app-HASH.js gzip	803 B	803 B	✓
_error-HASH.js gzip	3.06 kB	3.06 kB	✓
amp-HASH.js gzip	554 B	554 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.52 kB	2.52 kB	✓
head-HASH.js gzip	2.28 kB	2.28 kB	✓
hooks-HASH.js gzip	903 B	903 B	✓
image-HASH.js gzip	5.6 kB	5.6 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	19.1 kB	19.1 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_buildManifest.js gzip	489 B	489 B	✓
Overall change	489 B	489 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
index.html gzip	530 B	530 B	✓
link.html gzip	543 B	544 B	⚠️ +1 B
withRouter.html gzip	524 B	524 B	✓
Overall change	1.6 kB	1.6 kB	⚠️ +1 B

Diffs

Diff for main-HASH.js

@@ -3099,15 +3099,16 @@
           _props$children = props.children,
           children = _props$children === void 0 ? "" : _props$children,
           onError = props.onError;
-        var cacheKey = id || src;
+        var cacheKey = id || src; // Script has already loaded
 
-        if (ScriptCache.has(src)) {
-          if (!LoadCache.has(cacheKey)) {
-            LoadCache.add(cacheKey); // Execute onLoad since the script loading has begun
+        if (cacheKey && LoadCache.has(cacheKey)) {
+          return;
+        } // Contents of this script are already loading/loaded
 
-            ScriptCache.get(src).then(onLoad, onError);
-          }
+        if (ScriptCache.has(src)) {
+          LoadCache.add(cacheKey); // Execute onLoad since the script loading has begun
 
+          ScriptCache.get(src).then(onLoad, onError);
           return;
         }
 
@@ -3131,9 +3132,10 @@
 
         if (src) {
           ScriptCache.set(src, loadPromise);
-          LoadCache.add(cacheKey);
         }
 
+        LoadCache.add(cacheKey);
+
         if (dangerouslySetInnerHTML) {
           el.innerHTML = dangerouslySetInnerHTML.__html || "";
         } else if (children) {

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-3c34c120970fcdede460.js"
+      src="/_next/static/chunks/main-57b867641a72fe856ff0.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-3c34c120970fcdede460.js"
+      src="/_next/static/chunks/main-57b867641a72fe856ff0.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-3c34c120970fcdede460.js"
+      src="/_next/static/chunks/main-57b867641a72fe856ff0.js"
       defer=""
     ></script>
     <script

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
buildDuration	12s	12.1s	⚠️ +190ms
buildDurationCached	4.6s	4.6s	✓
nodeModulesSize	49.5 MB	49.5 MB	⚠️ +225 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.642	2.578	-0.06
/ avg req/sec	946.32	969.72	+23.4
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.502	1.622	⚠️ +0.12
/error-in-render avg req/sec	1664.6	1541.47	⚠️ -123.13

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
17.HASH.js gzip	2.98 kB	2.98 kB	✓
18.HASH.js gzip	185 B	185 B	✓
677f882d2ed8..HASH.js gzip	13.7 kB	13.7 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	8.39 kB	8.4 kB	⚠️ +5 B
webpack-HASH.js gzip	1.22 kB	1.22 kB	✓
Overall change	68.4 kB	68.4 kB	⚠️ +5 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_app-HASH.js gzip	791 B	791 B	✓
_error-HASH.js gzip	3.76 kB	3.76 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	2.97 kB	2.97 kB	✓
hooks-HASH.js gzip	911 B	911 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	3.02 kB	3.02 kB	⚠️ +5 B
withRouter-HASH.js gzip	294 B	294 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	17.6 kB	17.6 kB	⚠️ +5 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_buildManifest.js gzip	499 B	500 B	⚠️ +1 B
Overall change	499 B	500 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	janicklas-ralph/next.js script	Change
index.html gzip	577 B	577 B	✓
link.html gzip	588 B	588 B	✓
withRouter.html gzip	569 B	569 B	✓
Overall change	1.73 kB	1.73 kB	✓

Diffs

Diff for _buildManifest.js

@@ -21,7 +21,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-6969fe7df87ea0f513b7.js"
   ],
   "/script": [
-    "static\u002Fchunks\u002Fpages\u002Fscript-7641f9178bcd404d86d5.js"
+    "static\u002Fchunks\u002Fpages\u002Fscript-bfb4064637339cad55b9.js"
   ],
   "/withRouter": [
     "static\u002Fchunks\u002Fpages\u002FwithRouter-d324ed0c40e148c2c3fc.js"

Diff for script-HASH.js

@@ -112,15 +112,16 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           _props$children = props.children,
           children = _props$children === void 0 ? "" : _props$children,
           onError = props.onError;
-        var cacheKey = id || src;
+        var cacheKey = id || src; // Script has already loaded
 
-        if (ScriptCache.has(src)) {
-          if (!LoadCache.has(cacheKey)) {
-            LoadCache.add(cacheKey); // Execute onLoad since the script loading has begun
+        if (cacheKey && LoadCache.has(cacheKey)) {
+          return;
+        } // Contents of this script are already loading/loaded
 
-            ScriptCache.get(src).then(onLoad, onError);
-          }
+        if (ScriptCache.has(src)) {
+          LoadCache.add(cacheKey); // Execute onLoad since the script loading has begun
 
+          ScriptCache.get(src).then(onLoad, onError);
           return;
         }
 
@@ -144,9 +145,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
         if (src) {
           ScriptCache.set(src, loadPromise);
-          LoadCache.add(cacheKey);
         }
 
+        LoadCache.add(cacheKey);
+
         if (dangerouslySetInnerHTML) {
           el.innerHTML = dangerouslySetInnerHTML.__html || "";
         } else if (children) {

Diff for main-HASH.js

@@ -496,15 +496,16 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
           _props$children = props.children,
           children = _props$children === void 0 ? "" : _props$children,
           onError = props.onError;
-        var cacheKey = id || src;
+        var cacheKey = id || src; // Script has already loaded
 
-        if (ScriptCache.has(src)) {
-          if (!LoadCache.has(cacheKey)) {
-            LoadCache.add(cacheKey); // Execute onLoad since the script loading has begun
+        if (cacheKey && LoadCache.has(cacheKey)) {
+          return;
+        } // Contents of this script are already loading/loaded
 
-            ScriptCache.get(src).then(onLoad, onError);
-          }
+        if (ScriptCache.has(src)) {
+          LoadCache.add(cacheKey); // Execute onLoad since the script loading has begun
 
+          ScriptCache.get(src).then(onLoad, onError);
           return;
         }
 
@@ -528,9 +529,10 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
 
         if (src) {
           ScriptCache.set(src, loadPromise);
-          LoadCache.add(cacheKey);
         }
 
+        LoadCache.add(cacheKey);
+
         if (dangerouslySetInnerHTML) {
           el.innerHTML = dangerouslySetInnerHTML.__html || "";
         } else if (children) {

Diff for index.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-bf9e28f6038a7d635fc1.js"
+      src="/_next/static/chunks/main-c62f532130943daf2b09.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-bf9e28f6038a7d635fc1.js"
+      src="/_next/static/chunks/main-c62f532130943daf2b09.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -23,7 +23,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-bf9e28f6038a7d635fc1.js"
+      src="/_next/static/chunks/main-c62f532130943daf2b09.js"
       defer=""
     ></script>
     <script

Commit: 7869c93

…onent (vercel#27218) Fixes inline scripts being duplicated when used with `next/script` component ## Bug - [x] fixes vercel#26860 - [x] Integration tests added ## Documentation / Examples Updated docs to indicate that `id` is needed for inline scripts

Fix vercel#26860

d40b511

janicklas-ralph requested review from huozhi, ijjk, leerob, lfades, padmaia, shuding, styfle and timneutkens as code owners July 16, 2021 02:47

ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: documentation type: next labels Jul 16, 2021

leerob reviewed Jul 16, 2021

View reviewed changes

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

This comment has been minimized.

Sign in to view

styfle changed the title ~~Fix #26860~~ Fixes inline scripts being duplicated when used with next/script component Jul 16, 2021

styfle changed the title ~~Fixes inline scripts being duplicated when used with next/script component~~ Fix inline scripts being duplicated when used with next/script component Jul 16, 2021

Update docs/basic-features/script.md

300e04c

Co-authored-by: Lee Robinson <me@leerob.io>

This comment has been minimized.

Sign in to view

timneutkens approved these changes Jul 16, 2021

View reviewed changes

kodiakhq bot added 2 commits July 16, 2021 18:18

Merge branch 'canary' into script

6fa6b3a

Merge branch 'canary' into script

7869c93

kodiakhq bot merged commit dda23f5 into vercel:canary Jul 16, 2021

resir014 mentioned this pull request Jul 26, 2021

perf: improve GTM initialisation kawalcovid19/wargabantuwarga.com#452

Merged

morganfeeney mentioned this pull request Aug 4, 2021

[with-google-analytics] Should Use next/script component #26507

Closed

janicklas-ralph deleted the script branch August 9, 2021 17:41

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix inline scripts being duplicated when used with `next/script` component #27218

Fix inline scripts being duplicated when used with `next/script` component #27218

janicklas-ralph commented Jul 16, 2021

This comment has been minimized.

This comment has been minimized.

ijjk commented Jul 16, 2021

Diffs

Diffs

Fix inline scripts being duplicated when used with next/script component #27218

Fix inline scripts being duplicated when used with next/script component #27218

Conversation

janicklas-ralph commented Jul 16, 2021

Bug

Documentation / Examples

This comment has been minimized.

This comment has been minimized.

ijjk commented Jul 16, 2021

Stats from current PR

Diffs

Diffs

Fix inline scripts being duplicated when used with `next/script` component #27218

Fix inline scripts being duplicated when used with `next/script` component #27218