setLocale, setLocaleCookie functions undefined in useI18n composable when using per-component translations

[borghol]

Environment

• Operating System: Darwin
• Node Version: v16.17.1
• Nuxt Version: 3.2.0
• Nitro Version: 2.2.1
• Package Manager: yarn@1.22.10
• Builder: vite
• User Config: typescript, runtimeConfig, ignore, build, css, modules, vite, i18n
• Runtime Modules: @pinia/nuxt@0.4.6, @nuxtjs/i18n@8.0.0-beta.9, ()
• Build Modules: -

Reproduction

• Create a nuxt project with nuxt-i18n enabled.
• Any strategy will work
• Set detectBrowserLanguage's useCookie to true
• In any component, const { setLocale } = useI18n()
• Call setLocale('en-US')

An error will be generated:
Uncaught TypeError: i18n.setLocale is not a function

Describe the bug

The i18n composable should be returning:

• setLocale
• setLocaleCookie

as they are defined in the type declaration.

However, they do not exist in the object returned by useI18n().

Additional context

No response

Logs

No response

[yeonjulee1005]

me too, these function is not import in useI18n()!

my nuxt info here

**- Operating System: `Darwin`
- Node Version:     `v18.13.0`
- Nuxt Version:     `3.0.0-rc.14`
- Nitro Version:    `1.0.0`
- Package Manager:  `yarn@1.22.19`
- Builder:          `vite`
- User Config:      `ssr`, `target`, `routes`, `app`, `css`, `vite`, `build`, `components`, `imports`, `modules`, `buildModules`, `nitro`, `i18n`, `image`, `vueuse`, `typescript`, `sitemap`, `facebook`, `runtimeConfig`
- Runtime Modules:  `@nuxtjs/i18n@8.0.0-beta.9-27936380.225e0b6`, `@pinia/nuxt@0.4.6`, `@nuxt/image-edge@1.0.0-27919678.2f5b64b`, `@vueuse/nuxt@9.12.0`, `@element-plus/nuxt@1.0.3`, `@nuxtjs/robots@3.0.0`, `@nuxtjs/device@3.1.0`, `nuxt-jsonld@2.0.7`, `nuxt-simple-sitemap@1.0.7`
- Build Modules:    `nuxt-facebook-pixel-module@1.5.0`, `unplugin-icons/nuxt`**

[kazupon]

Thank you for your reporting!
We need the minimul reproduction with github repo or stackbliz.

issue guideline said:

Please provide a link to a repo that can reproduce the problem you ran into. A minimal reproduction is required unless you are absolutely sure that the issue is obvious and the provided information is enough to understand the problem. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided we might close it.

Could you give us it please? 🙏

[borghol]

Hello there @kazupon

Thank you for maintaining nuxt/i18n.

https://stackblitz.com/edit/nuxt-starter-fk8w4s?file=pages/with_translation.vue

I managed to narrow down the issue. When per-component translations are provided, the value of setLocale and setLocaleCookie are undefined. When there are no per-component translations, you can find setLocale and setLocaleCookie. I added two pages /with_translation and /without_translation

Hopefully this helps.

[yeonjulee1005]

when it will release? can i use now? :)

[kazupon]

You can use the edge channel version
https://github.com/nuxt-modules/i18n#install-edge-version

[yeonjulee1005]

@kazupon Thank you ❤️ !!

[guitoun3]

Hello @kazupon,

I have the same issue, even if I use the edge version.

I forked the @borghol stackbliz sample to reproduce the issue with latest Nuxt and i18n versions.

With latest versions:

• @nuxtjs/i18n: 8.0.0-rc.3
• nuxt: 3.6.2
  https://stackblitz.com/edit/nuxt-starter-ivgcei?file=package.json,pages%2Fwith_translation.vue

With edge versions:

• @nuxtjs/i18n: @nuxtjs/i18n-edge
• nuxt: nuxt3@latest
  https://stackblitz.com/edit/nuxt-starter-bboakf?file=package.json,pages%2Fwith_translation.vue

With these version it's working well:

• @nuxtjs/i18n: 8.0.0-beta.10
• nuxt: 3.6.5
  https://stackblitz.com/edit/nuxt-starter-jbjcdt?file=package.json

But after the next version (8.0.0-beta.11) the issue came back.

Thanks

[kazupon]

Thanks!
I've opened as new issue at #2335