# Fix the react-intl plural format error in an ICU message

## TL;DR

Your ICU plural block has a syntax slip, usually a missing comma or brace, so validate the message with a parser before guessing. Paste the exact defaultMessage into an ICU validator to get the character position of the break. Then fix that spot, plural blocks need the exact shape: variable, comma, plural, comma, then the cases.

## The error

```text
[@formatjs/intl Error: PLURAL_MISMATCH] or SyntaxError while parsing message
"{count, plural, one {# item} other {# items}" (note the missing closing brace)
```

## Fix it

### Step 1: Extract the exact message string that fails

```bash
grep -rn "plural" src/components/Items.js | head -5
```

Expected: You have the full defaultMessage text in front of you.

### Step 2: Validate it with the formatjs parser to get the position

```bash
node -e "const {parse}=require('@formatjs/icu-messageformat-parser'); try{parse('{count, plural, one {# item} other {# items}')}catch(e){console.log(e.message)}"
```

Expected: The parser reports the exact offset of the unexpected token.

### Step 3: Fix the syntax at that position

```bash
node -e "console.log('plural blocks need: {var, plural, one {...} other {...}} with all braces closed')"
```

Expected: The message parses without throwing.

### Step 4: Re-run the component test that renders it

```bash
npx jest src/components/Items.test.js | tail -5
```

Expected: The test passes and the plural renders for counts 1 and 5.

## When to use this

- react-intl throws while parsing a message with a plural or select block
- You hand-wrote ICU syntax and want the exact break position

## When NOT to use this

- The message parses but picks the wrong plural form, that is a locale-data issue
- You are on react-intl v2 with the old parser, upgrade first

## Tool and version compatibility

- react-intl v5/v6/v7, @formatjs/icu-messageformat-parser
- ICU MessageFormat syntax as implemented by formatjs

## Variant phrasings

### select instead of plural throws the same way

Same fix. Select blocks need {var, select, male {...} female {...} other {...}} with an other case always present.

### nested plural inside select

Validate the inner block first on its own, then the outer. Nesting multiplies brace-counting mistakes.

## Why it happens

ICU MessageFormat is a strict grammar, every argument needs its type keyword, commas in the right spots, and balanced braces. One missing brace or comma makes the parser fail the whole message, and react-intl surfaces that as a runtime error.

## Edge cases

- Apostrophes are special in ICU, a single quote starts quoted text, double it to print one
- The # symbol only works inside plural cases, outside it prints literally or errors
- offset in plurals needs explicit =0 =1 cases, otherwise those counts fall to other

## Provenance

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