Nextjs, Typescript: Property 'menu1' does not exist on type 'string | AbstractIntlMessages'. Property 'menu1' does not exist on type 'string'

Question

I use Nextjs, typescript and next-intl.

in my layout.tsx i have following code:

import {NextIntlClientProvider} from 'next-intl';
import {getMessages} from 'next-intl/server';

export default async function RootLayout({
  children,
  params: {locale}
}: Readonly<{
  children: React.ReactNode;
  params: {locale: string};
}>) {

  const messages = await getMessages();



  return (
    <html lang={locale} className="scroll-smooth">
      <body className={inter.className}>
      <header className="fixed  bg-black w-full "><Navigation locale={locale} menu1={messages.Menu.menu1} menu2={messages.Menu.menu2} submenu1={messages.Menu.submenu1} submenu2={messages.Menu.submenu2}/></header>

My en.json file looks like:

{
    "Menu": {
        "menu1": "first",
        "menu2": "second",
        "submenu1": "sub1",
        "submenu2": "sub2"
    }
}

if i run the site local it works fine but i cant make a build. reason ist that when i call the value menu1={messages.Menu.menu1}

I got this message in vscode:

Property 'menu1' does not exist on type 'string | AbstractIntlMessages'.
  Property 'menu1' does not exist on type 'string'.ts(2339)
any

how can i fix this

if i run the site local it works fine but i cant make a build. reason ist that when i call the value menu1={messages.Menu.menu1}

I got this message in vscode:

Property 'menu1' does not exist on type 'string | AbstractIntlMessages'.
  Property 'menu1' does not exist on type 'string'.ts(2339)
any

how can i fix this your text

Raja Jahanzaib · Accepted Answer · 2024-07-24 08:12:12Z

0

The issue is TypeScript cannot certain about the structure of 'messages' object returned by 'getMessages' you have to define interface for it like this:

interface IMessages {
    Menu: {
           menu1: string;
            menu2: string;
            submenu1: string;
            submenu2: string;
          };
     }

and assign where you are calling 'getMessages like this:

const messages = await getMessages<IMessages>();

answered Jul 24, 2024 at 8:12

Raja Jahanzaib

7005 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nextjs, Typescript: Property 'menu1' does not exist on type 'string | AbstractIntlMessages'. Property 'menu1' does not exist on type 'string'

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related