TypeError: Cannot read properties of undefined (reading 'locale') #469

desiboli · 2023-08-22T14:39:51Z

desiboli
Aug 22, 2023

Description

App is working fine, but I'm seeing this annoying error message in the console:

I was not able to reproduce in codesandbox but maby someone could help me understand where this comes from 🙏

error src/app/[locale]/layout.tsx (45:13) @ locale
- error TypeError: Cannot read properties of undefined (reading 'locale')
    at RootLayout (./src/app/[locale]/layout.tsx:40:16)
    at stringify (<anonymous>)
  43 | 
  44 |   // Show a 404 error if the user requests an unknown locale
> 45 |   if (params.locale !== locale) {
     |             ^
  46 |     notFound()
  47 |   }
  48 |

This is my RootLayout file:

import { Toaster } from "@/components/ui/toaster"
import Providers from "@/components/Providers"

import "@/styles/globals.css"

import { notFound } from "next/navigation"
import { useLocale } from "next-intl"
import { getTranslator } from "next-intl/server"

import { fontLexend } from "@/lib/fonts"
import { cn } from "@/lib/utils"
import { TailwindIndicator } from "@/components/TailwindIndicator"

export async function generateMetadata({
params: { locale },
}: {
params: { locale: string }
}) {
const t = await getTranslator(locale, "Meta")

return {
  title: t("title"),
}
}

export default function RootLayout({
children,
modal,
params,
}: {
children: React.ReactNode
modal: React.ReactNode
params: { locale: string }
}) {
const locale = useLocale()

// Show a 404 error if the user requests an unknown locale
if (params.locale !== locale) {
  notFound()
}

return (
  <html lang={locale} suppressHydrationWarning>
    <body
      className={cn(
        "min-h-screen bg-background font-body antialiased",
        fontLexend.variable
      )}
    >
      <Providers>
        {children}
        {modal}
      </Providers>
      <Toaster />
      <TailwindIndicator />
    </body>
  </html>
)
}

Mandatory reproduction URL (CodeSandbox or GitHub repository)

Reproduction description

Expected behaviour

Answered by desiboli

Sep 1, 2023

Ok I was able to fix this!

The RootLayout code above, I moved it outside of the [locale] folder but kept a copy of it inside the [locale] folder and renamed it to "LocaleLayout".

The RootLayout file code now looks like this:

// app/layout.tsx (direct copy from next-intl examples https://github.com/amannn/next-intl/blob/main/examples/example-next-13-next-auth/src/app/layout.tsx

import { type ReactNode } from "react"

import "@/styles/globals.css"

type Props = {
  children: ReactNode
}

// Even though this component is just passing its children through, the presence
// of this file fixes an issue in Next.js 13.3.0 where link clicks that switch
// the locale would otherwise be ignored.
expo…

View full answer

amannn · 2023-08-22T15:22:16Z

amannn
Aug 22, 2023
Maintainer

I'll move this to a discussion, since it's not an issue but a usage question—I hope you understand!

0 replies

desiboli · 2023-09-01T13:41:11Z

desiboli
Sep 1, 2023
Author

Ok I was able to fix this!

The RootLayout code above, I moved it outside of the [locale] folder but kept a copy of it inside the [locale] folder and renamed it to "LocaleLayout".

The RootLayout file code now looks like this:

// app/layout.tsx (direct copy from next-intl examples https://github.com/amannn/next-intl/blob/main/examples/example-next-13-next-auth/src/app/layout.tsx

import { type ReactNode } from "react"

import "@/styles/globals.css"

type Props = {
  children: ReactNode
}

// Even though this component is just passing its children through, the presence
// of this file fixes an issue in Next.js 13.3.0 where link clicks that switch
// the locale would otherwise be ignored.
export default function RootLayout({ children }: Props) {
  return children
}

My LocaleLayout looks like this now:

// app/[locale]/layout.tsx

import { notFound } from "next/navigation"
import { useLocale } from "next-intl"
import { getTranslator } from "next-intl/server"

import { fontLexend } from "@/lib/fonts"
import { cn } from "@/lib/utils"
import { Toaster } from "@/components/ui/toaster"
import Providers from "@/components/Providers"
import { TailwindIndicator } from "@/components/TailwindIndicator"

export async function generateMetadata({
  params: { locale },
}: {
  params: { locale: string }
}) {
  const t = await getTranslator(locale, "Meta")

  return {
    title: t("title"),
  }
}

export default function LocaleLayout({
  children,
  modal,
  params,
}: {
  children: React.ReactNode
  modal: React.ReactNode
  params: { locale: string }
}) {
  const locale = useLocale()

  // Show a 404 error if the user requests an unknown locale
  if (params.locale !== locale) {
    notFound()
  }

  /*
   * We DON'T want suppressHydrationWarning.
   * Following this issue https://github.com/pacocoursey/next-themes/issues/152
   * and https://github.com/pacocoursey/next-themes/issues/169
   */
  return (
    <html lang={locale} suppressHydrationWarning>
      <body
        className={cn(
          "min-h-screen overflow-x-auto bg-background font-body antialiased",
          fontLexend.variable
        )}
      >
        <Providers>
          {children}
          {modal}
        </Providers>
        <Toaster />
        {/* // TODO: Hide/Remove before production!  */}
        <TailwindIndicator />
      </body>
    </html>
  )
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: Cannot read properties of undefined (reading 'locale') #469

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

TypeError: Cannot read properties of undefined (reading 'locale') #469

desiboli Aug 22, 2023

Description

Mandatory reproduction URL (CodeSandbox or GitHub repository)

Reproduction description

Expected behaviour

Replies: 2 comments

amannn Aug 22, 2023 Maintainer

desiboli Sep 1, 2023 Author

desiboli
Aug 22, 2023

amannn
Aug 22, 2023
Maintainer

desiboli
Sep 1, 2023
Author