Try catch block in extended class constructor throws error on build

[petermakeswebsites]

Describe the bug

I want to preface this by saying I'm not exactly sure if this is a typescript, svelte, or vite problem, or some combination.

Must call super constructor in derived class before accessing 'this' or returning from derived constructor

This error only happened on build, not on dev. I found it was referring to one of my classes. But because it was minified and source maps were off, I couldn't really find the problem. I enabled source maps for build mode and disabled minification, and I found the problem. I was able to recreate a very simple version of it.

If you look below for the reproduction, and you follow the steps, you will see the syntactically incorrect output for build in the source maps of your favorite browser:

class Foo extends Bar {
  constructor(size, amount) {
    __publicField(this, "size"); // "this" called before super 
    try {
      super(amount);
      this.size = size;
    } catch (err) {
      throw new Error(err);
    }
  }
}

Reproduction

npm create vite@latest broken --template svelte-ts
cd broken
npm install

vi src/broken.ts

class Bar {
  amount : number
  constructor(amount : number) {
     this.amount = amount
  }
}

class Foo extends Bar {
  size : number
  constructor(size : number, amount : number) {
    const x = amount + 1
    try {
      super(amount)
      this.size = size
    } catch(err) {
      console.warn(err)
    }
  }
}

export const foobar = new Foo(1, 1)

vi src/App.svelte

<script lang="ts">
  import logo from './assets/svelte.png'
  import Counter from './lib/Counter.svelte'
  import {foobar} from './broken.ts' // <-- add this
</script>
... (leave as is)

vi vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  build: {  // added this
    sourcemaps: true,
    minify: false
  }
})

npm run build (this will build to /dist/ folder)
cd dist
static -p 12323 // or your favorite static web server

Logs

No response

System Info

System:
    OS: macOS 11.6
    CPU: (8) x64 Apple M1
    Memory: 45.75 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.6 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.102
    Edge: 98.0.1108.56
    Firefox Developer Edition: 93.0
    Safari: 14.1.2
  npmPackages:
    svelte: ^3.44.0 => 3.46.4

Severity

annoyance

[dummdidumm]

Sounds like an issue with ESbuild which Vite uses

[bluwy]

Yeah, I think evanw/esbuild#678 specifically, but that's fixed. When I paste src/broken.ts into https://esbuild.egoist.sh, I don't get the generated output you've shown. So I'm not sure what's going on.

Anyways I'll close this as it's an issue in esbuild. But we can keep the discussion going here.