Inline Component Translations in layers dont work in production #3498
Comments
ThiloHettmer
changed the title
|
I have checked the build and I see: Which means it is in the build but does not get used at all |
|
What version were you on before updating nuxt-i18n to latest? |
|
8.0.0-beta.10 |
|
I have a similar problem where the local translations don't load during ssr. They are then loaded client side with a hydration error in the browser console. It only affects the translations in components but works when used directly in layouts or pages. We're using version 9.4.0 and |
|
Ok, we digged into that topic more and we found out that as soon as we use |
|
I haven't found the source of this behavior yet, but for some reason the translations do work in the build when using template interpolation instead of the <span v-text="t('test-json')" class="text-3xl" /> <!-- failure in build -->
<span class="text-3xl"> {{ t('test-json') }} </span> <!-- works in build --> |
|
Alright, what a journey... I have semi fixed it by adding compiler transformation in the nuxt config and a custom directive as plugin to handle v-text. nuxt.config.ts plugins/i18n-directive.ts It's not pretty, but it works (semi). I have updated the reproduction repository with a new branch that adds the plugin. The server component does not work anymore, but I think it's the right direction. edit: This solution is not ment to be used, as it opens up way more issues. For example it is not possible to pass in a translated text as prop to another component (aka a button or similar). |
|
Are there any new informations on this? It's kind of urgent for us, we might need to revert to v8 |
|
Same here, we can't upgrade nuxt version to 3.16 because of that |
|
Having the same issue, maybe @danielroe @BobbieGoede have a brilliant idea or workaround? |
|
@TimGonnet @fraaalk And are you also experiencing this issue specifically using This may be a regression in nuxt-i18n but could also be a breaking change from a dependency, like |
|
We were on 9.0.0-rc.2 Yes we experiencing this issue specifically using v-text directives I think it's the same issue as #3505 |
|
I wonder if this is the same issue as nuxt/nuxt#31673 |
|
As mentioned by @ThiloHettmer the issue can be pinned down to <script lang="ts" setup> usage in components, without lang="ts" everything runs fine it seems. [email protected] i can provide a minimal reproduction, if needed but i tested it with the already linked repo and can confirm it. |
|
I am unable to reproduce this using the provided reproduction after updating to latest version of |
Environment
Reproduction
https://github.com/ThiloHettmer/nuxt-i18n-layer-issue
Run "make fresh" to clear, install, build and run production build.
Describe the bug
After updating to the latest i18n version our inline component translations do not work anymore in production. From what I can see they are bundled into the build, but it just does not work.
There are 6 different translations in the reproduction repo:
We tried various configs in the nuxt.config, but nothing worked. We went through the unplugin-vue-i18n configs (https://github.com/intlify/bundle-tools/blob/main/packages/unplugin-vue-i18n/README.md) but also with not success.
Is this a bug, or are we doing something wrong?
Additional context
No response
Logs
The text was updated successfully, but these errors were encountered: