実現したいこと
【全てがここに！Next.jsとSupabaseで構築する認証システム】をZennで購入した者です。ふたたびお世話になります…。
本チュートリアルのプログラムを写経したものを、VSCodeからGithub経由でVercelにデプロイしようとしています。
初歩的な内容で恐縮ですが、解決策をご教示いただけないでしょうか。
発生している問題
Vercelのコンパイル（トランスパイル？）段階で次のようなエラーが発生し、同様のケースをネット（日本語/英語）で見つけられずにいます。
./app/components/signup.tsx
22:1 Warning: Prevent client components from being async functions. See: https://nextjs.org/docs/messages/no-async-client-component @next/next/no-async-client-component
23:18 Error: React Hook "useRouter" cannot be called in an async function. react-hooks/rules-of-hooks
25:33 Error: React Hook "useState" cannot be called in an async function. react-hooks/rules-of-hooks
26:33 Error: React Hook "useState" cannot be called in an async function. react-hooks/rules-of-hooks
33:7 Error: React Hook "useForm" cannot be called in an async function. react-hooks/rules-of-hooks
**lib/database.types.ts**
Error: Parsing error: File appears to be binary.
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Error: Command "npm run build" exited with 1
自分で試したこと
型定義ファイル lib/database.types.tsをTypescriptの別チュートリアルに従って./lib/database.d.tsにしましたが、同じエラーが発生します。
エラーメッセージからESLintがこのエラーを吐いているようなので、ESLintを無効化したところ、npm run buildでもVercelでもコンパイルが通るようになりました。ESLintを無効化して開発を続けるのは別の問題を引き起こしそうですが…。
回答 2件
回答するにはログインが必要です
./app/components/signup.tsx で発生しているエラーは私のミスでした。自分の好みでexport default functionの形式に変更していたのですが、不適切な関数に asyncを付けていました。
ただ、ESLintを無効化しても、やはり48分も経ってからVercelで 同様のエラーで失敗します。
私自身が問題の内容を把握できておらず「エラーが出たからなんとかして」という丸投げになっていますね。投稿しておいて今更恐縮ですが、自分でもっとエラー内容を追ってから解決できない場合は別途ご連絡差し上げます。夜分にご対応いただき、ありがとうございました。
1
チュートリアルのコードでnpm run lintとnpm run buildをしてもエラーが発生しないので、signup.tsxのコードを貼って頂けないでしょうか？
よろしくお願いします。