The functionality of translations within a TypeScript object is currently malfunctioning

I am facing a perplexing issue with my code. I am utilizing lingui for internationalization in my application. The translations are stored using the `t` macro in a TypeScript object, which can be found here: https://github.com/Flaburgan/disco2very/blob/master/data/ademe/footprintDetailCategories.ts#L8

The translations are successfully extracted and compiled, as evident from the English and French TS files generated after compilation.

These translations are then utilized in this section of the code: https://github.com/Flaburgan/disco2very/blob/master/components/explanation-dialog.tsx#L48

However, post-deployment in production, the translations are not showing up; instead, the keys are being displayed for both English and French versions:

https://i.sstatic.net/zwgkX.png

This is how I implement i18n in my app: https://github.com/Flaburgan/disco2very/blob/master/components/App.tsx#L28

I am puzzled as to what could be causing this issue. Could it be that the array is not recognizing the locale to load? Any insights would be greatly appreciated. Thank you.

typescriptnext.jsinternationalizationlinguijs

Answer №1

Your website seems to have some broken links. It looks like you may have made changes to your main code branch recently. I suggest creating a separate branch for troubleshooting purposes and not making any modifications until the issue is resolved.

If you are working with a large object that requires translation, consider using the msg macro instead of t. The usage is quite similar, as you can utilize i18n._(SOME_MESSAGE_DESCRIPTOR) to access localized content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Convert individual packages within the node_modules directory to ES5 syntax

I am currently working on an Angular 12 project that needs to be compatible with Internet Explorer. Some of the dependencies in my node_modules folder are non es5. As far as I know, tsc does not affect node_modules and starts evaluating from the main opti ...

javascriptangulartypescriptbabeljsecmascript-5

The validation for decimal numbers fails to function when considering the length

I've been struggling to come up with a regular expression for validating decimal numbers of a specific length. So far, I've tried using pattern="[0-9]){1,2}(\.){1}([0-9]){2}", but this only works for numbers like 12.12. What I'm aimin ...

javascriptangulartypescript

Is there a method in TypeScript to make an enum more dynamic by parameterizing it?

I've defined this enum in our codebase. enum EventDesc { EVENT1 = 'event 1', EVENT2 = 'event 2', EVENT3 = 'event 3' } The backend has EVENT1, EVENT2, EVENT3 as event types. On the UI, we display event 1, event 2, a ...

javascriptreactjstypescriptreact-i18next

Tips for transmitting a PDF file using Axios and fetching it with Actix Web

I've tried various methods but none seem to be working for me. In my setup using NextJS, I start by calling the Next API: ... mutateUser( await fetchJson("/path/to/api", { method: "POST", headers: ...

pdfrustnext.jsaxiosactix-web

NX Nextjs Micro front-end solution

Currently, I am utilizing nx.dev to manage my monorepo, and my project requires MFE with Next.js. Despite the fact that @module-federation/nextjs-mf has transitioned into a paid plugin, I am still seeking a solution with open source code (without the @modu ...

next.jsnrwlwebpack-module-federationnx.dev

When performing the operation number.tofixed in Typescript, it will always return a string value instead of a double datatype as expected from parseFloat

let value = 100 value.toFixed(2) -> "100.00" parseFloat(value.toFixed(2)) -> 100 I am encountering an unexpected result with the double type when input is 100.36, but not with 100.00. Framework: loopback4 ...

javascripttypescriptloopback4parsefloattofixed

Unable to locate a compiled version in the designated '/opt/app/.next' folder

Which version of Next.js are you currently using? 10.0.5 What Node.js version is in use? 14 alpine Which browser is being utilized? Chrome What operating system is in operation? Windows How is the application being deployed? Using next build in Docker ...

reactjsdockernext.js

Specialized type for extra restriction on enum matching

In my current project, I am dealing with two enums named SourceEnum and TargetEnum. Each enum has a corresponding function that is called with specific parameters based on the enum value. The expected parameter types are defined by the type mappings Source ...

typescripttypestypescript-types

Is it feasible to programmatically define the onClick action for an element within a ReactNode?

Let's discuss a function called addAlert that adds messages to an array for display as React Bootstrap alerts. While most alerts are simple text, there's one that comes with an "undo the last action" link. The challenge is that when this "undo" l ...

reactjstypescript

Issue with the Nextjs dashboard tutorial project

During my journey to learn Next.js using the Next.js tutor project, I encountered a challenge in Chapter 7 at " Fetching data for RevenueChart/ ". The problem arose while working on the revenue-chart.tsx file. Learn More Here I have tried to troubleshoot ...

next.jsdocumentation

Angular 5 Dilemma: Exporting UI Components without Locating Template

My current project involves developing UI Components that will be used in various web projects within the company. Our plan is to publish these UI components as an npm package on our local repository, and so far, the publishing process has been successful. ...

angulartypescriptrollup

How to retrieve a value from an Angular form control in an HTML file

I have a button that toggles between map view and list view <ion-content> <ion-segment #viewController (ionChange)="changeViewState($event)"> <ion-segment-button value="map"> <ion-label>Map</ion-label> & ...

javascripthtmlangulartypescriptionic4

Issue with Prismjs highlights in Nextjs: server-side rendered code blocks are re-rendered unnecessarily due to mismatch in leading whitespace in class attribute

Currently, I am exploring the implementation of server-side rendering for syntax highlighted code blocks using Prismjs. Although I have successfully achieved this using client-side rendering with useEffect and refs along with prism-react-renderer, I am spe ...

next.jsserver-side-renderingmismatchprismjs

Authenticating a user on every page with NextJS

Looking for suggestions on how to have a token cookie, prompt the user to send a request to the REST API, and allow them to return to the page if successful. Any ideas? ...

apirestauthenticationnext.js

Set up your Typescript project to transpile code from ES6 to ES5 by utilizing Bable

Embarking on a new project, I am eager to implement the Async and Await capabilities recently introduced for TypeScript. Unfortunately, these features are currently only compatible with ES6. Is there a way to configure Visual Studio (2015 Update 1) to co ...

javascriptvisual-studiotypescriptvisual-studio-2015babeljs

What is the best way to pass method props using links in next.js?

I have a navbar component that includes a sign-in link, which is linked to the login page. Within the navbar component, I have a handleLogin function that I want to pass through the link and call in the login component. How can I successfully pass this me ...

reactjsnext.jsreact-props

Can the React Context API in a NextJS application disrupt the Static Site Generator functionality?

My inquiries revolve around nextJS and SSG (static site generator). 1 - My intention is to handle the app state on a global level using react's context api. The information I have suggests that utilizing redux in a next js app disables SSG. Would imp ...

reactjsnext.jsclient-sidereact-context

What is the reason I am unable to utilize a redirect in the layout component in next.js?

I am in the process of developing an application with protected routes. When a user is logged in, they are directed to the dashboard; if not authenticated, they are redirected to the login page. Currently, I have been implementing this logic on every prot ...

reactjsnext.jsserver-side-renderingnext-authsupabase

Executing several asynchronous functions in Angular 2

I am currently developing a mobile app and focusing on authentication. In order to display data to the user on my home page, I need to connect to various endpoints on an API that I have created. Although all endpoints return the correct data when tested i ...

javascriptangulartypescriptrxjs

The type 'ElementTypes' cannot be assigned to type 'ElementTypes.word'

After recently learning TypeScript, I encountered an error that made me think I need to write a narrower type for it or something along those lines. Here is the code snippet in question: enum ElementTypes { h1 = 'H1', word = "WORD" ...

typescript