Type-safe Messages problem

[mikaelkristiansson]

The values part when calling useTranslations('namespace') does not work with type-safe arguments.

this is my general.d.ts file

type ComponentsTranslations = typeof import('./src/language/sources/components.json');

type Messages = {
  components: ComponentsTranslations;
};

declare module 'next-intl' {
  interface AppConfig {
    Messages: Messages;
  }
}

and this is the error I get:

Am I missing something or is it not working as it should?
im on "next-intl": "4.3.9"

[amannn]

Can you check what your AppConfig.Messages type looks like on hover?

Should be something like this:

Maybe the dynamic import messes something up. The TypeScript augmentation docs are surely known to work well.

If you continue to have issues, can you provide a reproduction? (e.g. based on next-intl-bug-repro-app-router)

[mikaelkristiansson]

yes it kind of look like that:

I can try setup a bug-repo

[mikaelkristiansson]

@amannn
Ok I managed to produce the problem in the test repo:
mikaelkristiansson/next-intl-bug-safe-type@38bf8af
It occurs since Im depending on separate folders for each namespace and when declaring the types I have to restructure is as an object with the namespace as key and file content as values. Also the file is flat structured and in the getRequestConfig Im unflattening the structure. Perhaps that is causing some kind of mismatch?
Here is the repo:
https://github.com/mikaelkristiansson/next-intl-bug-safe-type

[amannn]

The issue is that you're using a . in a key name: https://github.com/mikaelkristiansson/next-intl-bug-safe-type/blob/38bf8af62275e27d6e541df5e858d2256ede8f80/messages/IndexPage/en.json#L3

next-intl requires a nested style, so this would work:

{
  "title": "Hello!",
  "welcome": {
    "name": "Hello {name}, welcome to our application!"
  }
}

[mikaelkristiansson]

thanks for the help! Ill close the discussion 👍