babel extraction agent failed on jsx fragment during catalog build

Fix the babel extraction agent failing on a JSX fragment during catalog build

TL;DR

The babel plugin cannot extract from a bare fragment, so give the message a real wrapper element. This is the agent-side twin of the lingui fragment issue: the transform needs a host element. Wrap the message content in a span or div, rebuild the catalog, and extraction succeeds.

The error

Babel extraction agent: cannot extract message from JSX fragment
catalog build fails at src/components/Notice.js

Fix it

Step 1: Find the fragment

grep -n "Fragment" src/components/Notice.js | head -5

Expected: You see the fragment components, including short-syntax ones nearby, around the message.

Step 2: Wrap it in a real element

node -e "console.log('replace the bare fragment with a span around the message content')"

Expected: The message has a host element.

Step 3: Rebuild the catalog

node scripts/build-catalog.js | tail -3

Expected: The build completes.

Step 4: Confirm the message is in the catalog

grep -n "notice" locale/en.json | head -3

Expected: The string extracted.

When to use this

• Babel-based extraction fails on JSX fragments
• The catalog build points at a fragment

When NOT to use this

• Fragments work but the message is wrong, check the message definition
• Non-fragment JSX fails, check the babel plugin order

Tool and version compatibility

• Babel extraction plugins for i18n
• JSX fragments, short and long syntax

Variant phrasings

fragment needed for layout reasons

Use a span with display: contents. It keeps the layout flat and gives the transform its host.

many fragments across the codebase

Add a lint rule against bare fragments in message files, fix them in one pass.

Why it happens

Babel extraction plugins transform message components by visiting their JSX host element. Fragments compile away to nothing, so the visitor finds no element to attach the extracted message to and fails the file.

Edge cases

• display: contents wrappers are invisible to layout but visible to the transform
• Keys on fragment children do not help, the fragment itself is the problem
• Test the built catalog, not just extraction, to catch silent drops

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_EpwiRuZWnsWKBLnfjaj0FA