App RouterでextendThemeがエラーを出してしまう #692

Teramon1031 · 2024-01-31T19:32:07Z

Teramon1031
Jan 31, 2024

Next.js 14.1.0、App RouterでYamada UIを使用させていただいております。
themeをカスタマイズしようとしたところ、公式ドキュメント通りのコードでも extendTheme を呼び出すとエラーを出してしまうという事象にでくわしています。

エラーを確認しているのは以下のコードです。customThemeを宣言していなければ問題なく動いている状態です。
nextは勉強したてなのでもしコードにミスがあればご教示いただけますと幸いです。

/app/layout.tsx

import type { Metadata } from "next";
import {
  UIProvider,
  colorModeManager,
  extendTheme,
  ColorModeScript 
} from "@yamada-ui/react";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const customTheme = extendTheme({
  semantics: {
    colors: {
      primary: "pink.500",
    },
    colorSchemes: {
      primary: "pink",
    },
  },
})();


export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
   <html lang="en">
      <body>
        <ColorModeScript type="cookie" nonce="testing" />
        <UIProvider
          colorModeManager={{ ...colorModeManager }.cookieStorage}
          theme={customTheme}
        >
          {children}
        </UIProvider>
      </body>
    </html>
  );
}

Answered by illionillion

Feb 3, 2024

Next.js 14.1.0、App RouterでYamada UIを使用させていただいております。 themeをカスタマイズしようとしたところ、公式ドキュメント通りのコードでも extendTheme を呼び出すとエラーを出してしまうという事象にでくわしています。

エラーを確認しているのは以下のコードです。customThemeを宣言していなければ問題なく動いている状態です。 nextは勉強したてなのでもしコードにミスがあればご教示いただけますと幸いです。

/app/layout.tsx
import type { Metadata } from "next";
import {
  UIProvider,
  colorModeManager,
  extendTheme,
  ColorModeScript 
} from "@yamada-ui/react";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const customTheme = extendTheme({
  semantics: {
    colors: {
      primary: "pink.500",
    },
    colorSchemes: {
      primary: "pink",
    },
  },
})();


export default function RootL…

View full answer

illionillion · 2024-02-03T08:14:54Z

illionillion
Feb 3, 2024
Collaborator

Next.js 14.1.0、App RouterでYamada UIを使用させていただいております。 themeをカスタマイズしようとしたところ、公式ドキュメント通りのコードでも extendTheme を呼び出すとエラーを出してしまうという事象にでくわしています。

エラーを確認しているのは以下のコードです。customThemeを宣言していなければ問題なく動いている状態です。 nextは勉強したてなのでもしコードにミスがあればご教示いただけますと幸いです。

/app/layout.tsx
import type { Metadata } from "next";
import {
  UIProvider,
  colorModeManager,
  extendTheme,
  ColorModeScript 
} from "@yamada-ui/react";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const customTheme = extendTheme({
  semantics: {
    colors: {
      primary: "pink.500",
    },
    colorSchemes: {
      primary: "pink",
    },
  },
})();


export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
   <html lang="en">
      <body>
        <ColorModeScript type="cookie" nonce="testing" />
        <UIProvider
          colorModeManager={{ ...colorModeManager }.cookieStorage}
          theme={customTheme}
        >
          {children}
        </UIProvider>
      </body>
    </html>
  );
}

@Teramon1031 こんにちわ！！

以下のようにextendThemeの部分を別のファイルに分割して、use clientをつけた状態でexportしたものを<UIProvider>のthemeに渡してみてください！！

"use client"
import { extendTheme } from "@yamada-ui/react";

// extendThemeは内部で"use client"で実行しなければならない処理をしているから外部ファイルに"use client"をつけてexportする

export const customTheme = extendTheme({
    semantics: {
        colors: {
            primary: "pink.500",
        },
        colorSchemes: {
            primary: "pink",
        },
    },
})();

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { UIProvider } from "@yamada-ui/react"
import { customTheme } from "@/theme";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <UIProvider theme={customTheme}>
          {children}
        </UIProvider>
      </body>
    </html>
  );
}

このリポジトリで正常に動作しているのを確かめられるので、git cloneしてみてください。

https://github.com/illionillion/yamada-ui-nextapp-custom-theme

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Yamada UI

App RouterでextendThemeがエラーを出してしまう #692

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Yamada UI

App RouterでextendThemeがエラーを出してしまう #692

Teramon1031 Jan 31, 2024

Replies: 1 comment

illionillion Feb 3, 2024 Collaborator

Teramon1031
Jan 31, 2024

illionillion
Feb 3, 2024
Collaborator