Export package as (clean) ESM

[tordans]

This is more of a stub of an issue and a note to self.

During work on a NextJS based OSMCha frontend (not public yet), I noticed that I cannot import the mapbox/real-changesets-parser due to import errors with this library.

I then rewrote the parser in TS at https://github.com/tordans/real-changesets-parser but kept the library.

I am now using a build version of that packages (which I build using bun) as a hard copy in the NextJS project which works but still results in error messages like …

./app/_components/_lib/real-changesets-parser/index.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

I think that error is due to the id-area-keys (but I did not verify that yet).

---

Long story short, for the mentioned NextJS based OSMCha we need a improved export for this library. Unfortunately I don't know a lot about the whole NPM/ESM stuff, so any hints are welcome … (that goes for the tordans/real-changesets-parser library as well).

---

Update: I found the error message I had initially when I tried to use the mapbox npm package of the real-changeset-parser

[bhousel]

Oh yeah , this kind of makes sense to me 😞 The isArea function needs that areaKeys.json file contents already imported and available.

You app (nextjs?) should be importing from dist/areaKeys.mjs (which has it included) not index.mjs which has it external.

The package.json is set up like below, which should tell other apps where to import from, however this stuff is confusing and weird..

  "type": "module",
  "main": "./dist/areaKeys.cjs",
  "module": "./dist/areaKeys.mjs",
  "exports": {
    "require": "./dist/areaKeys.cjs",
    "import": "./dist/areaKeys.mjs",
    "*": "./*"
  },

My guess is that, you can't do this - I dont know why, maybe it doesn't like the '*': https://github.com/tordans/real-changesets-parser/blob/df6eb63033ee89bd3e833332b9dab4a16a7afa03/parsers/mutagingRealChangesetElementParser.ts#L4

import * as ak from 'id-area-keys';

Maybe try

import {isArea, areaKeys} from 'id-area-keys';

[tordans]

I tried the named imports and that does work (the tests are green). However the .js file that is build by bun does not change, so I guess bun already optimized those imports internally. Which also means that the NextJS error "require function is used in a way in which dependencies cannot be statically extracted" will still be there.

Googling around (https://github.com/vercel/next.js/discussions/58626, https://github.com/mswjs/msw/issues/1252), it sounds like I should test around with …

• different node versions for the osmcha2 project
• different build tools for the package
• remove the package from the client (debugging) component and only use it in the server component
• look at the build version if that shows any errors…

---

I looked at the two package checker that I know and they are happy with the what they see…

• https://arethetypeswrong.github.io/?p=id-area-keys%406.5.0
• https://publint.dev/[email protected]