ES Modules can't be imported without a bundler

Hello! 👋

Loved seeing the ES Modules support land yesterday 😊

Description of the issue

I’m unfortunately seeing an Error [ERR_PACKAGE_PATH_NOT_EXPORTED] thrown without a bundler

Steps to reproduce the issue

This happens with a plain native Node.js import from another *.mjs file

Current (see package.json) Missing the main or default export

"exports": {
  "import": "./govuk-esm/all.mjs"
}

Fixed (see exports documentation) Provided a main or default export for both import and require()

"exports": {
  ".": {
    "import": "./govuk-esm/all.mjs",
    "require": "./govuk/all.js"
  }
}

Actual vs expected behaviour

Node’s resolver node:internal/modules/esm/resolve doesn’t have enough info to import 'govuk-frontend'

Unlike the Import JavaScript using a bundler guidance regarding webpack, I can’t teach Node.js to break the ESM rules.

With the fix above, I sadly hit another challenge. Node.js wouldn’t attempt to resolve .mjs files as there’s no package.json "type": "module" and extensions are mandatory for CommonJS and ESM compatibility 😬

Mandatory file extensions A file extension must be provided when using the import keyword. Directory indexes (e.g. './startup/index.js') must also be fully specified.

This behavior matches how import behaves in browser environments, assuming a typically configured server.

I wasn’t fully out of options though.

I tried the new ESM aware TypeScript compiler but it also had issues importing without extensions. Microsoft have added some good release notes on type in package.json and New Extensions plus challenges involved.

Hope these notes help, it’s fab to see what’s coming 🚀

[colinrotherham]

@vanitabarrett Here’s a super minimal one: https://github.com/colinrotherham/govuk-frontend-esm-sample

npm ci
npm start

Or via mocha

npm test

[vanitabarrett]

Ah interesting, thanks! Will take a look @colinrotherham