概要
読んで字の如く、表題の通り
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マスター(？)の道はまだ長そうです。