Nuxt•5mo ago

Nuxt4 tsconfig issues

I am using Mikro-ORM with Nuxt 4 and getting the following type errors when using decorators:

@Entity({ tableName: 'roles' })
export class Role {
    @PrimaryKey()
    id: string = v4();
    //...
}

@Entity({ tableName: 'roles' })
export class Role {
    @PrimaryKey()
    id: string = v4();
    //...
}

Unable to resolve signature of property decorator when called as an expression. Argument of type 'undefined' is not assignable to parameter of type 'Partial<any>'.ts(1240)

So I have added the following to my nuxt.config.ts:

typescript: {
        tsConfig: {
            compilerOptions: {
                experimentalDecorators: true,
                emitDecoratorMetadata:  true,
                esModuleInterop:        true,
            },
        },
    },

typescript: {
        tsConfig: {
            compilerOptions: {
                experimentalDecorators: true,
                emitDecoratorMetadata:  true,
                esModuleInterop:        true,
            },
        },
    },

However I cannot see these options in any of the generated tsconfig files in the .nuxt directory and the type error persists. I have also tried adding them to the root tsconfig.json file, with no success. Am I missing something?

9 Replies

kapa.ai•5mo ago

Hi @Vex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're encountering issues with decorators in Nuxt 4 and TypeScript, specifically with Mikro-ORM. Here’s what’s happening and how Nuxt 4 handles decorators and TypeScript config: 1. Decorators in Nuxt 4 Nuxt 4 supports the new TC39 decorators proposal, not the legacy TypeScript experimentalDecorators implementation. To enable decorators in Nuxt 4, you must set the following in your nuxt.config.ts:

export default defineNuxtConfig({
  experimental: {
    decorators: true,
  },
})

export default defineNuxtConfig({
  experimental: {
    decorators: true,
  },
})

This enables support for the TC39 proposal decorators, which is different from TypeScript’s legacy implementation. The options experimentalDecorators and emitDecoratorMetadata in your tsconfig are not used by Nuxt 4’s decorator support and will not be reflected in the generated .nuxt/tsconfig.*.json files. The new implementation is powered by esbuild and is not compatible with the old TypeScript decorator metadata system. See the Nuxt documentation on decorators and the related PR.

Note: If you have previously used experimentalDecorators from TypeScript, the implementation and types are different. Please read the proposal before enabling.
There may be changes before this finally lands in the JS standard.

2. Why Your tsconfig Changes Don’t Work Nuxt 4 generates multiple context-specific tsconfig files and manages most options internally. Overriding compilerOptions in your nuxt.config.ts or root tsconfig.json will not affect decorator support, as Nuxt’s decorator support is handled via the experimental.decorators flag, not TypeScript’s experimentalDecorators option.
If you try to add experimentalDecorators or emitDecoratorMetadata, they will not be picked up by Nuxt’s build process for decorators, and the type error will persist because the decorator implementation is different and not compatible with libraries expecting the legacy TypeScript decorator behavior Nuxt Decorators Docs API Reference. 3. Compatibility with Mikro-ORM Mikro-ORM expects the legacy TypeScript decorator implementation (experimentalDecorators and emitDecoratorMetadata). Nuxt 4’s support is for the new TC39 decorators, which are not compatible with libraries that require the old metadata system. This is likely the root cause of your type errors. 4. What Can You Do? - If you need legacy decorator support: Currently, Nuxt 4 does not support the legacy TypeScript decorator implementation required by Mikro-ORM. There is no documented way to enable experimentalDecorators and emitDecoratorMetadata in a way that will work with Nuxt 4’s build system. - If you want to use decorators in Nuxt 4: You must use the new TC39 proposal style, and your libraries must also support it. Summary:
You cannot use TypeScript’s legacy decorator implementation (experimentalDecorators, emitDecoratorMetadata) with Nuxt 4. Decorator support in Nuxt 4 is opt-in via experimental.decorators: true and only supports the new TC39 proposal, which is not compatible with Mikro-ORM’s current requirements. There is no workaround documented in the knowledge sources to enable legacy decorator support in Nuxt 4. If you need to use Mikro-ORM, you may need to use Nuxt 2 or a non-Nuxt build setup until either Nuxt or Mikro-ORM supports the new decorator proposal. Nuxt Decorators Docs | API Reference | PR: Decorators Support ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@352818110476058624> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

VexOP•5mo ago

@kapa.ai Would TypeORM have the same issues as it uses a similar decorator pattern?

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, TypeORM would likely have the same issues as Mikro-ORM when used with Nuxt 4. Both libraries rely on the legacy TypeScript decorator implementation (experimentalDecorators and emitDecoratorMetadata). Nuxt 4, however, only supports the new TC39 decorators proposal via the experimental.decorators option, which is not compatible with the legacy TypeScript decorator system required by TypeORM Nuxt Decorators Docs. The knowledge sources do not mention any built-in support or workaround for using TypeORM's legacy decorators with Nuxt 4. Therefore, you can expect similar type errors and incompatibility issues as you experienced with Mikro-ORM. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@352818110476058624> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

VexOP•5mo ago

@kapa.ai I would rather not change my ORM out to something new, is there no way round this? I'd rather stick with the non TC39 decorators and continue using the typescript ones

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but based on the knowledge sources provided, there is no documented way to enable or use the legacy TypeScript decorators (experimentalDecorators and emitDecoratorMetadata) with Nuxt 4. Nuxt 4's decorator support is explicitly for the new TC39 proposal and is not compatible with the legacy TypeScript decorator system required by ORMs like Mikro-ORM or TypeORM. The documentation cautions that the implementation and types are different, and there may be breaking changes before the TC39 proposal is finalized Nuxt Decorators Docs API Reference PR: Decorators Support. At this time, the knowledge sources do not mention any workaround or configuration to continue using the legacy TypeScript decorators in Nuxt 4. If you need this feature, you may need to remain on Nuxt 2 or use a different build setup until support changes in either Nuxt or your ORM. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@352818110476058624> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

VexOP•5mo ago

Any humans able to answer this, as this seems pretty bleak?

Gaming

Programming

Nuxt4 tsconfig issues

Did you find this page helpful?