@sharp231posted at 2023-06-22

Reactでローカルサーバーを立ち上げる方法を教えてください

Q&A

Closed

React Vercel

解決したいこと

Reactのローカルサーバーを立ち上げたいです

お手数おかけしますがよろしくお願いします

Reactの基礎勉強をしていたら急にローカルサーバーが立ち上がらなくなった

発生している問題・エラー

プロンプト

 Build error occurred
Error: Failed to collect page data for /abuot
    at C:\Users\\my-app\node_modules\next\dist\build\utils.js:1155:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Vercel

at 318 (/vercel/path0/.next/server/chunks/255.js:56:15)
    at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:42)
    at 747 (/vercel/path0/.next/server/pages/abuot.js:65:13)
    at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:42)
    at __webpack_exec__ (/vercel/path0/.next/server/pages/abuot.js:243:39)
    at /vercel/path0/.next/server/pages/abuot.js:244:78
    at __webpack_require__.X (/vercel/path0/.next/server/webpack-runtime.js:108:21)
    at /vercel/path0/.next/server/pages/abuot.js:244:47
    at Object.<anonymous> (/vercel/path0/.next/server/pages/abuot.js:247:3)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
> Build error occurred
Error: Failed to collect page data for /abuot
    at /vercel/path0/node_modules/next/dist/build/utils.js:1155:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
Error: Command "npm run build" exited with 1
BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

自分で試したこと

1Answer

@atsutama posted at 2023-06-22

エラーメッセージを見る限り、/abuotというページのビルドで問題が起きているようです。
/aboutを意図しているのであれば、これは単純なタイプミスかもしれませんね。

とりあえず、abuot.jsという名前のファイルを探してください。
これは、/pagesディレクトリ内にあるはずです。

ファイル名をabout.jsに変更してください。
これは、Reactアプリケーションのルーティングに対応しています。
/pages/about.jsファイルは、/aboutのURLに対応します。

ファイル名を変更したら、もう一度サーバーを立ち上げてみてください。次のコマンドでローカルサーバーを立ち上げることができます。

npm run start
//又は
yarn start

それでも問題が解決しない場合、about.jsまたはabuot.jsファイルのコードに問題がある可能性があります。

0Like

Comments

@sharp231
Questioner
ありがとうございます
ファイル名変更後プロンプトで「cd」から　yarn buildとyarn startを実施しましたが
改善ができませんでした
別の方法で一度ファイルを削除してみましたがローカルサーバーが立ち上がらなかった

/vercel/path0/node_modules/next/dist/build/utils.js:1155:15
このコードに問題があるのではと対処しております

他にアドバイスをいただきたいです
よろしくお願いします
@atsutama
なるほど。
next/dist/build/utils.jsはNext.jsフレームワークの内部のコードなので触ることはないと思います。
なので、特定のページ/abuotのビルドに問題があったと見るべきですね。

このErrorだけだとなんとも言えないので、参考程度に解決できそうな手順を伝えますね。

とりま依存関係を再インストール: node_modulesディレクトリとpackage-lock.jsonファイル（またはyarn.lockファイル）を削除して、依存関係を再インストールします。これにより、パッケージの不適切なバージョンや破損したパッケージの問題を解消できる場合があります。
rm -rf node_modules rm package-lock.json # npmを使用している場合 # or rm yarn.lock # yarnを使用している場合 npm install # or yarn install
ページのコードを確認: エラーメッセージから、/abuotページ（現在は/aboutに名前を変更したと思います）のビルドに問題があることがわかります。そのため、このページのコードに問題がないか確認してみてください。

Next.jsのバージョンをダウングレードまたはアップグレード: 現在使用しているNext.jsのバージョンにバグがある可能性もあります。Next.jsの異なるバージョンを試してみてください。
npm uninstall next npm install next@version # or yarn remove next yarn add next@version
versionには試すバージョンを指定します。最新版を試す場合は、バージョンを省略できます。

上記のいずれの方法でも問題が解決しない場合は、詳しいエラーメッセージや、問題が発生しているページ（about.js）のコードがないとなんとも言えないですね。
@sharp231
Questioner
rm -rf node_modules rm package-lock.json # npmを使用している場合 # or rm yarn.lock # yarnを使用している場合 npm install # or yarn install
my-appのディレクトリに入ってから行うものでしょうか
rmの意味が把握できないので教えていただきたいです

それかまた一度全部のファイルを削除してやり直してみました
ファイルの中身に問題があったのでコードの内容を調べてみます

Are you sure you want to delete the question?