Upgrade to webpack v5

[colinrotherham]

Upgrade to webpack v5

With manual testing to confirm these three UMD entry points still work:

import accessibleAutocomplete from 'accessible-autocomplete'

import Autocomplete from 'accessible-autocomplete/preact.js'
import Autocomplete from 'accessible-autocomplete/react.js'

Package audit

See results from npm audit below

6 vulnerabilities (3 moderate, 3 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

[romaricpascal]

Project built OK and accessible-autocomplete.min.js loaded OK in a browser.

Tried to load the library (using Node, for quickness) both with require and import which noticed that dist/accessible-autocomplete.min.js was adding to self rather than window as it does now, so we should probably go like-for-like (or even move to this as GOV.UK Frontend does?).

[romaricpascal]

issue I think this one needs to go in the shared config's output, so that the wrapped version of the library also gets added to window, as it is with Webpack 4. With Webpack 5, looks like it gets added to self instead.

[romaricpascal]

Interestingly, looks like on GOV.UK Frontend, we add to this rather than either of window or self. this sounds more portable, but:

• isn't like for like with the current output of Webpack
• I'm not quite sure if there'd be unforeseen side effects

[colinrotherham]

@romaricpascal Shall we pair on this?

You'll notice the difference when importing into the Review app

[romaricpascal]

During testing, sounds like a conflict happened if setting the accessible-autocomplete.min.js to 'window', so let's keep it on self.

[colinrotherham]

Yeah, it's when running without a bundler (e.g. dependencies via unpkg <script>)

It means we can use window.React.createElement() in user code but still ensure React inside our bundled library code still resolves and extends the window.React version using webpack globalObject

I'll add a comment to explain:

// Support extending `window.React` when not bundled
// e.g. with all dependencies included via unpkg.com
globalObject: 'window'

[romaricpascal]

Let's just check that things still work serverside for React, as it was something specifically handled by this PR.

[colinrotherham]

Let's just check that things still work serverside for React, as it was something specifically handled by this PR.

@romaricpascal Yep, all working as discussed on Slack

There's an extra commit 1746717 to fix server-side imports without breaking window.React

I've clarified why we use globalObject in #614 (comment) and have used this snippet to test a "string render" of the component via the React bundle both client-side and server-side:

import Autocomplete from 'accessible-autocomplete/react.js'
import React from 'react'
import ReactDOMServer from 'react-dom/server.js'

console.log(
  ReactDOMServer.renderToString(
    React.createElement(Autocomplete.default, {}, null)
  )
)

[romaricpascal]

Looks all good to go. Had a quick re-test through GOV.UK Frontend review app and it all worked fine.