Cannot properly transpile decorator and abstract field in tsx

[SCLeoX]

Related plugins

• plugin-react

• plugin-react-swc

• plugin-react-oxc

• plugin-rsc

Describe the bug

If a class contains an abstract field, the initializers added by es proposal decorators (the stage 3 one, not experimental decorators) are not getting called.

I have already reported the bug to babel as it is also possible to trigger with babel alone. However, it might be caused by misconfiguration. See here for more info: babel/babel#17541 (comment)

Reproduction

https://github.com/SCLeoX/vite-proposal-decorator-reproduction/blob/main/src/reproduction.ts

Steps to reproduce

Run npm install and then npm run dev. Open webpage and open dev tools. See the initializer is not called. Commenting out the marked line causing the initializer to work normally.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 94.92 GB / 127.90 GB
  Binaries:
    Node: 23.5.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    bun: 1.2.10 - C:\Users\SCucu\.bun\bin\bun.EXE
    Deno: 2.3.5 - C:\Users\SCucu\.deno\bin\deno.EXE
  Browsers:
    Chrome: 140.0.7339.208
    Edge: Chromium (140.0.3485.54)
    Firefox: 143.0.4 - C:\Program Files\Mozilla Firefox\firefox.exe
    Internet Explorer: 11.0.19041.5794
  npmPackages:
    @vitejs/plugin-react: ^5.0.4 => 5.0.4
    vite: ^7.1.7 => 7.1.9

Used Package Manager

npm

Logs

No response

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.
• 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.

[hi-ogawa]

On Vite, decorator can be transpiled by esbuild vitejs/vite#13756. It's not documented well, but this works on your reproduction https://stackblitz.com/edit/github-etjvpgud?file=vite.config.ts

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  esbuild: {
    target: 'es2022',
  },
  plugins: [
    react(),
  ],
});

By default, vite react plugin doesn't process .ts file with babel, so this should work. I'm not sure what happens when decorator is in .tsx file.

[SCLeoX]

@hi-ogawa Thanks a lot. This solved the issue immediately.

I don't know if this is a bug so I will leave the issue open.

Actually, never mind. It does not work in tsx files.

(client) Pre-transform error: C:\Data\Development\test-proposal-decorator\2a\src\reproduction.tsx: Support for the experimental syntax 'decorators' isn't currently enabled (15:5):

  13 |     abstract a: number; // <-- Note, commenting out this completely unrelated abstract field fixes the issue (i.e. the initializer will be called.) Removing the "abstract" also works.
  14 |
> 15 |     @decorator
     |     ^
  16 |     method() {}
  17 |   }
  18 |

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.

If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
        npx cross-env BABEL_SHOW_CONFIG_FOR=C:\Data\Development\test-proposal-decorator\2a\src\reproduction.tsx <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.

But still thanks regardless.

[hi-ogawa]

Actually, never mind. It does not work in tsx files.

Yes, that's that. Btw, can you explain your use case? Do you have react component with decorator somehow and want HMR to work there or does that file just happen to be tsx but no component?
(I believe decorator with tsx should be just supported, but knowing a high level use case might help finding workaround)

[SCLeoX]

@hi-ogawa We are actually not using react, but rather preact. I did a quick test to see if it happens in other vite plugins and since it also happens with react, I opened an issue here as well.

One of our main use case is that we basically have a bunch of classes that have fields that can be displayed (which are declared using jsx). For example:

export class SomeItem extends Item {
  public readonly override name = <Trans i18nKey="example" default="item name" />;
}

Then, in an actual component, we can render it as:

interface ItemRowProps {
  item: Item;
}
export const ItemRow = memo(function ItemRow({ item }: ItemRowProps) {
  return (
    <div>
      Name:
      <span>{ item.name }</span>
    </div>
  );
});

(HMR has been long broken for us but it is most likely either a preact issue or an us issue. Also not sure how it relates to this issue).

I already found a workaround, which is to separate all the abstract fields into a dummy class and having the main class extend the dummy class.

Here are related issues I opened.

In babel: babel/babel#17541
In preact: preactjs/preset-vite#170

[hi-ogawa]

(HMR has been long broken for us but it is most likely either a preact issue or an us issue. Also not sure how it relates to this issue).

If you don't expect HMR, the plugin is unnecessary (at least for react plugin, not sure preact but likely similar), You might be able to just remove it and let esbuild transpile everything.
Or if you know which file you don't need hmr, you can tweak react({ include: ..., exclude: ... }) options to exclude decorator related files won't be processed by babel.

[SCLeoX]

@hi-ogawa Thanks! When you say the plugin is unnecessary, do you mean the entire vite-plugin-react or the @babel/plugin-proposal-decorators?

[hi-ogawa]

When you say the plugin is unnecessary, do you mean the entire vite-plugin-react or the @babel/plugin-proposal-decorators?

By default, @vitejs/plugin-react is only for enabling HMR for react components. Additionally it allows extra babel plugins to run together with HMR transform. For decorator support, you can use esbuild option.
So, it means entire @vitejs/plugin-react is unnecessary for your use case specifically.

[SCLeoX]

I see. Thanks for the info.