Esbuild keeps throwing errors on vue and ts files

[pantelispanayiotou]

I am using this plugin as a hope to parse my vue and ts files that import vue files along with esbuild. I am getting the following errors: Decorators can only be used with class declarations in TypeScript Expected "class" after TypeScript decorator but found "const"

My project is using react, vue and other dependencies. Is this plugin suitable for my case? It seems that it doesn't work. Do i need to transpile ts files to js first?

[apeschar]

That is interesting. It seems that esbuild-vue doesn't work with TypeScript. It's probably necessary to first compile the TypeScript to JavaScript before applying the Vue compiler. I'll have a look to see if I can achieve that.

See this issue as well: https://github.com/evanw/esbuild/issues/2069

[apeschar]

It's the Vue compiler that replaces export default with a variable assignment, and this breaks the decorator. We're using a version of the Vue compiler that is no longer supported because this projected is/was intended for use with the legacy Vue 2.

esbuild-vue should probably get a new release for Vue 3 using all the latest components. But that's currently not on my roadmap.

You can try rewriting your code.

Replace this:

@Component(...)
export default class MyComponent { ... }

With:

@Component(...)
class MyComponent { ... }

export default MyComponent;

By moving the export default to a separate line, the Vue compiler will not introduce the syntax error you're seeing.

[pantelispanayiotou]

Thank you so much for the workaround, it solved all of my issues!

[vokshirg]

What would you advice in this case?

@Component({
  name: 'Page404'
})
export default class extends Vue {
  private message = '404 Page Not Found'
}

[apeschar]

You can use the same workaround:

@Component({
  name: 'Page404'
})
class Page404 extends Vue {
  private message = '404 Page Not Found'
}

export default Page404;

The main thing is that you can't combine the @ decorators with export default.

[He110te4m]

Is it possible to build this transformation into the plugin?

Check for export default class XXX before you begin processing the .vue file.