ESM default import import webfont from "webfont" (#618)
Minimum version: pending — ships with the next 12.x release that adds the ESM build.
What changed
webfont now ships a real ESM build (dist/index.mjs) alongside the existing CommonJS build (dist/index.js). The exports field routes import to the ESM file and require to the CJS file, so import webfont from "webfont" returns the callable function instead of the module namespace object.
Before
On 12.1.0 and earlier, both the import and require conditions of package.json#exports pointed at the same CJS file (./dist/index.js). Node's CJS→ESM interop handed ESM callers the whole module.exports object as the default import, so a default import was not callable:
import webfont from "webfont";
await webfont({ files: "icons/*.svg" });
// TypeError: webfont is not a function
// (https://github.com/itgalaxy/webfont/issues/618)After
import webfont from "webfont"→ thewebfontfunction (callable).import { webfont } from "webfont"→ still works (named export).const { webfont } = require("webfont")→ still works (CJS named export).
Both interops are now guarded on every PR and on release by npm run test:package, a three-layer validation of the built tarball (see ADR 0012):
publint— lintspackage.json#exports,files,main,module,types, and condition ordering.@arethetypeswrong/cli(attw) — probes types resolution under node10, node16 (from CJS), node16 (from ESM), and bundler.scripts/pack-smoke-test.mjs— packs, installs the tarball into throwaway ESM and CJS consumer projects, and asserts each import shape can generate a realwoff2from fixtures.
This prevents future regressions of package.json#exports, files, types, or the ESM/CJS build outputs from shipping to npm.
Workaround on older versions
Use the named import instead of the default import — no upgrade required:
import { webfont } from "webfont";
await webfont({ files: "icons/*.svg" });With require:
const { webfont } = require("webfont");
await webfont({ files: "icons/*.svg" });After upgrading
npm install webfont@latestBoth default and named imports now work:
import webfont from "webfont";
await webfont({ files: "icons/*.svg" });