Docs mention of setting "type" to "module" in Package.json

[StepanMynarik]

Hi,

docs mention setting "type": "module", in Package.json leads to best experience with no further details. See the following screenshot.

I tried doing that but saw lots of errors that will need fixing.

So I just want to ask before dedicating to this setting - what are the benefits of setting type module when using this library?

[drwpow]

That enables ECMAScript modules (ESM) in Node (import / export). ESM is the new universal standard for JS and works in Node and the browser. By default, Node still uses CommonJS (CJS) (require()) for backwards compatibility, but is being phased out. Other projects like Deno also rely on ESM.

I won’t go into the details of ESM and the whole history, but it’s been chosen as the standard because it’s statically-analyzable (an essential for the web so imports can be fetched after the parsing phase rather the execution phase, resulting in a drastic speedup) and allows easier tree-shaking.

If you’re writing client code you should always use ESM (because that’s what the browser expects). If only Node, the choice is up to you, but more and more packages are upgrading to ESM so you’ll find compatibility for CJS fading over time (you’ll also find many complaints about this currently-fragmented ecosystem, but they are incompatible). If you switch to ESM and see more errors, it’s because most of the packages you’re depending on are older (which might be a good time to dive into what’s not needed anymore with newer Node versions and/or what’s built into modern browsers now).

Anyways, though this package does ship ESM and CJS, ESM is the first-class citizen and will always work as intended, whereas CJS is merely “as-is.” And though there are no known incompatibilities with this package and CJS, you’ll still have a better experience with ESM.

[StepanMynarik]

Thank you for the quick response and the in-depth explanation 👍

What threw me off a little was the fact that my client app built in Vue also doesn't seem to be using ESM (type: "module" not specified in package.json). And when I created a new Vue project, it was the same case.

So I thought it might be easier and possibly wiser to stay on CJS for now on both BE and FE.

However after reading through your explanation I will do some more research and experiment a bit. Perhaps I should actually move both BE and FE to ESM 😄

Also thanks for this library. It was a bit harder to find, due to not very recognizable name.
However I absolutely love the fetch wrapper you guys built. It is exactly what I want (unlike bloated Axios).

I use Fastify, Typebox, Drizzle and your lib for client codegen. And I love the typesafe, fluent DX!

[drwpow]

What threw me off a little was the fact that my client app built in Vue also doesn't seem to be using ESM

Yeah I think most people assume they’re building with ESM just because they’re writing JS in ESM (when in reality, often what happens is a weird ESM → CJS → ESM unnecessary translation). In a nutshell, this is why Jest can be so hard to work with: it’s really converting between ESM ↔ CJS back-and-forth (and why I recommend people upgrade from webpack/Jest to Vitest and Vite if they can). I’m skipping over a ton of nuance and history here, but again, short version is you’re not alone in the confusion—it’s been a very confusing migration from CJS → ESM for everyone.

Also thanks for this library. It was a bit harder to find, due to not very recognizable name.

Ha—the core library openapi-typescript actually benefitted from the generic name, but you do raise a good point that openapi-fetch may be a little too generic; was hoping it would just appear when people are searching for “fetch using OpenAPI schema” but that may not be the case (yet)!

[StepanMynarik]

I googled quite a bit (something like "openapi typescript client generator") and finally found out about your library on Reddit of all places 😆

Same as Kiota actually, which is funny considering it's a Microsoft's lib. And same as Orval (uses Axios only, so a no-go for me).

Super easy to find were only openapi-generator.tech, NSwag and swagger-codegen. At least on my end.