I keep getting missing messages errors

[Pixelatex]

Using the latest next 10.x

I have my file setup as:

src
-- messages
-- -- header
-- -- -- en.json

_app has:

MyApp.getInitialProps = async function getInitialProps(context) {
  const { locale } = context.router
  return {
    ...(await NextApp.getInitialProps(context)),
    messages: require(`../messages/header/${locale}.json`),
  }
}

I have checked that it gets locale correctly but console keeps throwing errors:

 code: 'MISSING_MESSAGE',
  originalMessage: 'No messages available at `undefined`.'

Any ideas what I could be missing here?

[amannn]

Thank you for the report!

Do you think you could share a reproduction (CodeSandbox / Github Repo)? It looks like there's no namespace provided to useTranslations and there are also no messages available.

[amannn]

I've just created a CodeSandbox that you can use for a reproduction: https://codesandbox.io/s/next-intl-template-comtb

[Pixelatex]

@amannn Hello there!

https://codesandbox.io/s/next-intl-template-forked-dsctp?file=/pages/_app.js

So I changed it and added the getInitialProps to the _app so that messages get loaded here based on the locale in the context and they don't seem to work.

According to the docs, this should work so could you take a look?

[Pixelatex]

Seems like what you pass in the _app.getInitialProps doesn't get passed to the _app pageProps.

[amannn]

Your example had an infinite loop. In App.getInitialProps you can't call App.getInitialProps again. I changed it to reference NextApp now.

Seems like what you pass in the _app.getInitialProps doesn't get passed to the _app pageProps.

Yep, when you return something from App.getInitialProps, it's available as a regular prop within App (not pageProps).

Here's a fixed version https://codesandbox.io/s/next-intl-template-fixed-x2lvm

Does that solve your issue?

[Pixelatex]

That was indeed a mistake but I had it correct in my code... what did fix it is that I used pageProps.messages instead of messages directly.

 <NextIntlProvider messages={{...messages, ...pageProps.messages}}>

The docs seem to use both and I only read the last bit. Could you clarify why there's messages in the props and in props.pageProps of _app?

[Pixelatex]

Also, it seems to visually work now with {...messages, ...pageProps.messages} BUT I keep getting:

IntlError: MISSING_MESSAGE: Could not resolve `header` in messages.

and this is purely serverside

[amannn]

Could you clarify why there's messages in the props and in props.pageProps of _app?

You're referring to https://github.com/amannn/next-intl/blob/main/docs/usage.md#providing-messages, right? It really depends on your needs. If you have shared messages, you can provide them in _app.js and otherwise at the page level (or a mix of both).

IntlError: MISSING_MESSAGE: Could not resolve header in messages.

Can you please provide a reproduction for this?

[Pixelatex]

You can see it in my sandbox as well:

link

The error is Error: MISSING_MESSAGE: No messages available at 'undefined'.

Yet the translation does show

[Pixelatex]

Seems like _app is doing multiple renders and the first render doesn't yet have the props passed from getInitialProps

[amannn]

I'm sorry, I don't see that error in the CodeSandbox you've linked to.

[Pixelatex]

Ok... so a lot of figuring out later and it seems like apollo might be the cause of the issue...

[amannn]

Hmm, that's odd. But then it's not related to the lib? I'll close this issue then.

If you find a bug and can provide a reproduction, I'm happy to look into it. Also if anything isn't clear or misleading in the docs, just let me know 🙂

[timonweber]

@Pixelatex Did you solve the issue in the end? I am currently seeing this error when running next build and have no clue where to start debugging …

IntlError: MISSING_MESSAGE: No messages available at `undefined`.

[julioflima]

We need a fallback when a message it was not found, and not a broken application.

The way that the lib shows, doesn't work on server, means that don't overcome this fallback.

[amannn]

@julioflima You need to add use client to the file that renders the provider as mentioned in the error message. See also this stack overflow question.

[Soliha17]

Your example had an infinite loop. In App.getInitialProps you can't call App.getInitialProps again. I changed it to reference NextApp now.

Seems like what you pass in the _app.getInitialProps doesn't get passed to the _app pageProps.

Yep, when you return something from App.getInitialProps, it's available as a regular prop within App (not pageProps).

Here's a fixed version https://codesandbox.io/s/next-intl-template-fixed-x2lvm

Does that solve your issue?

Thanks to you. That also worked with my project