Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Concatenating multiple UMD files only exports the last component in window.GOVUKFrontend #5047

Open
romaricpascal opened this issue Jun 6, 2024 · 1 comment
Open

Concatenating multiple UMD files only exports the last component in window.GOVUKFrontend #5047

romaricpascal opened this issue Jun 6, 2024 · 1 comment
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation) javascript small story

Comments

@romaricpascal
Copy link
Member

romaricpascal commented Jun 6, 2024 •
edited
Loading

Description of the issue

When concatenating multiple UMD files (<COMPONENT_NAME>.bundle.js), for example using Rails Assets Pipeline, only the last component will get exported in window.GOVUKFrontend

Steps to reproduce the issue

  1. In a brand new folder, install the latest version of GOV.UK Frontend

    npm install govuk-frontend

  2. As a replication of concatenating files, create the following HTML file that adds two components to a page and logs the content of window.GOVUKFrontend:

<!DOCTYPE html>
<meta charset=utf-8>
<title>Multiple UMD component issues</title>
<script src="node_modules/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js"></script>
<script src="node_modules/govuk-frontend/dist/govuk/components/button/button.bundle.js"></script>
<script>
    console.log(window.GOVUKFrontend)
</script>
  1. Open the index.html file in your browser and open the devtools console

Actual vs expected behaviour

The logs will show only one property in window.GOVUKFrontend: Button. It should list both Accordion and Button as both are listed on the page.

This is likely due to the UMD wrapper inside the .bundle.js files that resets window.GOVUKFrontend in each file. Notice the global.GOVUKFrontend = {} at the end of the 4th line which will reset window.GOVUKFrontend as an empty object:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.GOVUKFrontend = {}));
})(this, (function (exports) { 'use strict';

Environment (where applicable)

  • GOV.UK Frontend Version: 5.4.0, but likely since rollup was upgraded from 0.X to a more recent version.
@romaricpascal romaricpascal added 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) awaiting triage Needs triaging by team javascript small story and removed awaiting triage Needs triaging by team labels Jun 6, 2024
@romaricpascal
Copy link
Member Author

We may need to check Rollup's output.extend option for the UMD build: https://rollupjs.org/configuration-options/#output-extend

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation) javascript small story
Projects
GOV.UK Design System cycle board
Status: No status
Milestone
No milestone
Development

No branches or pull requests
1 participant
@romaricpascal