Zenn
🦭

shadcn/uiのトラブルシューティング（Form編）

2023/07/26に公開
Next.js
shadcn/ui
tech

はじめに

  • next のバージョンが 13.4.7 より上だと、shadcn/ui でエラーになることがあります。
  • 今回は、そのエラーが Form で発生を確認したので、発生する状態と解決方法を紹介します。

結論

  • 暫定処置として、単純に next のバージョンを 13.4.7 に戻すだけで解消します。
  • 現時点で next のバージョンを下げる以外の解決方法はありません。
  • 以下に issue としてあげさせていただいています。

https://github.com/shadcn-ui/ui/issues/1023

以下で再現できます。

https://github.com/hayato94087/nextjs-shadcnui-form-error-fix-sample

実施内容

それでは、実際に Next.js に shadcn-ui を導入し、エラーが発生する状態を再現していきます。

Next.jsプロジェクトの新規作成

作業するプロジェクトを新規に作成していきます。

長いので、折りたたんでおきます。

新規プロジェクト作成と初期環境構築の手順詳細
$ pnpm create next-app@latest nextjs-shadcnui-form-error-fix-sample --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd nextjs-shadcnui-form-error-fix-sample

以下の通り不要な設定を削除し、プロジェクトの初期環境を構築します。

$ mkdir src/styles
$ mv src/app/globals.css src/styles/globals.css
src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
src/app/page.tsx
export default function Home() {
  return (
    <main className="text-lg">
      テストページ
    </main>
  )
}
src/app/layout.tsx
import '@/styles/globals.css'

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body className="">{children}</body>
    </html>
  );
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  plugins: [],
};
tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
+    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

コミットします。

$ pnpm build
$ git add .
$ git commit -m "新規にプロジェクトを作成し, 作業環境を構築"

shadcn-ui の環境を構築

shadcn-ui CLI を実行し、作業環境を構築します。

$ pnpm dlx shadcn-ui@latest init

プロンプトで確認されるので返信していきます。

✔ Would you like to use TypeScript (recommended)? … yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … src/styles/globals.css
✔ Would you like to use CSS variables for colors? … yes
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … yes
✔ Write configuration to components.json. Proceed? … yes

変更点を確認します。長いので折りたたんでおきます。

変更点の確認

src/styles/globals.cssが変更されました。

src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 215 20.2% 65.1%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+ 
+    --ring: 217.2 32.6% 17.5%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/lib/utils.tsが新規作成されました。

src/lib/utils.ts
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

components.jsonが新規作成されました。

src/components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

package.jsonにパッケージが追加されています。

package.json
{
  "name": "nextjs-shadcnui-contact-sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.4.4",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.12",
+    "lucide-react": "^0.263.0",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
+    "tailwindcss-animate": "^1.0.6",
    "typescript": "5.1.6"
  }
}

コミットします。

$ pnpm build
$ git add .
$ git commit -m "shadcn/uiの環境を構築"

Formを追加

以下の公式ページに掲載されている Form のサンプルを実装します。

https://ui.shadcn.com/docs/components/form

パッケージをインストールし、実装します。

$ pnpm dlx shadcn-ui@latest add form
$ pnpm dlx shadcn-ui@latest add input
src/app/page.tsx
"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { useForm } from "react-hook-form";

const formSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
});

export default function Home() {
  // 1. Define your form.
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
    },
  });

  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof formSchema>) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    console.log(values);
  }

  return (
    <main>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input placeholder="shadcn" {...field} />
                </FormControl>
                <FormDescription>
                  This is your public display name.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Submit</Button>
        </form>
      </Form>
    </main>
  );
}

ローカルサーバで動作確認をします。

$ pnpm dev

エラーが発生していることが分かります。

Input に server id が振られています。

以下がエラーの詳細です。

app-index.js:31 Warning: Prop `htmlFor` did not match. Server: ":R5mcq:-form-item" Client: ":Rmpj9:-form-item"
    at label
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@radix-ui+react-primitive@1.0.3_@types+react-dom@18.2.7_@types+react@18.2.16_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.mjs:44:26)
    at Label
    at _c (webpack-internal:///(app-pages-browser)/./src/components/ui/label.tsx:18:11)
    at eval (webpack-internal:///(app-pages-browser)/./src/components/ui/form.tsx:99:11)
    at div
    at eval (webpack-internal:///(app-pages-browser)/./src/components/ui/form.tsx:74:11)
    at Controller (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/react-hook-form@7.45.2_react@18.2.0/node_modules/react-hook-form/dist/index.esm.mjs:544:37)
    at FormField (webpack-internal:///(app-pages-browser)/./src/components/ui/form.tsx:29:14)
    at form
    at FormProvider (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/react-hook-form@7.45.2_react@18.2.0/node_modules/react-hook-form/dist/index.esm.mjs:180:13)
    at main
    at Home (webpack-internal:///(app-pages-browser)/./src/app/page.tsx:28:74)
    at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:228:11)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:325:11)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:104:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:214:11)
    at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:335:11)
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:326:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js:148:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:77:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:104:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js:396:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/app-index.js:166:11)
    at RSCComponent
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/app-index.js:183:11)
window.console.error @ app-index.js:31
console.error @ hydration-error-info.js:45
overrideMethod @ console.js:213
printWarning @ react-dom.development.js:94
error @ react-dom.development.js:68
warnForPropDifference @ react-dom.development.js:31222
diffHydratedGenericElement @ react-dom.development.js:33282
diffHydratedProperties @ react-dom.development.js:33454
hydrateInstance @ react-dom.development.js:34448
prepareToHydrateHostInstance @ react-dom.development.js:6974
completeWork @ react-dom.development.js:18655
completeUnitOfWork @ react-dom.development.js:24746
performUnitOfWork @ react-dom.development.js:24551
workLoopConcurrent @ react-dom.development.js:24526
renderRootConcurrent @ react-dom.development.js:24482
performConcurrentWorkOnRoot @ react-dom.development.js:23339
workLoop @ scheduler.development.js:261
flushWork @ scheduler.development.js:230
performWorkUntilDeadline @ scheduler.development.js:537
Show 1 more frame
:3000/:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

