Update guidance for <script type="module">

colinrotherham · colinrotherham · commit 942d9bf23aa1 · 2025-05-13T11:37:43.000+01:00
diff --git a/app/_templates/layout.njk b/app/_templates/layout.njk
@@ -8,7 +8,7 @@
   <link href="https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff2" type="font/woff2" rel="preload" as="font" crossorigin>
   <link href="https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2" type="font/woff2" rel="preload" as="font" crossorigin>
   <link href="{{ baseUrl }}stylesheets/nhsuk-{{ version }}.min.css" rel="stylesheet">
-  <script src="{{ baseUrl }}javascripts/nhsuk-{{ version }}.min.js" defer></script>
+  <script src="{{ baseUrl }}javascripts/nhsuk-{{ version }}.min.js" type="module"></script>
 {% endblock %}
 
 {# Turn the header and footer off #}
diff --git a/docs/installation/installing-compiled.md b/docs/installation/installing-compiled.md
@@ -29,7 +29,7 @@ If you require any of this functionality, you should [install using npm](/docs/i
    <link rel="stylesheet" href="css/nhsuk-[latest version].min.css">
 
    <!-- Scripts -->
-   <script src="js/nhsuk-[latest version].min.js" defer></script>
+   <script src="js/nhsuk-[latest version].min.js" type="module"></script>
 
    <!-- Favicons -->
    <link rel="shortcut icon" href="assets/favicons/favicon.ico" type="image/x-icon">
diff --git a/docs/installation/installing-with-npm.md b/docs/installation/installing-with-npm.md
@@ -79,19 +79,19 @@ Add the following JavaScript to the top of the `<body>` section of your page tem
 
 ### Option 1: Include compiled JavaScript
 
-Include the `node_modules/nhsuk-frontend/dist/nhsuk.min.js` script in the `<head>` of your page using the `defer` attribute.
+Include the `node_modules/nhsuk-frontend/dist/nhsuk.min.js` script in the `<head>` of your page using the `type="module"` attribute.
 
-> The defer attribute is used for performance benefits as the browser loads the JavaScript file as soon as possible, due to it being in the `<head>`, but will not run until after the page has loaded.
+> The `type="module"` attribute stops Internet Explorer 11 and other older browsers running the JavaScript, which relies on features older browsers might not support and could cause errors. The script will be loaded as soon as possible, due to it being in the `<head>`, but will not run until after the page has loaded.
 
 You might wish to copy the file into your project or reference it straight from node_modules.
 
 ```html
-    <script src="path-to-assets/nhsuk.min.js" defer></script>
+    <script src="path-to-assets/nhsuk.min.js" type="module"></script>
   </head>
 ```
 
 ```html
-    <script src="node_modules/nhsuk-frontend/dist/nhsuk.min.js" defer></script>
+    <script src="node_modules/nhsuk-frontend/dist/nhsuk.min.js" type="module"></script>
   </head>
 ```
 
