# 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

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

## Fix it

### Step 1: Find the fragment

```bash
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

```bash
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

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

Expected: The build completes.

### Step 4: Confirm the message is in the catalog

```bash
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