Govuk-frontend: Cannot import standard ES6 modules from npm

[nickcolley]

At the moment if you try to import using our documentation using a standard ES6 bundler such as Rollup it will fail.

This is because we ship our bundles as UMD, which as great for browser and CommonJs support but not ES6 Modules.

This means our current guidance around rollup is misleading and only works when compiling from source.

We could consider adding more real world examples that import the package directly to ensure what we recommend is tested.

I'm not sure if we should be publishing these as .mjs files, which seems to be what Node.js is going towards.

• Webpack example: https://github.com/alphagov/govuk-frontend/tree/master/examples/webpack
• Rollup advice on modules https://github.com/rollup/rollup/wiki/pkg.module
• Microbundle https://github.com/developit/microbundle

[matthewblewitt]

Do you lose tree shaking by using 'rollup-plugin-commonjs'/UMD? I'm having to useimport Button from 'govuk-frontend/components/button/button'; rather than import { Button } from 'govuk-frontend' to only get the code I want.

[nickcolley]

Yeah I believe that's the only way currently to achieve what you'd get for free with tree shaking.

[nickcolley]

Would be good to also think about how polyfills would be treeshaking as part of this work: https://github.com/alphagov/govuk-frontend/issues/710

[nickcolley]

A possible way to test tree shaking: https://twitter.com/Rich_Harris/status/1031220091940204546?s=17

[nickcolley]

https://philipwalton.com/articles/deploying-es2015-code-in-production-today/

[nickcolley]

http://exploringjs.com/es6/ch_modules.html

[gunjam]

In our project we use very few govuk-frontend js modules: Button, Radios, Checkboxes, ErrorSummary, that's about it. So to save on the bundle size I made a custom all.js file that only imports the components I need. The other reason we do this is that we have some custom components which use the same polyfills (and one that reuses Button) which can also be added to the same all.js file. The tree shaking will avoid bundling the same polyfills or components twice, resulting in a single small js bundle.

Unforuntatley the only way to achieve this is to add this Github repo as a npm depency, as the unbundled source is not included in the npm package and using the individually bundled components does not take advantage of tree shaking, bloating out the total bundle size.

This also presents us with some problems:

• The version of the Github repo is not always accurately reported by the 'out of date' check in our CI pipeline so it's always yellow with a warning
• The Github repo package.json requires specifically node version 12 preventing us from updating to current LTS version 14 (the npm install fails)
• govuk-frontend is already a subdepency of a DWP package meaing we're effectively installing everything twice, with the nunjucks macros being the loaded from the subdepency but the client side js bundled from the source repo. Keeping these versions the same is a faff
• This is clearly a messy hack

So in an ideal world the unbundled component js would be included in the govuk-frontend npm package in a way in which it could be imported as an ES6 module. This could also allow serving the ES6 modules directly over HTTP2 in the future, falling back to the bundle.

I'd be happy to help on the implementation of this if an approach could be agreed.

Thanks!

[kr8n3r]

direction most packages are moving to is to specify type: module in package.json
Sindre Sorhus’s FAQ. for more details
alternatively ship additional govuk-frontend-esm npm package