JSX element type 'Translation' does not have any construct or call signatures.

[littleboarx]

Reporting a bug?

using the Translation component in the JSX pure funtion component, there's an error in typescript.

Expected behavior

there should be no error there

Reproduction

app.tsx

const I18nComp = ({ keypath, replacer }:{keypath:string, replacer:string[]}) => {
    console.log(keypath, replacer)
    const slots = Object.fromEntries(replacer.map((u, i) => [i, () => <p>{u}</p>]))
    console.log(slots)
    return <Translation keypath={keypath}>
        {slots}
    </Translation>
}
const Apps 

System Info

System:                                                 
    OS: Windows 10 10.0.18362                             
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 2.96 GB / 31.84 GB                            
  Binaries:                                               
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE      
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.18362.1.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    @vitejs/plugin-vue: ^1.9.3 => 1.9.4
    @vitejs/plugin-vue-jsx: ^1.3.0 => 1.3.0
    vite: ^2.6.4 => 2.6.14
    vue: ^3.2.37 => 3.2.37
    vue-i18n: ^9.2.0-beta.40 => 9.2.2
    vue-router: ^4 => 4.0.12
    vue-tsc: ^0.3.0 => 0.3.0

Screenshot

No response

Additional context

I noticed that the defineCompoment wrapper is Annotated, is there any possibility to make it back?

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion
• The provided reproduction is a minimal reproducible example of the bug.

[kazupon]

Thank you for your reporting!

I noticed that the defineCompoment wrapper is Annotated, is there any possibility to make it back?

Yeah, It's at the following URL and is currently being commented on. I think it can be reverted here.
https://github.com/intlify/vue-i18n-next/blob/1cbb16f2672468bce6432f2c16581ecac2cc0e83/packages/vue-i18n-core/src/components/Translation.ts#L81

However, I remember commenting it out because tree-shaking did not work well and increased vue-i18n code size 😅

If the tree-shaking issue can be resolved, I belive that defineComponent should be able to be commented out. :)

[kazupon]

related #1244

[kazupon]

I've just supported.

This fixed version will be released in v9.3.0-beta.15
If you would to use right now, we can use edge-version with npm i --save-dev vue-i18n@npm:vue-i18n-edge