i18n breaks Nuxt Auto-Import functionality!

[Bombastickj]

Environment

Nuxt project info:

---

• Operating System: Windows_NT
• Node Version: v20.6.1
• Nuxt Version: 3.7.4
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, typescript, imports, modules, pinia, i18n
• Runtime Modules: @pinia/[email protected], @nuxtjs/[email protected]
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/nuxt-starter-cmht5h?file=stores%2Fpage.ts

Describe the bug

The error occurs when using the pinia & i18n packages for nuxt 3. All auto-imports for components are lost, when importing a component inside a pinia store, to define a InstanceType. I've tested to remove the i18n package and all auto-imports were back to normal.

Additional context

Also checked that Volar (takeover) is active. Bug can be viewed easily when following small instructions inside /stores/page.ts

Logs

No response

[kazupon]

Thank you for you reporting!

Hmm, 🤔
nuxt i18n is just implemented using addImports.
We’re implementing it using the API provided by nuxt/kit.

i18n/src/module.ts

Lines 297 to 315 in 8a33fec

	await addImports([
	{ name: 'useI18n', from: vueI18nPath },
	...[
	'useRouteBaseName',
	'useLocalePath',
	'useLocaleRoute',
	'useSwitchLocalePath',
	'useLocaleHead',
	'useBrowserLocale',
	'useCookieLocale',
	NUXT_I18N_COMPOSABLE_DEFINE_ROUTE,
	NUXT_I18N_COMPOSABLE_DEFINE_LOCALE,
	NUXT_I18N_COMPOSABLE_DEFINE_CONFIG
	].map(key => ({
	name: key,
	as: key,
	from: resolve(runtimeDir, 'composables')
	}))
	])

I don't see why combining it with @pinia/nuxt would cause issues. /cc @posva

@danielroe
Is there anything in nuxt i18n's auto-import implementation that is not within the guidelines?

[posva]

I have no idea why combining both modules would break auto imports 😅

[BobbieGoede]

After trying the reproduction in stackblitz and locally, I can't reproduce the issue described.

Uninstalling and removing @nuxtjs/i18n and its configuration seems to have no effect, SomePopup gets inferred correctly in app.vue but cannot be found inside the page.ts store with the popupDefined line uncommented. Edited reproduction here

Maybe I'm doing something wrong, can someone else confirm this issue is happening as described?

[Bombastickj]

After trying the reproduction in stackblitz and locally, I can't reproduce the issue described.

Uninstalling and removing @nuxtjs/i18n and its configuration seems to have no effect, SomePopup gets inferred correctly in app.vue but cannot be found inside the page.ts store with the popupDefined line uncommented. Edited reproduction here

Maybe I'm doing something wrong, can someone else confirm this issue is happening as described?

Yeah to use the InstanceType, you have to uncomment the import in line 9 inside 'page.ts'. Then it will break locally. Mabe the Component needs to be imported another way? My problem is, that it fully works when i18n is not installed..

[BobbieGoede]

Ah I misread the instructions and didn't see the import on line 9 had to be uncommented as well!

Hmmm, after playing around some more, I noticed that removing imports from nuxt.config.ts seems to make it work as expected.

But after trying more things I noticed that it also works while keeping the imports config, and restarting Volar. Not sure why that is..

Screen.Recording.2023-10-11.at.11.24.35.mov

[danielroe]

I can't reproduce when downloading that stackblitz and refreshing lockfile.

[Bombastickj]

I can't reproduce when downloading that stackblitz and refreshing lockfile.

Its all fine inside the store. What's not working is the auto-import inside all other files like app.vue when popupDefined is uncommented all components become the type 'unknown'

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 Reproduction starter (v8 and higher)
👉 Reproduction starter (edge)

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[Bombastickj]

Hi guys, I have some videos to visualize the bug that is happening.

After looking more into it, I've found out that the bug does not only happen inside a pinia store:

i18n_added.mp4

When @nuxt/i18n is removed no bug appears:

i18n_removed.mp4

Updated reproduction:
https://stackblitz.com/edit/nuxt-starter-cmht5h?file=stores%2Fpage.ts

Hope this helps with clarification @kazupon

[Applelo]

Hi all, I can confirm @Bombastickj reproduction, I have the same issue with my current project using nuxt i18n last version. All Vue components (from /components folder or coming from other plugins/modules) inside my template are reported as unknow.
[EDIT] What is weird, the components are imported correctly when call inside another components (inside the components folder) but not inside the /pages folder.

[jensk]

I also can confirm this issue

[metkm]

[EDIT] What is weird, the components are imported correctly when call inside another components (inside the components folder) but not inside the /pages folde

This doesn't work for me at all. All the autocompletion just dies even inside the components folder.

[Bombastickj]

Hello,
do you guys have any updates on why this is happening? @kazupon @BobbieGoede

[BobbieGoede]

I'm still looking into what the exact source of this issue is, it's not that easy to debug unfortunately.

I have been trying to find what is breaking the type inference by removing type imports inside .nuxt and restarting the vue language server, which is tedious.

By doing so I have been able to narrow it down to types provided by @intlify/vue-i18n-bridge (in vue-i18n-routing) and vue-i18n (in @nuxtjs/i18n), if I remove type imports from those dependencies the type inference seems to work again. Next I will have to figure out what is different about those types, that will take some more time 😭

[kazupon]

@BobbieGoede
I reproduced it in my environment. I really appreciate your efforts.

[BobbieGoede]

It seems like these lines are breaking the type inference https://github.com/intlify/vue-i18n-next/blob/master/packages/vue-i18n/src/vue.d.ts#L1232-L1239

[Bombastickj]

Thank you so much @BobbieGoede!

[rchl]

It seems like these lines are breaking the type inference intlify/vue-i18n-next@master/packages/vue-i18n/src/vue.d.ts#L1232-L1239

I haven't looked myself but in that case the issue is likely that it extends GlobalComponents in @vue/runtime-core but should be extending it in vue module instead.

And also it should likely first import 'vue' as the original module needs to be referenced first, otherwise (depending on loading order) the i18n module can overwrite the module instead of extending it.

[kazupon]

And also it should likely first import 'vue' as the original module needs to be referenced first, otherwise (depending on loading order) the i18n module can overwrite the module instead of extending it.

The types provided by vue-i18n in npm will be combined with typescript-generated types and vue-extended types defined in src/vue.d.ts when building.
The combined types have import vue, so your point should not be a problem.

[metkm]

#2490 (comment) This is related. Probably can be closed now if the issue is fixed

[Bombastickj]

Hi guys!
After having some small issues with opting into the edge release channel, I finally got it working! If anyone runs into some trouble installing, I used node 18.18.2. Don't forget to remove lock file and node_modules before installing.

Thank you guys so much!! @BobbieGoede @kazupon

Fixed reproduction