Vite build error with property decorators usage

[DyKv]

Environment

• Operating System: Linux
• Node Version: v16.17.0
• Nuxt Version: 2.17.2-28284499.5674f49
• CLI Version: 3.8.4
• Nitro Version: 2.6.3
• Package Manager: [email protected]
• Builder: vite
• User Config: bridge, serverHandlers, devServerHandlers, devServer, typescript, nitro, buildModules
• Runtime Modules: -
• Build Modules: (), @nuxt/[email protected]

Reproduction

Codesandbox

Describe the bug

Try to vite build when use property decorators - throws error:

Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

It's very serios problem for project migration that use nuxt-property-decorators lib

Additional context

No response

Logs

[8:08:46 PM]  ERROR  Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
file: /project/sandbox/pages/index.vue?vue&type=script&lang.ts:4:0
2: import { Component, Vue } from "nuxt-property-decorator";
3: 
4: @Component
   ^
5: export default class IndexPage extends Vue {}


[8:08:46 PM]  ERROR  Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

  at error (node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
  at Module.error (node_modules/rollup/dist/es/shared/node-entry.js:13745:16)
  at Module.tryParse (node_modules/rollup/dist/es/shared/node-entry.js:14476:25)
  at Module.setSource (node_modules/rollup/dist/es/shared/node-entry.js:14077:39)
  at ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/node-entry.js:24649:20)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)

[wattanx]

vite is not required to use Nuxt Bridge.
After removing nuxt-property-decorator, it would be better to use vite.
(I don't think nuxt-property-decorator is compatible with Nuxt 3.)

[DyKv]

@wattanx, we have a large project and can't rewrite all components without property decorators in one time. But we want to update project step by step and it is main reason to use nuxt bridge. This its purpose - Is not it?
I try use webpack with nito, but build time and memory usage is unacceptably large (described in #582)

[wattanx]

Yes, the purpose of Nuxt Bridge is to provide a step-by-step migration to Nuxt 3.
If nitro and vite are not available for your project, it would be a good idea to implement other migrations first.
(For example, https://nuxt.com/docs/bridge/plugins-and-middleware)

Next, investigate the issue of not being able to use nitro or vite.
If nitro and vite are not available in Nuxt Bridge, I think that nitro and vite will not be available even if you migrate to Nuxt 3 without Nuxt Bridge.

I think it is a recommended to reduce nuxt-property-decorator step by step, because it is not possible to migrate to Nuxt 3 even if Nuxt Bridge is used if nuxt-property-decorator is left as it is.

[DyKv]

The target of issue just is get answer - why nuxt bridge can't build with vite + property decorators and get possible solution (m.b. specific configuration) that helps to resolve it.

Additional notes for issue:

• nuxi dev - works fine
• vite build in pure vue 2 + vue-property-decorator - works fine

Wrong only nuxi build

I think the possible reason is incomplete internal build configuration in nuxt bridge + nuxi

[wattanx]

It may be better to create an issue in the nuxt-property-decorator repository.
(If nuxt-property-decorator supports Bridge, then the problem is on the Nuxt Bridge side.)

If vite is working with pure vue 2 + vue-property-decorator, I'm thinking nuxt-property-decorator is the problem.

[DyKv]

It may be better to create an issue in the nuxt-property-decorator repository. If vite is working with pure vue 2 + vue-property-decorator, I'm thinking nuxt-property-decorator is the problem.

No! I investigate it- problem is not in nuxt-property-decorator or vue-property-decorator - that is same libs

I guess the problem is in - how to nuxt bridge + vite build project with any TS decorators

And i think the problem can be solved, because pure vite build works fine with TS decorators even without additional config

[wattanx]

Oh, sorry. I finally understood.
It's the same problem as #882.
I will investigate.

[wattanx]

The latest version seems to solve this problem by setting the experimentalDecorators option in tsconfig.
https://stackblitz.com/edit/github-yw5f4n