実現したいこと
画面に表示させたい
発生している問題
npm run devを実行しURLへ飛ぶとエラーメッセージが表示され画面が表示できない
ソースコード
Failed to compile
./node_modules/next/dist/compiled/@vercel/og/index.node.js:18564:0
Module not found: Can't resolve 'fs'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./node_modules/next/dist/server/web/spec-extension/image-response.js
./node_modules/next/server.js
./node_modules/@supabase/auth-helpers-nextjs/dist/index.js
./utils/supabase-browser.ts
./app/components/supabase-provider.tsx
This error occurred during the build process and can only be dismissed by fixing the error.
自分で試したこと
Next.js 13とSupabaseでAIチャットアプリ(GPT-3)構築は実行することが出来た。
プログラムの見直し、動画の視聴
補足情報
回答 8件
回答するにはログインが必要です
ご質問ありがとうございます。
一度チュートリアルで使用しているライブラリのバージョンに合わせてインストールして頂いても宜しいでしょうか？
ライブラリのバージョンが異なっていると、動作しない可能性があります。
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@heroicons/react": "^2.0.16",
"@supabase/auth-helpers-nextjs": "^0.5.4",
"@supabase/supabase-js": "^2.7.1",
"@types/formidable": "^2.0.5",
"date-fns": "^2.29.3",
"formidable": "^2.1.1",
"mic-recorder-to-mp3": "^2.2.2",
"next": "^13.2.3",
"openai": "^3.2.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-timer-hook": "^3.0.5",
"supabase": "^1.37.1"
},
"devDependencies": {
"@types/node": "18.11.3",
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"autoprefixer": "^10.4.12",
"encoding": "^0.1.13",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.4",
"typescript": "4.9.4"
}
}
チュートリアルのバージョンに合わせて全体を動作させてから、少しずつ個別に最新のバージョンにアップグレードしていくことをオススメします。
1
バージョンをインストールしたら画面が正常に出てきたのですが、録音ボタンを押し停止するとSyntaxError: Unexpected token 'S', "Something went wrong" is not valid JSONと出ており、動作できませんでした。
デベロッパーツールを開くと下記のように書かれており
:3000/api/whisper:1
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
whisper.tsのファイルをみてみると以下の問題が表示されていました。
[{
"resource": "/c:/Users/masio/Downloads/nextjs-supabase-chat-tutorial-main/nextjs-supabase-chat-tutorial-main/pages/api/whisper.ts",
"owner": "typescript",
"code": "2345",
"severity": 8,
"message": "型 'File[] | undefined' の引数を型 'File | File[]' のパラメーターに割り当てることはできません。\n 型 'undefined' を型 'File | File[]' に割り当てることはできません。",
"source": "ts",
"startLineNumber": 28,
"startColumn": 20,
"endLineNumber": 28,
"endColumn": 30
}]
1
ありがとうございます。
こちらでも動作して確認してみます。
1
こちらで下記のチュートリアルのコードをそのまま試してみました。
https://github.com/haruyasu/nextjs-supabase-voice-chat-tutorial
OPENAI_API_KEYのキーが間違っているとSyntaxError: Unexpected token 'S', "Something went wrong" is not validが発生しました。
https://gyazo.com/422bd612a2b29524715e545cb1007187
新しくAPIキーを作成して環境変数に設定すると動くようになりました。
APIキーの確認をして頂いても宜しいでしょうか？
1
実行しましたがSyntaxError: Unexpected token 'S', "Something went wrong" is not validというエラーは音声入力の時に発生し、キーボードで入力した際にはchatGPTから返答が返ってくるのでAPIキーが間違っている可能性は低いと思います。音声入力をした際にターミナルを見ると以下のように表示されました。
▲ Next.js 14.0.1
- Local: http://localhost:3000
- Environments: .env.local
⚠ Invalid next.config.js options detected:
⚠ Unrecognized key(s) in object: 'appDir' at "experimental"
⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
✓ Ready in 6.3s
○ Compiling /page ...
✓ Compiled /page in 8.3s (875 modules)
✓ Compiled in 867ms (370 modules)
○ Compiling /api/whisper ...
✓ Compiled /api/whisper in 736ms (560 modules)
file is not found
✓ Compiled /api/chatgpt in 400ms (558 modules)
✓ Compiled /api/whisper in 170ms (562 modules)
file is not found
file is not found
file is not found
file is not found
1
最新のNext.js14を使われているのですね。
チュートリアルのNext.jsのバージョンは13.2.3で、pagesディレクトリを使っているので、最新では動かなくなっているのかもです。
完全にチュートリアルのバージョンに合わせていただくか、appディレクトリ用のAPIルートに変換して頂く必要があるかなと思います。
1
OpenAI のライブラリの更新と新規に必要なライブラリをインストールした際に、Next.jsのバージョンが13.2.3以外になってしまっていたのが原因でした。バージョンを合わせたら動作しました。解決して頂きありがとうございました。
1
うまく動作したようで良かったです。
引き続き宜しくお願い致します。