Custom component with library-translate not working

[Ruhtra]

Hello everyone,

I don't know if this post is in the right forum, but we are currently facing an issue while developing a custom component and using the "library-translate" package (in 19.1.0). 

We are using it following the documentation in Zurich ; https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/ui-framework/recipes/tran...

I created a sys_ui_message with a key "test.my.message" on my instance ; installed the package in my project, imported the function "t" and using it in my code like that : 

In development mode, it displays my key (it doesn't translate).

But after deploying my component, it totally breaks with an error in the console ; 

 

The error is coming from the "library-translate" package itself.

Maybe I am using it wrong, but I can't find resources or examples on how to use it.

Do you have some resources or examples to fix this ?

[Ruhtra]

Hello @regis_sarle_ev1,

Thanks a lot for your detailed reply — your solution works perfectly on our side too!

That said, we’re not really fans of forking or directly modifying the library code, so we’ll try to find a more sustainable solution if possible.

Do you know a better alternative than forking the library to make it work properly?

Also, do you have any updates from the ServiceNow support case you mentioned earlier?

And thanks again for sharing your explanation about how the library-translate and requiredTranslationKeys work — that clarification was super helpful!

[regis_sarle_ev1]

Hello @Ruhtra ,

---

@Ruhtra wrote:

And thanks again for sharing your explanation about how the library-translate and requiredTranslationKeys work — that clarification was super helpful!

---

Yes I can imagine, I spent many hours to understand how to make it work !

About the case, I closed it because it was not progressing. After three weeks and a component written specifically so the support can reproduce the issue on their own, I was still asked to explain why it was a Snow issue.

I guess I will check updates on that library over time.

Did you notice the following message when deploying your component ?

Direct access to `process` or `process.env` is NOT RECOMMENDED. Please contact Tectonic Support for remediation advice.

This message appears just because the translate library is included in the component. I also added this to the case but it was not taken into account by the support.

Let me kwow if you finally find a proper solution !

[Aaron _S]

Funny, I had to reverse-engineer the error with the "process" variable and the requiredTranslations in the same way.

Instead of a try/catch I modified the if condition like this:

if(typeof process != 'undefined' && ...)

It's just a bit less code.

---

A small rant about documentation, which adds nothing to the issue at hand:

Like you said, it's not at all properly explained how to add messages to your component.

The documentation for the now-ui.json file does mention the "requiredTranslationKeys" property, but it does a bad job at explaining how it's related to the "t" function/library or how it should be used in general.

The only explanations for the property are these two:

• "Translations that aren't part of the component but are required by component-name."
• "An array of strings."

No mention that this related to the well-known Messages from the sys_ui_message table and no mention how to apply it to your component.

The "connection" to the "t" function is documented here in the reference.
Quote: "Using the t(str) method from the @Servicenow/library-translate package marks a string literal for translation during the build. During runtime, in a supported Scoped App with a translation template, t(str) will replace the string literal with the translated value."

We're to magically know that a "translation template" is actually a Message and the "string literal" we pass to the "t" function is supposed to be the message key.