react-intl - accessing nested messages : <p>I'm trying to use <code>react-intl</code> package inside an app. The app is rendered on the server so I wrote some code to determine which language to use and serve into <code>IntlProvider</code>.</p>

<p>Translations were provided in <code>messages.js</code> file and they look like this:</p>

<pre><code>export default {
  en: {
    message: '...some message',
    nested: {
      anotherMessage: '...another message',
    }
  }
  de: {
    // ...
  }
}
</code></pre>

<p>What I do is something like this:</p>

<pre><code>// import messages from './messages.js'
// Check the locale for the user (based on cookies or other things)
const locale = ...
// Get the required messages
const messagesForLocale= = messages[locale];
// Supply the messages to the IntlProvider
&lt;IntlProvider locale={locale} messages={messagesForLocale}&gt;
  // ...
&lt;/IntlProvider&gt;
</code></pre>

<p>Then when I use <code>FormattedMessage</code> component I can't access the nested message (<code>anotherMessage</code>) with code like this:</p>

<pre><code>&lt;FormattedMessage id="nested.anotherMessage" ... /&gt;
</code></pre>

<p>But <code>message</code> is accessible.</p>

<p>Any ideas where I made the mistake, or maybe I'm missing something in the whole concept?</p>
