VercelにReactアプリをデプロイしようとしたら「warning package-lock.json found」とか「Module not found: Error: Can't resolve」って怒られた人向けの記事

概要

読んで字の如く、表題の通り
VercelにReactアプリをデプロイしようとしたら「warning package-lock.json found」とか「Module not found: Error: Can't resolve」って怒られた人向けの記事です。

Reactの学習をしていたのですが、ためしにVercelへデプロイしてみたところ、
Vercelにちょっと怒られてしまったというのが経緯です。

理屈はちょっとわからないので書きません。
私が問題を解決した方法について記載しますので了承ください。

warning package-lock.json found

こちらの原因は複数のパッケージ管理ライブラリが存在していることです。
Vercel的にNGっぽいです。

解決方法

package-lock.jsonなどのパッケージ情報が記載されたファイルを削除する。
私の場合はyarnとnpmが混在していました。
(教材が初めからそうなっているとか罠では。。。)

Module not found: Error: Can't resolve

こちらの原因は指定されたpathでモジュールが見つからないことです。
同じ記法を使用していてもエラーとならないコードもあり、相対パス/絶対パスやフォルダ構成に問題がありそうです。

解決方法

コンポーネントの宣言記法を変更する
before

const コンポーネント名 = () =>
{
 //コンポーネント
}
export default コンポーネント名

after

export const コンポーネント名 = () =>
{
 //コンポーネント
}

コンポーネントのインポート記法を変更する。
before

import コンポーネント名　from パス

after

import {コンポーネント名} from パス

その他

ほかに試したこと。
これがなくてもデプロイは成功しました。

• ビルドコマンドを以下に変更
  • npm run build
• インストールコマンドをいかに変更
  • npm install

終わり

以上です。
これまでC#のリリースビルドなどの経験はありましたが、Webアプリケーションのデプロイは初めてで勉強になりました。
以前に比べると便利になったそうですが、Webマスター(？)の道はまだ長そうです。