Confusing/inconsistent error messages when erroring on disallowed merge

[Glandos]

🔎 Search Terms

Duplicate identifier 'VueI18n'.
Subsequent property declarations must have the same type.

🕗 Version & Regression Information

• This changed between versions 5.4.5 and 5.5.2

Behavior is the same with 5.7.0-dev.20240830

⏯ Playground Link

No response

💻 Code

shims-augment.d.ts:

/**
 * Overloads VueI18n interface to avoid needing to cast return value to string.
 * @see https://github.com/kazupon/vue-i18n/issues/410
 * It can be resolved with vue-i18n >= 9 (that only works with Vue 3 currently)
 */
import VueI18n from 'vue-i18n/types'
declare module 'vue-i18n/types' {
  export default class VueI18n {
    t (key: Path, locale: Locale, values?: Values): string
    t (key: Path, values?: Values): string
  }
}

declare module 'vue/types/vue' {
  interface Vue {
    $t: typeof VueI18n.prototype.t
  }
}

Excerpt of vue-i18n/types/index.d.ts:

declare namespace VueI18n {
  type Path = string;
  type Locale = string;
  type FallbackLocale = string | string[] | false | { [locale: string]: string[] }
  type Values = any[] | { [key: string]: any };
  type Choice = number;
  interface MessageContext {
    list(index: number): unknown
    named(key: string): unknown
    linked(key: string): VueI18n.TranslateResult
    values: any
    path: string
    formatter: Formatter
    messages: LocaleMessages
    locale: Locale
  }
  type MessageFunction = (ctx: MessageContext) => string;
  type LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;
  interface LocaleMessageObject { [key: string]: LocaleMessage; }
  interface LocaleMessageArray { [index: number]: LocaleMessage; }
  interface LocaleMessages { [key: string]: LocaleMessageObject; }
  type TranslateResult = string | LocaleMessages;
}

declare class VueI18n {
  constructor(options?: VueI18n.I18nOptions)

  readonly messages: VueI18n.LocaleMessages;
  readonly dateTimeFormats: VueI18n.DateTimeFormats;
  readonly numberFormats: VueI18n.NumberFormats;
  readonly availableLocales: VueI18n.Locale[];

  locale: VueI18n.Locale;
  fallbackLocale: VueI18n.FallbackLocale;
  missing: VueI18n.MissingHandler;
  formatter: VueI18n.Formatter;
  formatFallbackMessages: boolean;
  silentTranslationWarn: boolean | RegExp;
  silentFallbackWarn: boolean | RegExp;
  preserveDirectiveContent: boolean;
  pluralizationRules: VueI18n.PluralizationRulesMap;
  warnHtmlInMessage: VueI18n.WarnHtmlInMessageLevel;
  postTranslation: VueI18n.PostTranslationHandler;
  sync: boolean;

  t(key: VueI18n.Path, values?: VueI18n.Values): VueI18n.TranslateResult;
  t(key: VueI18n.Path, locale: VueI18n.Locale, values?: VueI18n.Values): VueI18n.TranslateResult;
}

declare module 'vue/types/vue' {
  interface Vue {
    readonly $i18n: VueI18n & IVueI18n;
    $t: typeof VueI18n.prototype.t;
  }
}

🙁 Actual behavior

On top of that, since $t is in error, my whole code base reports an error whenever it uses the returned value of $t as a string.

🙂 Expected behavior

No error were reported with 5.4.5

Additional information about the issue

I apologize if it's a feature, not a bug, but I wasn't able to find any info on this in the release notes.

I know that narrowing is not safe here, I'm wondering why it was allowed with old Typescript, and not anymore.

[RyanCavanaugh]

We need a shorter repro here if we're going to investigate something that's observably more-correct

[Glandos]

OK, I've managed to set something up at https://github.com/Glandos/test-ts-55/
There are maybe too much dependencies, but it's a strip down version of my project. With dependencies in yarn cache with LFS.
Maybe there's also too much .d.ts. Tell me if it's minimal enough :)

[RyanCavanaugh]

20-30 lines in three files (plus config) or less is the target here; that's all that should be needed to demonstrate the described problem if it's actually a bug

[Glandos]

OK, I think my reproduction repository at https://github.com/Glandos/test-ts-55 is now stripped down.
I removed every unneeded dependency, like eslint or babel. There still is 2 .d.ts, to mimic vue-cli default layout, but they are quite small.

So, valid test case is:

test-ts-55 on  main via  v16.20.2 ❯ yarn add -D typescript@5.4.5; yarn build
➤ YN0000: ┌ Resolution step
➤ YN0002: │ test-ts-55@workspace:. doesn't provide @types/node (p3effd), requested by ts-node
➤ YN0060: │ test-ts-55@workspace:. provides vue (peb3bf) with version 2.7.16, which doesn't satisfy what @intlify/vue-i18n-loader requests
➤ YN0060: │ test-ts-55@workspace:. provides vue-i18n (p5b9ff) with version 8.28.2, which doesn't satisfy what @intlify/vue-i18n-loader and some of its descendants request
➤ YN0002: │ vue-i18n-bridge@npm:9.14.0 [2d053] doesn't provide vue (pc32ff), requested by vue-demi
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 270ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 453ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 267ms
➤ YN0000: Done with warnings in 1s 111ms
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


