File location can affect extract results with defineMessage

[MPeloquin]

Describe the bug
When using lazy as described here, if the defineMessage function is located after the usage of i18n._ in the file system, then lingui extract will use the id of the message in the msgstr instead of the actual message.

Since we are using --overwrite for our extract, this means the string in the source locale is not translated properly.

It was working fine before in v3 using t instead of msg

To Reproduce

File 1: define the messages

import { msg } from '@lingui/macro';

msg({ id: 'error.message', message: 'Error message' });

File 2: use the messages

import React from 'react';
import { i18n } from '@lingui/core';

interface AComponentProps {}

export const AComponent: React.FC<AComponentProps> = () => {
    const test = i18n._({ id: 'error.message' });
    return <>{test}</>;
};

If file 1 is found before file 2 in the file system, then running extract results in the following po file:

#. js-lingui-explicit-id
msgid "error.message"
msgstr "error.message"

Video:

CleanShot.2023-11-15.at.10.42.54.mp4

Full repro here: https://github.com/MPeloquin/LinguiV4ExtractIssue (with v3 version working)

Expected behavior
I would expect the PO file to always look like

#. js-lingui-explicit-id
msgid "error.message"
msgstr "Error message"

No matter how I structure my files.

Additional context
This is a pattern we use a lot to translated ids coming from the BE

• jsLingui version lingui --version 4.5.0
• Babel version npm list @babel/core 7.23.3
• Macro support:
• I'm using SWC with @lingui/swc-plugin
• I'm using Babel with babel-macro-plugin
• I'm not using macro
• Your Babel config (e.g. .babelrc) or framework you use (Create React App, NextJs, Vite) Vite

[timofei-iatsenko]

This works as intended. You have declaration of the same id 2 times, so depending on which one came first taking precedence on others.

What you really want is to separate "definition" and "usage" of messages. Because right now extractor treat both your usages as "definition"

// here is definition
msg({ id: 'error.message', message: 'Error message' });

// here is the usage
const test = i18n._({ id: 'error.message' });

To stop the extractor treat your second expression as the definition you need:

// pass a variable
const messageId = 'error.message'; // this can came from backend response, or from other file when defined with `msg`
i18n._(messageId);

// or eplicitly ignore extracting from here: 
 /* lingui-extract-ignore */
i18n._('error.message' );

That's also a better strategy for translating BE messages:

// definition
const authErrors = {
  'not_logged': msg`You are not logged`,
  'user_not_exist': msg`No such user`,
}

// usage
const test = i18n._(authErrors[response.error.code]);

[MPeloquin]

Ok, thank you, will use this strategy.