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 src\gen-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.

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 src\gen-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.

• javascript
• node.js
• vue.js
• thrift

1 Answer 1

There was a change last month to add ESM support to Thrift, but it hasn't been released yet. If you're feeling adventurous you could try building Thrift from source.