⠴  Building for production...

 DONE  Compiled successfully in 2046ms                                                                                                                                                                                                 11:41:53

  File                                 Size                                                                                               Gzipped

  dist/js/chunk-vendors.5bb89914.js    153.42 KiB                                                                                         50.37 KiB
  dist/js/app.20744630.js              1.67 KiB                                                                                           0.90 KiB

  Images and other types of assets omitted.
  Build at: 2024-09-24T09:41:53.869Z - Hash: 28da518052812f49 - Time: 2046ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

And invalid one:

test-ts-55 on  main via  v16.20.2 ⏰6s345ms❯ yarn add -D typescript@5.5.2; yarn build
➤ YN0000: ┌ Resolution step
➤ YN0002: │ test-ts-55@workspace:. doesn't provide @types/node (p3effd), requested by ts-node
➤ YN0060: │ test-ts-55@workspace:. provides vue (peb3bf) with version 2.7.16, which doesn't satisfy what @intlify/vue-i18n-loader requests
➤ YN0060: │ test-ts-55@workspace:. provides vue-i18n (p5b9ff) with version 8.28.2, which doesn't satisfy what @intlify/vue-i18n-loader and some of its descendants request
➤ YN0002: │ vue-i18n-bridge@npm:9.14.0 [2d053] doesn't provide vue (pc32ff), requested by vue-demi
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 755ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ typescript@npm:5.5.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ typescript@patch:typescript@npm%3A5.5.2#~builtin<compat/typescript>::version=5.5.2&hash=379a07 can't be found in the cache and will be fetched from the disk
➤ YN0019: │ typescript-npm-5.4.5-8568a42232-53c879c6fa.zip appears to be unused - removing
➤ YN0019: │ typescript-patch-cef5f9d32b-d59e26e74f.zip appears to be unused - removing
➤ YN0000: └ Completed in 0s 410ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 480ms
➤ YN0000: Done with warnings in 1s 802ms
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


⠼  Building for production...

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                11:42:12

 error  in src/main.ts:6:9

TS2769: No overload matches this call.
  Overload 1 of 2, '(plugin: PluginObject<unknown> | PluginFunction<unknown>, options?: unknown): VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<...>>>', gave the following error.
    Argument of type 'typeof VueI18n' is not assignable to parameter of type 'PluginObject<unknown> | PluginFunction<unknown>'.
      Property 'install' is missing in type 'typeof VueI18n' but required in type 'PluginObject<unknown>'.
  Overload 2 of 2, '(plugin: PluginObject<any> | PluginFunction<any>, ...options: any[]): VueConstructor<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<...>>>', gave the following error.
    Argument of type 'typeof VueI18n' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
      Property 'install' is missing in type 'typeof VueI18n' but required in type 'PluginObject<any>'.
    4 |
    5 | // Bridge is done in vue.config.js
  > 6 | Vue.use(VueI18n)
      |         ^^^^^^^
    7 |
    8 | const i18n = createI18n({
    9 |   legacy: false,

 error  in src/main.ts:24:13

TS2322: Type 'TranslateResult' is not assignable to type 'string'.
  Type 'LocaleMessages' is not assignable to type 'string'.
    22 |   computed: {
    23 |     title() {
  > 24 |       const title: string = this.$t('hello')
       |             ^^^^^
    25 |       return title
    26 |     }
    27 |   }

 ERROR  Error: Build failed with errors.
Error: Build failed with errors.
    at /home/adrien/Documents/netbeans/test-ts-55/node_modules/@vue/cli-service/lib/commands/build/index.js:207:23
    at /home/adrien/Documents/netbeans/test-ts-55/node_modules/webpack/lib/webpack.js:168:8
    at /home/adrien/Documents/netbeans/test-ts-55/node_modules/webpack/lib/HookWebpackError.js:67:2
    at _done (eval at create (/home/adrien/Documents/netbeans/test-ts-55/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (/home/adrien/Documents/netbeans/test-ts-55/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:34:22)

[jakebailey]

This bisects to #58326. @iisaduan

Your repro doesn't need yarn build, just tsc, however needs skipLibCheck: true and types: [].

[Glandos]

I've updated my repo to use this simplified test case.

Is there anything I can do, given the change brought by #58326? Is my use case not allowed anymore?

[iisaduan]

@Glandos the new errors are intended, since augmenting classes can only be done with interfaces (Vuei18n is defined as a class within its package). To fix the new errors, here your code is trying to augment using class but should use interface instead:

export default interface VueI18n {

For more info/other ways to fix, see the handbook on disallowed merges.

The definition of $t in the augmentation 'vue/types/vue' in that file is also not needed, since (typeof Vue).$t should automatically be updated when the merge is done correctly.

We should probably consider improving the error messages. With #58326, I intended to give duplicate identifier esque errors for disallowed merges, and it's weird that the minimal repro case doesn't give that error (while the original report does)

[Glandos]

Thanks for the clear explanation. I'm closing this, since using interface to augment and merge instead of class is working well.

[iisaduan]

I'm going to leave it as an open issue, as this issue does report inconsistent error messages that should be fixed