ちなみに、変換された HTML です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="/_next/static/css/app/layout.css?v=1690248672535"
      data-precedence="next_static/css/app/layout.css"
    />
    <link rel="preload" href="/_next/static/chunks/webpack.js" as="script" />
    <link rel="preload" href="/_next/static/chunks/main-app.js" as="script" />
    <title>Create Next App</title>
    <meta name="description" content="Generated by create next app" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any" />
    <script src="/_next/static/chunks/polyfills.js" nomodule=""></script>
  </head>
  <body class="">
    <main>
      <form class="space-y-8">
        <div class="space-y-2">
          <label
            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
            for=":R5mcq:-form-item"
            >Username</label
          ><input
            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
            placeholder="shadcn"
            id=":R5mcq:-form-item"
            aria-describedby=":R5mcq:-form-item-description"
            aria-invalid="false"
            name="username"
            value=""
          />
          <p
            id=":R5mcq:-form-item-description"
            class="text-sm text-muted-foreground"
          >
            This is your public display name.
          </p>
        </div>
        <button
          class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
          type="submit"
        >
          Submit
        </button>
      </form>
    </main>
    <script src="/_next/static/chunks/webpack.js" async=""></script>
    <script src="/_next/static/chunks/main-app.js" async=""></script>
    <script>
      (self.__next_f = self.__next_f || []).push([0]);
    </script>
    <script>
      self.__next_f.push([
        1,
        '1:HL["/_next/static/css/app/layout.css?v=1690248672535",{"as":"style"}]\n0:"$L2"\n',
      ]);
    </script>
    <script>
      self.__next_f.push([
        1,
        '3:I{"id":"(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/app-router.js","chunks":["app-pages-internals:static/chunks/app-pages-internals.js"],"name":"default","async":false}\n5:I{"id":"(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js","chunks":["app-pages-internals:static/chunks/app-pages-internals.js"],"name":"GlobalError","async":false}\n',
      ]);
    </script>
    <script>
      self.__next_f.push([
        1,
        '6:I{"id":"(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js","chunks":["app-pages-internals:static/chunks/app-pages-internals.js"],"name":"default","async":false}\n7:I{"id":"(app-pages-browser)/./node_modules/.pnpm/next@13.4.12_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js","chunks":["app-pages-internals:static/chunks/app-pages-internals.js"],"name":"default","a',
      ]);
    </script>
    <script>
      self.__next_f.push([
        1,
        'sync":false}\n8:I{"id":"(app-pages-browser)/./src/app/page.tsx","chunks":["app/page:static/chunks/app/page.js"],"name":"","async":false}\n',
      ]);
    </script>
    <script>
      self.__next_f.push([
        1,
        '2:[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/app/layout.css?v=1690248672535","precedence":"next_static/css/app/layout.css"}]],["$","$L3",null,{"buildId":"development","assetPrefix":"","initialCanonicalUrl":"/","initialTree":["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],"initialHead":"$L4","globalErrorComponent":"$5","children":[["$","html",null,{"lang":"ja","children":["$","body",null,{"className":"","children":["$","$L6",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"template":["$","$L7",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":[["$","$L8",null,{"params":{},"searchParams":{}}],null],"segment":"__PAGE__"},"styles":[]}]}]}],null]}]]\n',
      ]);
    </script>
    <script>
      self.__next_f.push([
        1,
        '4:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Create Next App"}],["$","meta","2",{"name":"description","content":"Generated by create next app"}],["$","meta","3",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","link","4",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"any"}]]\n',
      ]);
    </script>
  </body>
</html>

現時点のソースをコミットします。

$ pnpm build
$ git add .
$ git commit -m "サンプルのフォームを実装。エラーが発生している"

問題の暫定対処

類似するエラーとして、以下の issue がありました。

https://github.com/shadcn-ui/ui/issues/992

Error does not come up when I downgrade back to v13.4.7.

next が v13.4.7 の場合はエラーが発生しないようです。next のバージョンを 13.4.7 に変更します。

package.json
{
  "name": "nextjs-shadcnui-form-error-sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.1.1",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@types/node": "20.4.4",
    "@types/react": "18.2.16",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.12",
    "lucide-react": "^0.263.1",
-   "next": "13.4.12",
+   "next": "13.4.7",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.45.2",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.6",
    "typescript": "5.1.6",
    "zod": "^3.21.4"
  }
}

パッケージをインストールします。

$ pnpm i

ローカルサーバで動作確認をします。

$ pnpm dev

エラーが発生していないことが分かります。

現時点のソースをコミットします。

$ pnpm build
$ git add .
$ git commit -m "nextのバージョンを13.4.7に変更し問題を解消"

まとめ

  • shadcn/ui を利用する際に発生するエラーについて紹介しました。
  • 暫定処置として next のバージョンを 13.4.7 に変更することで問題を解消できました。
  • 以下が作業終了時点のソースです。

https://github.com/hayato94087/nextjs-shadcnui-form-error-fix-sample

なお、issue として念のためアップしています。

https://github.com/shadcn-ui/ui/issues/1023

Discussion