WebPack 5.83.1 TypeError

[abhi-markan]

What

Upon webpack compilation for webpack 5.80.1 or above a type error pertaining to character count component is being thrown at console thus causing tests to fail.

Why

Webpack compilation

Anything else

    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1",
    "webpack-merge": "^5.9.0"

[owenatgov]

Transferring this issue to the govuk-frontend repo

[owenatgov]

Hi @abhi-markan. thanks for raising this. Could you please provide code for your implementation of the character count component?

[colinrotherham]

@owenatgov I've set up a webpack-character-count branch and it's running without errors

It's branched from v4.6.0 but can still be run with:

npm run dev --workspace govuk-frontend-webpack-boilerplate

I've swapped our basic "Button" example for "Character count" with the HTML from here:
https://design-system.service.gov.uk/components/character-count/default/index.html

Would be good to check the HTML the JS crashes on, with it likely being .govuk-character-count__message

<div id="with-hint-info" class="govuk-hint govuk-character-count__message">
  You can enter up to 200 characters
</div>

You can see the HTML snippet I've used in ./docs/examples/webpack/src/index.html

[colinrotherham]

I'm going to close this one since we'll soon log errors for missing elements in GOV.UK Frontend v5.0.0

Seems like Character Count changes in #4261 would catch the missing element before we call .insertAdjacentElement() so the error in the screenshot wouldn't happen:

Uncaught TypeError: Failed to execute insertAdjacentElement' on 'Element': parameter 2 is not of type "Element'

You'd see our friendly error instead