Compilation fails when text includes @

[finnmich]

The following error is shown if the external json file with the messages has an @ in the text.

Syntax Error: Final loader (./node_modules/@intlify/vue-i18n-loader/lib/index.js) didn't return a Buffer or String

{ "test": "Send us an e-mail on test@test.no" }

Throws the error.

{ "test": "Send us an e-mail on testtest.no" }

Works fine.

[kazupon]

Thank you for your reporting!
@ is a special character from vue-i18n@v9
You need to use literal interpolation
You can avoid with how to use the below:

 "test": "Send us an e-mail on test{'@'}test.no" }

Thanks!

[ghost]

The error message for this needs to be much, much clearer. I spent well over an hour finding out why migrating a vue-i18n setup to Vue 3 always got me back to the following error message:

Final loader (./node_modules/@intlify/vue-i18n-loader/lib/index.js) didn't return a Buffer or String

and it was simply a translation message of the form “Contact info@example.com”.

I would also really like to turn this off completely. I really don’t want something as cryptic as {'@'} to leak into my translation files which get handed over to translators.

[nicooprat]

Stumbled upon the same issue. Did anyone find a way to disable this feature? We support 40+ languages, I can't reasonably migrate all of those translations, then ask translators to just "be careful" with this notation.

Any workaround would be greatly appreciated... 🙏

[nicooprat]

I think I finally found a way to circumvent this by using the messageResolver option of createI18n():

import { get } from 'lodash';

const i18n = createI18n({
    // Prevent '@' character from being used as linked messages
    messageResolver: (obj, path) => get(obj, path, '')?.replaceAll(/@/g, "{'@'}") || null,
})

This way every @ character will be automatically escaped before vue-i18n evaluates it. I hope I didn't miss any edge case.

I think this could be added in the docs as a clue because it can makes migration from v8 to v9 almost impossible.

[Dorianslavov]

I think I finally found a way to circumvent this by using the messageResolver option of createI18n():

import { get } from 'lodash';

const i18n = createI18n({
    // Prevent '@' character from being used as linked messages
    messageResolver: (obj, path) => get(obj, path, '')?.replaceAll(/@/g, "{'@'}") || null,
})

This way every @ character will be automatically escaped before vue-i18n evaluates it. I hope I didn't miss any edge case.

I think this could be added in the docs as a clue because it can makes migration from v8 to v9 almost impossible.

Doesn't seem to work for me

Don't know if it matters but Im using local blocks in components like

<i18n>
{
  "foo": "bar"
}
</i18n>

[nicooprat]

Hard to tell, you could set a debugger in the messageResolver function to see what's going on ;) We don't use translations in components, I may not know a specific behavior to this.

[Dorianslavov]

Hard to tell, you could set a debugger in the messageResolver function to see what's going on ;) We don't use translations in components, I may not know a specific behavior to this.

the weird thing is that even If I set debugger, console logs, etc... nothing happens as if it doesn't go through the messageResolver. Any ideas ?

[nicooprat]

Does it work for classic translation files, I mean not-in-component blocks?

[chojnicki]

@kazupon why there is no option to just disable linking via @ sign if we are not using this functionality at all? What's worse - I'm using petite-vue-i18n that supposed to be very basic, but it still uses "@" in message resolver. If petite is basic, keep it basic. Sure I can overwrite that in message resolver via replacing @ to literals, but this should not be necessary.
I will remember to use "{'@'}" inside translations, but only because I'm developer. I will have to explain this to multiple translators, and mistakes will be easy to make :(

[thany]

Can this issue please be reopened? We need a way to disable linking. That's basically it.

I can't reasonably tell the customer to go through all their translations and replace @ by {'@'} just because "some package" started demanding it (mind you, it worked fine in vue-i18n for Vue 2).

Just because there's a workaround, doesn't mean the issue has dissappeared.