How to properly integrate Apache Thrift-generated JavaScript files with Vue 3 and Vite?

I’m building a Vue 3 application that needs to communicate with backend APIs using Apache Thrift. I’ve created a skeleton project (available on GitHub) but I’m struggling with integrating the Thrift-generated files into my Vue 3 environment.

Problem

The Apache Thrift compiler (version 0.21.0) generates JavaScript files in CommonJS format, but my Vue 3 application uses Vite which expects ESM format. I’ve tried various generation options (js, nodejs, es6, and nodejs-es6 combo) without success.

Current workarounds (not ideal)

  • Generated NodeJS files and manually converted them to ES6 format using claude.ai (under srcgen-es6 in my repo)
  • Generated files with js:node,es6 flag and manually modified them (modified files under gen-nodejs in my repo)

Both approaches require manual intervention, which isn’t sustainable for a production application.

Questions

  1. What’s the recommended way to use Thrift-generated JavaScript files
    in a modern Vue 3 + Vite project?
  2. Is there a proper compiler flag or configuration to generate
    ESM-compatible files directly?
  3. Are there any build tools or workflows that can automate the
    conversion from CommonJS to ESM?

Environment

  • Vue 3
  • Vite
  • Apache Thrift 0.21.0

Any guidance or pointers would be greatly appreciated, as information on this specific combination is sparse online.