Error importing from NHS.UK frontend

[colinrotherham]

Bug Report

What is the issue?

ES module imports in browser JavaScript files are transformed to Node.js require() calls

This throws the following error in a browser:

ReferenceError: Can't find variable: require

Since we don't use a bundler (only gulp-babel), we should configure Babel to preserve modules

The HTML JavaScript snippet that imports NHS.UK frontend is unaffected

What steps are required to reproduce the issue?

Add the following code to app/assets/javascript/main.js

import { createAll } from '/nhsuk-frontend/nhsuk-frontend.min.js'

Notice the contents of public/js/main.js becomes:

"use strict";

var _nhsukFrontendMin = require("/nhsuk-frontend/nhsuk-frontend.min.js");//# sourceMappingURL=main.js.map

What was the environment where this issue occurred?

N/A

Is there anything else you think would be useful in recreating the issue?