Next.js Discord

Discord Forum

Help fix production error about new next js awaiting props

Answered
Tomistoma posted this in #help-forum
Open in Discord
Avatar
TomistomaOP
help me fix these errors
Answered by joulev
import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import { notFound } from "next/navigation";
import { routing } from "@/i18n/routing";
import { Locales } from "@/types";
import "@/styles/globals.css";

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;

  // Ensure that the incoming `locale` is valid
  if (!routing.locales.includes(locale as Locales)) {
    notFound();
  }

  // Providing all messages to the client
  // side is the easiest way to get started
  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
View full answer

13 Replies

Avatar
TomistomaOP
Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

.next/types/app/[locale]/layout.ts:34:31
Type error: Type '{ children: ReactNode; params: { locale: string; }; }' does not satisfy the constraint 'LayoutProps'.
  Types of property 'params' are incompatible.
    Type '{ locale: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]

  32 |
  33 | // Check the prop type of the entry function      
> 34 | checkFields<Diff<LayoutProps, FirstArg<TEntry['default']>, 'default'>>()
     |                               ^
  35 |
  36 | // Check the arguments and return type of the generateMetadata function
  37 | if ('generateMetadata' in entry) {
Static worker exited with code: 1 and signal: null
import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import { notFound } from "next/navigation";
import { routing } from "@/i18n/routing";
import { Locales } from "@/types";
import "@/styles/globals.css";

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const { locale } = await params;

  // Ensure that the incoming `locale` is valid
  if (!routing.locales.includes(locale as Locales)) {
    notFound();
  }

  // Providing all messages to the client
  // side is the easiest way to get started
  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
Avatar
joulev
import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import { notFound } from "next/navigation";
import { routing } from "@/i18n/routing";
import { Locales } from "@/types";
import "@/styles/globals.css";

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;

  // Ensure that the incoming `locale` is valid
  if (!routing.locales.includes(locale as Locales)) {
    notFound();
  }

  // Providing all messages to the client
  // side is the easiest way to get started
  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
Answer
Avatar
TomistomaOP
@joulev 
Creating an optimized production build ...
uncaughtException [Error: EPERM: operation not permitted, open 'D:\Devolepment Folder 'dont touch'\Projects\My own\LightByte\light-byte\.next\trace'] {   
  errno: -4048,
  code: 'EPERM',
  syscall: 'open',
  path: "D:\\Devolepment Folder 'dont touch'\\Projects\\My own\\LightByte\\light-byte\\.next\\trace"
}
what is that ??
Avatar
TomistomaOP
alright
same errors
Image
@joulev
Avatar
@Tomistoma same errors
Avatar
joulev
it's not { locale: Promise<string> } it is Promise<{ locale: string }>
Avatar
TomistomaOP
Oh! if forgot to commit the new changes, thanks!
Avatar
@Yi Lon Ma just an advice, avoid spaces in folder names, especially in windows
Avatar
TomistomaOP
Alright, thanks for your advice!