Esbuild keeps throwing errors on vue and ts files about esbuild-vue HOT 6 CLOSED

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.

from esbuild-vue.

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.

from esbuild-vue.

Is it possible to build this transformation into the plugin?

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

from esbuild-vue.

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: evanw/esbuild#2069

from esbuild-vue.

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

from esbuild-vue.

What would you advice in this case?

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

from esbuild-vue.