Using vite 4.4.0 or 4.4.1 breaks Typescript decorator support in some projects

[hybridherbst]

Describe the bug

I'm a bit at a loss at what's going on - in a project I have using vite 4.4.0 or 4.4.1 breaks decorators in TypeScript, but going back to 4.3.9 fixes the issue.

All I'm getting on 4.4.0 is SyntaxError: Invalid character: '@' (on some code on our end that uses decorators), while in 4.3.9 everything works.

What is extra weird is that I can't reproduce the issue on StackBlitz even with the same setup / configs in place. I've included my tests so far nonetheless, as I can 100% reproduce the issue locally by switching between vite 4.4.0 and 4.3.9 as dependency.

Discord discussion: https://discord.com/channels/804011606160703521/804011606160703524/1126556878676168784

Reproduction

Tried to repro here but no luck so far: https://stackblitz.com/edit/vitejs-vite-ojnmgf?file=myPackage%2FmyCode.ts

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.4.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 221.48 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - /usr/local/bin/node
    npm: 9.5.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.5.1
  npmPackages:
    @vitejs/plugin-basic-ssl: ^1.0.1 => 1.0.1 
    vite: 4.4.1 => 4.4.1

Used Package Manager

npm

Logs

Click to expand!

SyntaxError: Invalid character: '@'

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-ojnmgf (Open reproduction)

[hybridherbst]

I've read through the breaking changes in esbuild (https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#0180:~:text=Prefer%20.js%20over%20.ts%20within%20node_modules%20(%233019)) and can just assume that something there affects this case...

[royair]

me too

[bhvngt]

Same here. Here's the reproduction - https://codesandbox.io/p/sandbox/typescript-playground-export-forked-x2lj66?file=%2Fpackage.json%3A6%2C19;

Steps to reproduce

• open terminal and run yarn test. It throws following error
  

If you change the resolution of vite to 4.3.9 and then run yarn install && yarn test on the console, error goes away and test passes.

[Asvarox]

Specifying "experimentalDecorators": true in tsconfig.json (compilerOptions) helps

[Levix]

Specifying "experimentalDecorators": true in tsconfig.json (compilerOptions) helps

No solution to the problem.

[bluwy]

Likely related to #13525, maybe we need to set experimentalDecorators: true by default for now.

[bhvngt]

starting esbuild 0.18.5 ECMA decorators have been supported. So this may require a bump in the supported esbuild version for vite. In the meantime, we can live with experimentalDecorators: true

[Crone1331]

experimentalDecorators: true did not solve the problem

[hybridherbst]

We also had experimentalDecorators: true already on (since we're using decorators) and the issue happens with that.

[XinChou16]

We also had experimentalDecorators: true already on (since we're using decorators) and the issue happens with that.

same as you, we already set it in tsconfig.json, still throw err

[bluwy]

Another way to make sure if experimentalDecorators is really set is with this in vite.config.js:

export default {
  esbuild: {
    tsconfigRaw: {
      compilerOptions: {
        experimentalDecorators: true,
      },
   },
  },
}

It could be that your tsconfig isn't include-ing the files that use decorators.

[marwie]

Same issue here, tsconfig is correct.

I also tried with the suggestion above adding it to vite.config.js without luck

[marwie]

The error doesnt happen when the package comes from npm - but it does reproduce with the package installed via a local file path

[CollinHerber]

Can confirm this same issue in Aurelia projects. Enabling experimental decorators via tsconfig does not fix the problem.

[hazzo]

Not working here either.

[ERROR] Parameter decorators only work when experimental decorators are enabled

Already got "experimentalDecorators": true. Using inversifyjs decorators

[bluwy]

Can anyone share a repro? There's only one (#13736 (comment)) and that worked when I set "experimentalDecorators": true. I'm thinking we can add that by default, but I'm confused why it doesn't work for some others.

[CollinHerber]

Can anyone share a repro? There's only one (#13736 (comment)) and that worked when I set "experimentalDecorators": true. I'm thinking we can add that by default, but I'm confused why it doesn't work for some others.

https://stackblitz.com/edit/au2-conventions-qvwece?file=tsconfig.json

[marwie]

I just had a case where decorators silently failed for fields (no invocation of the decorator function!)
but the error started to showup when I added a method decorator. After downgrading to vite <= 4.3.9 the error disappeared and it worked as expected.

Took me a while to find this since I didnt get any errors

[bluwy]

stackblitz.com/edit/au2-conventions-qvwece?file=tsconfig.json

@CollinHerber Thanks! I was able to track down another spot to fix, will handle that in the PR too. As a workaround, you can set this in your vite.config.js:

  optimizeDeps: {
    esbuildOptions: {
      tsconfigRaw: {
        compilerOptions: {
          experimentalDecorators: true
        }
      }
    }
  }

[bourquep]

In my case, Vite 4.4.x fails with the following declaration (but Vite 3.3.9 succeeds):

@themedComponent
@trackWebPage<StudyoAnalyticsPage>('Preparing')
@inject(
  StudyoWebServiceKeys.viewModelFactory,
  StudyoWebServiceKeys.localizationService,
  StudyoWebServiceKeys.reactRouterRouteService
)
@observer
export class PreparingSchoolScreen extends React.Component<PreparingSchoolScreenProps> {

The error is:

I do have experimentalDecorators set to true in my tsconfig.

Update

Setting experimentalDecorators to true in vite.config.js as described above solved it for me!

Update 2

Instead of setting experimentalDecorators in vite.config.js, I simply configured it to use my tsconfig.json (which already sets experimentalDecorators:

  optimizeDeps: {
    esbuildOptions: {
      tsconfig: 'tsconfig.json'
    }
  },

And it works.

[ChrisBellew]

As a workaround I found that if you're using Nuxt 3 you can give some tsconfig to esbuild which is used internally inside nitro.

export default defineNuxtConfig({
  nitro: {
    esbuild: {
      options: {
        target: "esnext",
        tsconfigRaw: {
          compilerOptions: {
            experimentalDecorators: true,
            emitDecoratorMetadata: true,
          },
        },
      },
    },
  },
});