From af16b3b684e72bc3fb6a1bfccd9f3e6031610740 Mon Sep 17 00:00:00 2001
From: Stefan Probst <stefanprobst@kolabnow.com>
Date: Sat, 7 Aug 2021 21:18:46 +0200
Subject: [PATCH 1/5] feat: add eslint rule for id prop on inline next/script

---
 docs/basic-features/script.md                 |   3 +-
 errors/inline-script-id.md                    |  26 +++
 errors/manifest.json                          |   4 +
 packages/eslint-plugin-next/lib/index.js      |   2 +
 .../lib/rules/inline-script-id.js             |  42 +++++
 .../inline-script-id.unit.test.js             | 156 ++++++++++++++++++
 test/integration/script-loader/pages/page3.js |   2 +-
 7 files changed, 233 insertions(+), 2 deletions(-)
 create mode 100644 errors/inline-script-id.md
 create mode 100644 packages/eslint-plugin-next/lib/rules/inline-script-id.js
 create mode 100644 test/eslint-plugin-next/inline-script-id.unit.test.js

diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
index 1d4a0b302e13..ef688170332e 100644
--- a/docs/basic-features/script.md
+++ b/docs/basic-features/script.md
@@ -131,13 +131,14 @@ export default function Home() {
 ```js
 import Script from 'next/script'
 
-<Script strategy="lazyOnload">
+<Script id="show-banner" strategy="lazyOnload">
   {`document.getElementById('banner').removeClass('hidden')`}
 </Script>
 
 // or
 
 <Script
+  id="show-banner"
   dangerouslySetInnerHTML={{
     __html: `document.getElementById('banner').removeClass('hidden')`
   }}
diff --git a/errors/inline-script-id.md b/errors/inline-script-id.md
new file mode 100644
index 000000000000..1bb319279a03
--- /dev/null
+++ b/errors/inline-script-id.md
@@ -0,0 +1,26 @@
+# next/script components with inline content require an `id` attribute
+
+## Why This Error Occurred
+
+`next/script` components with inline content require an `id` attribute for deduplication.
+
+## Possible Ways to Fix It
+
+Add an `id` attribute to the `next/script` component.
+
+```jsx
+import Script from 'next/script'
+
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <Script id="my-script">{`console.log('Hello world!');`}</Script>
+      <Component {...pageProps} />
+    </>
+  )
+}
+```
+
+## Useful links
+
+- [Docs for Next.js Script component](https://nextjs.org/docs/basic-features/script)
diff --git a/errors/manifest.json b/errors/manifest.json
index 09bc27b3a8e7..a65304fa7461 100644
--- a/errors/manifest.json
+++ b/errors/manifest.json
@@ -145,6 +145,10 @@
           "title": "incompatible-href-as",
           "path": "/errors/incompatible-href-as.md"
         },
+        {
+          "title": "inline-script-id",
+          "path": "/errors/inline-script-id.md"
+        },
         { "title": "install-sass", "path": "/errors/install-sass.md" },
         { "title": "install-sharp", "path": "/errors/install-sharp.md" },
         {
diff --git a/packages/eslint-plugin-next/lib/index.js b/packages/eslint-plugin-next/lib/index.js
index df01916cca94..6b387969ce59 100644
--- a/packages/eslint-plugin-next/lib/index.js
+++ b/packages/eslint-plugin-next/lib/index.js
@@ -14,6 +14,7 @@ module.exports = {
     'no-head-import-in-document': require('./rules/no-head-import-in-document'),
     'no-typos': require('./rules/no-typos'),
     'no-duplicate-head': require('./rules/no-duplicate-head'),
+    'inline-script-id': require('./rules/inline-script-id'),
   },
   configs: {
     recommended: {
@@ -33,6 +34,7 @@ module.exports = {
         '@next/next/no-head-import-in-document': 2,
         '@next/next/no-typos': 1,
         '@next/next/no-duplicate-head': 2,
+        '@next/next/inline-script-id': 2,
       },
     },
     'core-web-vitals': {
diff --git a/packages/eslint-plugin-next/lib/rules/inline-script-id.js b/packages/eslint-plugin-next/lib/rules/inline-script-id.js
new file mode 100644
index 000000000000..71db62d76185
--- /dev/null
+++ b/packages/eslint-plugin-next/lib/rules/inline-script-id.js
@@ -0,0 +1,42 @@
+module.exports = {
+  meta: {
+    docs: {
+      description:
+        'next/script components with inline content must specify an `id` attribute.',
+      recommended: true,
+    },
+  },
+  create: function (context) {
+    let nextScriptImportName = null
+
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === 'next/script') {
+          nextScriptImportName = node.specifiers[0].local.name
+        }
+      },
+      JSXElement(node) {
+        if (nextScriptImportName == null) return
+
+        if (node.openingElement?.name?.name !== nextScriptImportName) return
+
+        const attributes = node.openingElement.attributes
+
+        if (
+          node.children.length > 0 ||
+          attributes.some(
+            (attribute) => attribute.name.name === 'dangerouslySetInnerHTML'
+          )
+        ) {
+          if (!attributes.some((attribute) => attribute.name.name === 'id')) {
+            context.report({
+              node,
+              message:
+                'next/script components with inline content must specify an `id` attribute. See: https://nextjs.org/docs/messages/inline-script-id',
+            })
+          }
+        }
+      },
+    }
+  },
+}
diff --git a/test/eslint-plugin-next/inline-script-id.unit.test.js b/test/eslint-plugin-next/inline-script-id.unit.test.js
new file mode 100644
index 000000000000..222b78b71cd1
--- /dev/null
+++ b/test/eslint-plugin-next/inline-script-id.unit.test.js
@@ -0,0 +1,156 @@
+const rule = require('@next/eslint-plugin-next/lib/rules/inline-script-id')
+
+const RuleTester = require('eslint').RuleTester
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      modules: true,
+      jsx: true,
+    },
+  },
+})
+
+const errorMessage =
+  'next/script components with inline content must specify an `id` attribute. See: https://nextjs.org/docs/messages/inline-script-id'
+
+const ruleTester = new RuleTester()
+ruleTester.run('inline-script-id', rule, {
+  valid: [
+    {
+      code: `import Script from 'next/script';
+
+      export default function TestPage() {
+        return (
+          <Script id="test-script">
+            {\`console.log('Hello world');\`}
+          </Script>
+        )
+      }`,
+    },
+    {
+      code: `import Script from 'next/script';
+
+      export default function TestPage() {
+        return (
+          <Script
+            id="test-script"
+            dangerouslySetInnerHTML={{
+              __html: \`console.log('Hello world');\`
+            }}
+          />
+        )
+      }`,
+    },
+    {
+      code: `import Script from 'next/script';
+
+      export default function TestPage() {
+        return (
+          <Script src="https://example.com" />
+        )
+      }`,
+    },
+    {
+      code: `import MyScript from 'next/script';
+
+      export default function TestPage() {
+        return (
+          <MyScript id="test-script">
+            {\`console.log('Hello world');\`}
+          </MyScript>
+        )
+      }`,
+    },
+    {
+      code: `import MyScript from 'next/script';
+
+      export default function TestPage() {
+        return (
+          <MyScript
+            id="test-script"
+            dangerouslySetInnerHTML={{
+              __html: \`console.log('Hello world');\`
+            }}
+          />
+        )
+      }`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import Script from 'next/script';
+
+        export default function TestPage() {
+          return (
+            <Script>
+              {\`console.log('Hello world');\`}
+            </Script>
+          )
+        }`,
+      errors: [
+        {
+          message: errorMessage,
+          type: 'JSXElement',
+        },
+      ],
+    },
+    {
+      code: `import Script from 'next/script';
+
+        export default function TestPage() {
+          return (
+            <Script
+              dangerouslySetInnerHTML={{
+                __html: \`console.log('Hello world');\`
+              }}
+            />
+          )
+        }`,
+      errors: [
+        {
+          message: errorMessage,
+          type: 'JSXElement',
+        },
+      ],
+    },
+    {
+      code: `import MyScript from 'next/script';
+
+        export default function TestPage() {
+          return (
+            <MyScript>
+              {\`console.log('Hello world');\`}
+            </MyScript>
+          )
+        }`,
+      errors: [
+        {
+          message: errorMessage,
+          type: 'JSXElement',
+        },
+      ],
+    },
+    {
+      code: `import MyScript from 'next/script';
+
+        export default function TestPage() {
+          return (
+            <MyScript
+              dangerouslySetInnerHTML={{
+                __html: \`console.log('Hello world');\`
+              }}
+            />
+          )
+        }`,
+      errors: [
+        {
+          message: errorMessage,
+          type: 'JSXElement',
+        },
+      ],
+    },
+  ],
+})
diff --git a/test/integration/script-loader/pages/page3.js b/test/integration/script-loader/pages/page3.js
index 8da988ec5077..73772f65c614 100644
--- a/test/integration/script-loader/pages/page3.js
+++ b/test/integration/script-loader/pages/page3.js
@@ -3,7 +3,7 @@ import Script from 'next/script'
 const Page = () => {
   return (
     <div class="container">
-      <Script>
+      <Script id="inline-script">
         {`(window.onload = function () {
             const newDiv = document.createElement('div')
             newDiv.id = 'onload-div'

From 91375bb24a95c4c638bf56f85ab45ba1da377537 Mon Sep 17 00:00:00 2001
From: Stefan Probst <stefanprobst@kolabnow.com>
Date: Sun, 8 Aug 2021 08:41:39 +0200
Subject: [PATCH 2/5] docs: add rule to eslint docs

---
 docs/basic-features/eslint.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/basic-features/eslint.md b/docs/basic-features/eslint.md
index a08fdc7e7882..16d5c44fbe6e 100644
--- a/docs/basic-features/eslint.md
+++ b/docs/basic-features/eslint.md
@@ -94,6 +94,7 @@ Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/
 | ✔️  | [next/no-sync-scripts](https://nextjs.org/docs/messages/no-sync-scripts)                       | Forbid synchronous scripts                                                                                                   |
 | ✔️  | [next/no-title-in-document-head](https://nextjs.org/docs/messages/no-title-in-document-head)   | Disallow using &lt;title&gt; with Head from next/document                                                                    |
 | ✔️  | [next/no-unwanted-polyfillio](https://nextjs.org/docs/messages/no-unwanted-polyfillio)         | Prevent duplicate polyfills from Polyfill.io                                                                                 |
+| ✔️  | [next/inline-script-id](https://nextjs.org/docs/messages/inline-script-id)                     | Enforce id attribute on next/script components with inline content                                                           |
 | ✔️  | next/no-typos                                                                                  | Ensure no typos were made declaring [Next.js's data fetching function](https://nextjs.org/docs/basic-features/data-fetching) |
 
 - ✔: Enabled in the recommended configuration

From 1fb7f551786e6d346ab1bcf1b23c2cad420511c2 Mon Sep 17 00:00:00 2001
From: stefanprobst <stefan.probst@univie.ac.at>
Date: Tue, 10 Aug 2021 08:05:07 +0200
Subject: [PATCH 3/5] Update errors/inline-script-id.md

---
 errors/inline-script-id.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/errors/inline-script-id.md b/errors/inline-script-id.md
index 1bb319279a03..fe7f1250be73 100644
--- a/errors/inline-script-id.md
+++ b/errors/inline-script-id.md
@@ -2,7 +2,7 @@
 
 ## Why This Error Occurred
 
-`next/script` components with inline content require an `id` attribute for deduplication.
+`next/script` components with inline content require an `id` attribute to be defined to track and optimize the script.
 
 ## Possible Ways to Fix It
 

From b219f3916b74515f265adceac9665c28b43ddeaf Mon Sep 17 00:00:00 2001
From: Stefan Probst <stefanprobst@kolabnow.com>
Date: Thu, 19 Aug 2021 20:27:37 +0200
Subject: [PATCH 4/5] chore: add missing id attribute to eslint rule
 text+example

---
 errors/next-script-for-ga.md                           | 10 +++++-----
 .../eslint-plugin-next/next-script-for-ga.unit.test.js | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/errors/next-script-for-ga.md b/errors/next-script-for-ga.md
index 15d400c098bd..2f367dff127c 100644
--- a/errors/next-script-for-ga.md
+++ b/errors/next-script-for-ga.md
@@ -20,8 +20,8 @@ const Home = () => {
       <Script
         src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
         strategy="lazyOnload"
-      ></Script>
-      <Script>
+      />
+      <Script id="google-analytics">
         {`
           window.dataLayer = window.dataLayer || [];
           function gtag(){window.dataLayer.push(arguments);}
@@ -47,7 +47,7 @@ import Script from 'next/script'
 const Home = () => {
   return (
     <div class="container">
-      <Script>
+      <Script id="google-analytics">
         {`
           (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
           (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -73,7 +73,7 @@ import Script from 'next/script'
 const Home = () => {
   return (
     <div class="container">
-      <Script>
+      <Script id="google-analytics">
         {`
           window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
           ga('create', 'GOOGLE_ANALYTICS_ID', 'auto');
@@ -83,7 +83,7 @@ const Home = () => {
       <Script
         src="https://www.google-analytics.com/analytics.js"
         strategy="lazyOnload"
-      ></Script>
+      />
     </div>
   )
 }
diff --git a/test/eslint-plugin-next/next-script-for-ga.unit.test.js b/test/eslint-plugin-next/next-script-for-ga.unit.test.js
index 18b156239c02..eb4c01fd9272 100644
--- a/test/eslint-plugin-next/next-script-for-ga.unit.test.js
+++ b/test/eslint-plugin-next/next-script-for-ga.unit.test.js
@@ -29,8 +29,8 @@ ruleTester.run('sync-scripts', rule, {
               <Script
                 src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
                 strategy="lazyOnload"
-              ></Script>
-              <Script>
+              />
+              <Script id="google-analytics">
                 {\`
                   window.dataLayer = window.dataLayer || [];
                   function gtag(){window.dataLayer.push(arguments);}
@@ -50,12 +50,12 @@ ruleTester.run('sync-scripts', rule, {
           return (
             <div>
               <h1>Hello title</h1>
-              <Script>
+              <Script id="google-analytics">
                 {\`(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-                    
+
                     ga('create', 'UA-XXXXX-Y', 'auto');
                     ga('send', 'pageview');
                 })\`}
@@ -71,7 +71,7 @@ ruleTester.run('sync-scripts', rule, {
             return (
             <div>
                 <h1>Hello title</h1>
-                <Script>
+                <Script id="google-analytics">
                     {\`window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
                     ga('create', 'UA-XXXXX-Y', 'auto');
                     ga('send', 'pageview');

From 0bed0a20fc5b1201533b14c5fb95e4813ac7d0d6 Mon Sep 17 00:00:00 2001
From: Stefan Probst <stefanprobst@kolabnow.com>
Date: Thu, 19 Aug 2021 20:57:15 +0200
Subject: [PATCH 5/5] fix: don't use optional chaining

---
 packages/eslint-plugin-next/lib/rules/inline-script-id.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/eslint-plugin-next/lib/rules/inline-script-id.js b/packages/eslint-plugin-next/lib/rules/inline-script-id.js
index 71db62d76185..70843a2be1fb 100644
--- a/packages/eslint-plugin-next/lib/rules/inline-script-id.js
+++ b/packages/eslint-plugin-next/lib/rules/inline-script-id.js
@@ -18,7 +18,13 @@ module.exports = {
       JSXElement(node) {
         if (nextScriptImportName == null) return
 
-        if (node.openingElement?.name?.name !== nextScriptImportName) return
+        if (
+          node.openingElement &&
+          node.openingElement.name &&
+          node.openingElement.name.name !== nextScriptImportName
+        ) {
+          return
+        }
 
         const attributes = node.openingElement.attributes