Transforming JavaScript decorators to the configured target environment ("es2019") is not supported yet

[brolnickij]

Environment

• Operating System: Linux
• Node Version: v16.20.0
• Nuxt Version: 3.6.0
• Nitro Version: 2.5.1
• Package Manager: npm@9.4.2
• Builder: vite
• User Config: alias, nitro
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-jr6tha?file=server%2Fcontrollers%2Fdocument.controller.ts

Describe the bug

im experiencing an issue where the TypeScript compiler cant transform JavaScript decorators to the "es2019" target environment, despite correctly setting up the tsconfig.json with experimental decorators enabled. This problem just started recently, while the project was previously working fine.

Additional context

The following configuration in nuxt.config.ts also doesnt work and begins to terminate the build with an error: RollupError: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript).

export default defineNuxtConfig({
  nitro: {
    esbuild: {
      options: {
        target: 'esnext'
      }
    },
    typescript: {
      tsConfig: {
        compilerOptions: {
          experimentalDecorators: true
        }
      }
    }
  }
})

Logs

ERROR  Error: Transform failed with 1 error: nitro 11:41:22 /home/projects/github-jr6tha/server/controllers/document.controller.ts:5:0: ERROR: Transforming JavaScript decorators to the configured target environment ("es2019") is not supported yet

Transforming JavaScript decorators to the configured target environment ("es2019") is not supported yet

[danielroe]

This is likely an upstream nitro issue (or configuration issue).

The correct way to set the nitro esbuild target here is:

export default defineNuxtConfig({
  nitro: {
    esbuild: {
      options: {
        target: 'esnext'
      }
    },
  },
})

You may also need to inject a rollup plugin in the nitro pipeline to transform the decorators, as there is another rollup plugin used by Nitro that clearly does not understand them.

Maybe it might be worth adding a hook to allow manipulation of generated nitro rollup config upstream?

cc: @pi0

[issue-up]

Upstream issue created:

• Transforming JavaScript decorators to the configured target environment ("es2019") is not supported yet unjs/nitro#1345

[NozomuIkuta]

The error message seems to come from esbuild (ref).

The phrase, target: es2019, seems to come from nitropack (ref), whose commit has been released as nitropack v2.5.0, which in turn came to be used by Nuxt. I guess this is why @brolnickij says that

This issue has only started recently, and previously the project was functioning correctly.

I checked the issue referred in the commit message (unjs/nitro#189), but would be a wrong reference. @danielroe should know which issue was actual one.

---

The below is just for your information about recent esbuild situation.

esbuild author says JavaScript (native) decorators came to be supposed as of esbuild v0.18.5, but current stable Vite (v4.3.9) doesn't support the version.

Vite v4.4.0-beta supports the latest esbuild and your issue might be (partially) resolved once Nuxt bumps up Vite version to the next. Currently, Nuxt uses v4.3.9 (ref).

I'm not sure about when inversify package will support JavaScript native decorators.

[evanw]

I saw this issue go by and figured I'd add a comment. The problem is likely that experimentalDecorators: true isn't making it to esbuild somehow, possibly because the tsconfig.json settings aren't being passed to esbuild. Transforming experimental decorators in TypeScript files has been supported by esbuild for quite a while now (since 2020). This transformation of experimental decorators is always done independent of the target, so setting a target of es2019 shouldn't make a difference as long as experimental decorators are enabled. You can use the esbuild playground to compare what happens when experimental decorators are disabled to what happens when experimental decorators are enabled. Hope that helps.

[productdevbook]

This is likely an upstream nitro issue (or configuration issue).

The correct way to set the nitro esbuild target here is:

export default defineNuxtConfig({
  nitro: {
    esbuild: {
      options: {
        target: 'esnext'
      }
    },
  },
})

You may also need to inject a rollup plugin in the nitro pipeline to transform the decorators, as there is another rollup plugin used by Nitro that clearly does not understand them.

Maybe it might be worth adding a hook to allow manipulation of generated nitro rollup config upstream?

cc: @pi0

"nitropack": "^2.5.2",

[brolnickij]

This was fixed in nitropack@2.5.2

For those who encounter the same issue:

• Run npm list nitropack. The version should be 2.5.2 or higher.
• Update your nuxt.config.ts with the following configuration:

export default defineNuxtConfig({
  nitro: {
    esbuild: {
      options: {
        tsconfigRaw: {
          compilerOptions: {
            experimentalDecorators: true
          }
        }
      }
    }
  }
})

---

@danielroe @NozomuIkuta @evanw Thank you so much for helping to solve this problem! <3

[gbyesiltas]

I have the issue with decorators causing Unexpected character '@' (Note that you need plugins to import files that are not JavaScript). on Nuxt 3.7.0 and the suggested solutions here don't help :/

[satezmedia]

Same here
for me it only shows in the console, when using with @type from class-transformer package

[gbyesiltas]

I have the issue with decorators causing Unexpected character '@' (Note that you need plugins to import files that are not JavaScript). on Nuxt 3.7.0 and the suggested solutions here don't help :/

Update here, adding

  esbuild: {
    tsconfigRaw: {},
  },

to the vite options solved the issue for me :D

[bbhxwl]

Transforming JavaScript decorators to the configured target environment ("es2019") is not supported yet

I use typeorm to prompt for this. How should I solve it?

[kaokei]

#21756 (comment)
@gbyesiltas Based on this answer, I will provide some additional information. There are two configuration options to choose from.
Option 1:
Configure in the tsconfig.json file:

"compilerOptions": {
    "experimentalDecorators": true,
  }

Additionally, configure in the nuxt.config.ts file:

vite: {
    esbuild: {
      tsconfigRaw: {},
    },
  },

Option 2:
Configure only in the nuxt.config.ts file:

  vite: {
    esbuild: {
      tsconfigRaw: {
        compilerOptions: {
          experimentalDecorators: true,
        },
      },
    },
  },

@danielroe @NozomuIkuta @productdevbook

Why is it necessary to configure both tsconfig.json and nuxt.config.ts files in Option 1? Why doesn't esbuild automatically use the relevant configurations from the tsconfig.json file? After all, the configuration part in the nuxt.config.ts file, tsconfigRaw: {}, is empty, indicating that nothing is specified, and it seems that the final configurations are still read from the tsconfig.json file. I wonder if there is room for optimization in this aspect for Nuxt.