Update website to use <script type="module">

src/styles/page-template/block-areas/index.njk

@@ -81,7 +81,7 @@ stylesheets:
     <span class="app-annotate-block__label">block: bodyEnd</span>
     {{ super() }}
     {# Since we’re not extending the Design System layout we need to add this manually #}
-    <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-    <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+    <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+    <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
   </div>
 {%- endblock %}

src/styles/page-template/custom/index.njk

@@ -149,6 +149,6 @@ ignoreInSitemap: true
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

src/styles/page-template/default/index.njk

@@ -14,6 +14,6 @@ layout: false
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

views/layouts/_generic.njk

@@ -37,6 +37,6 @@
 {% block footer %}{% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/application.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application.js') }}"></script>
 {% endblock %}

views/layouts/layout-example-full-page-govuk.njk

@@ -22,7 +22,7 @@
   {{ contents | safe }}
 {% endblock %}
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

views/layouts/layout-example-full-page.njk

@@ -24,7 +24,7 @@
   {{ contents | safe }}
 {% endblock %}
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

views/layouts/layout-example.njk

@@ -35,9 +35,9 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}
 
 {# Example pages shouldn't have a footer, so blank the one provided by the template #}

views/partials/_cookie-banner.njk

@@ -72,25 +72,31 @@
 to avoid a high cumulative layout shift (CLS) score https://web.dev/cls/ #}
 <script>
 
-  /* If cookie policy changes and/or the user preferences object format needs to
-  * change, bump this version up afterwards. The user should then be shown the
-  * banner again to consent to the new policy.
-  *
-  * Note that because isValidCookieConsent checks that the version in the user's
-  * cookie is equal to or greater than this number, you should be careful to
-  * check backwards compatibility when changing the object format.
-  *
+  /**
+   * If cookie policy changes and/or the user preferences object format needs to
+   * change, bump this version up afterwards. The user should then be shown the
+   * banner again to consent to the new policy.
+   *
+   * Note that because isValidCookieConsent checks that the version in the user's
+   * cookie is equal to or greater than this number, you should be careful to
+   * check backwards compatibility when changing the object format.
   */
   window.GDS_CONSENT_COOKIE_VERSION = 1;
 
   (function () {
-    /** Check the cookie preferences object.
-    *
-    * If the consent object is not present, malformed, or incorrect version,
-    * returns false, otherwise returns true.
-    *
-    * This is also duplicated in cookie-functions.js - the two need to be kept in sync
-    */
+    // Skip early setup when cookie banner component is not supported
+    if (!('noModule' in HTMLScriptElement.prototype)) {
+      return
+    }
+
+    /**
+     * Check the cookie preferences object.
+     *
+     * If the consent object is not present, malformed, or incorrect version,
+     * returns false, otherwise returns true.
+     *
+     * This is also duplicated in cookie-functions.js - the two need to be kept in sync
+     */
     function isValidConsentCookie (options) {
       return (options && options.version >= window.GDS_CONSENT_COOKIE_VERSION)
     }