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

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.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 5
Comments: 23 (4 by maintainers)

Most upvoted comments

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

No solution to the problem.

Levix on Jul 7, 2023

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

XinChou16 on Jul 9, 2023

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
        }
      }
    }
  }

bluwy on Jul 13, 2023

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.

bluwy on Jul 10, 2023

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

Asvarox on Jul 7, 2023

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

marwie on Jul 10, 2023

experimentalDecorators: true did not solve the problem

Crone1331 on Jul 7, 2023