Error resolving GOV.UK Frontend subpath exports in Node.js 17+

[romaricpascal]

Description of the issue

We've identified two scenarios when trying to require() or import GOV.UK Frontend

1. Node.js >= 17 errors with GOV.UK Frontend v4 folder mapping in "exports"
2. Node.js <= 12.18 errors with GOV.UK Frontend v5 (unreleased) subpath patterns in "exports"

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './govuk/all.js' is not defined by "exports" in /Users/romaric.pascal/code/package-exports/node_modules/govuk-frontend/package.json

This can happen if extending our components and having a test suite run with a tool like Mocha that uses native Node require or import to load modules.

Steps to reproduce the issue

1. Create a new prototype GOV.UK Frontend v4.6.0

   npx govuk-prototype-kit create package-exports
   cd package-exports

2. Run Node.js require.resolve() to locate GOV.UK Frontend's default exports

   node --eval "console.log(require.resolve('govuk-frontend'))" --conditions require
   node --eval "console.log(require.resolve('govuk-frontend'))" --conditions import

3. Run Node.js require.resolve() to locate a subpath export

   node --eval "console.log(require.resolve('govuk-frontend/govuk/all.js'))"

   Using Node.js 16 you'll see the following warning:

   [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./govuk/" in the "exports" field module resolution of the package at /node_modules/govuk-frontend/package.json.
   Update this package.json to use a subpath pattern like "./govuk/*"

   Using Node.js 17+ you'll see the following error:

   Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './govuk/all.js' is not defined by "exports" in /node_modules/govuk-frontend/package.json

Actual vs expected behaviour

Instead of receiving an error, the subpath export should should be resolved properly.

@colinrotherham suggested the following update to our exports to achieve so, using both :

"exports": {
  ".": {
    "sass": "./govuk/all.scss",
    "import": "./govuk-esm/all.mjs",
    "require": "./govuk/all.js"
  },
  "./govuk/": "./govuk/",
  "./govuk/*": "./govuk/*",
  "./govuk-esm/": "./govuk-esm/",
  "./govuk-esm/*": "./govuk-esm/*",
  "./package.json": "./package.json"
},

[colinrotherham]

Thanks @romaricpascal

The hybrid idea was because package.json subpath patterns requires Node.js 12.20.0+

But we should check if a single "./*": "./*" catch-all is all we need:

"exports": {
  ".": {
    "sass": "./govuk/all.scss",
    "import": "./govuk-esm/all.mjs",
    "require": "./govuk/all.js"
  },
  "./govuk/": "./govuk/",
  "./govuk-esm/": "./govuk-esm/",
  "./package.json": "./package.json",
  "./*": "./*"
},

[colinrotherham]

@romaricpascal Updated the description to show how both v4 and v5 are affected

[colinrotherham]

Node.js <= 12.18 fix (v5 only) ready for review:

• Fix package resolution in legacy Node.js #3816

Node.js >= 17 fix (v4 only) ready for review:

• Fix package resolution in Node.js 17+ for support/4.x #3817