Zenn
😇

【Bolt.new】npmエラーで詰まって個人開発が3日間止まってます、助けてください。【バイブコーディング】

に公開
1件
npm
個人開発
エラー
bolt.new
Vibe Coding
tech

こんにちは！個人開発でとあるアプリを作ってます。

AI駆動の開発ツール「Bolt.new」を使って、バイブコーディング（Vibe Coding）で最高にクールな開発体験を味わってやるぞ！と意気込んでいたんですが……。

結論、現在進行形でnpmエラーで3日間ストップしています。。。

なぜBolt.newを使ってるのか？

実はぼく、アプリ開発の基礎は一通り勉強済みです。

React NativeもFirebaseも触って、「よし、作るぞ！」と意気込んでいたんです。が。

途中で挫折しました。完全に。

コードが思ったように動かない、画面設計が難しい、エラー解決で1日が終わる。

「これ、ぼく一人で完成できるのか？」って、自信がポキッと折れました。

そんなとき出会ったのが、AI駆動開発。

海外では「バイブコーディング（Vibe Coding）」なんて呼ばれていて、

“AIと一緒にノリでアプリを作る”という、最新の開発スタイルです。

その中でも1番使いやすかったのが Bolt.new。

https://bolt.new/?rid=2kk5hx

プロンプト1つで画面やロジックを作ってくれて、本当にヤバい。

「これなら、またアプリ開発の夢に挑戦できるかもしれない」

そう思って始めたのが、今作っているアプリです。

詰まったエラーがこちら（泣）

Boltで機能追加しようとしたら、こんな感じのエラーが3つドドンと出てきました。

中でも一番ヤバそうだったのがこのnpmエラー👇


npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @react-navigation/bottom-tabs@7.2.0
npm ERR! node_modules/@react-navigation/bottom-tabs
npm ERR! @react-navigation/bottom-tabs@"^6.5.12" from the root project

npm ERR! Could not resolve dependency:
npm ERR! @react-navigation/bottom-tabs@"^6.5.12" from the root project

npm ERR! Conflicting peer dependency: @react-navigation/native@6.1.18
npm ERR! node_modules/@react-navigation/native
npm ERR!   peer @react-navigation/native@"^6.0.0" from @react-navigation/bottom-tabs@6.6.1

もうこれ、パッと見、何の暗号？って感じで意味分からんかったです。

原因っぽいもの：Feature Previewsの"Diffs"？

「もしかしてこれが原因？」と思ったのが、Bolt.newのFeature Previewsにある設定で

DiffsをONにしていたこと。

Diffsは差分だけを修正してくれるものでテスト中の機能です。

ChatGPTに泣きついてみた

こういうときはAI仲間に相談だ！ってことで、ChatGPT先生に聞いてみた。

回答：

このエラーは、npm が依存関係の競合を解決できなかったことを示しています。ざっくり言うと、

💥 問題の概要

  • あなたのプロジェクトでは @react-navigation/bottom-tabs を ^6.5.12 で使おうとしている。
  • しかし @react-navigation/bottom-tabs@6.6.1 の内部では @react-navigation/native@^6.0.0 が必要。
  • ところが、あなたのプロジェクトか他の依存が @react-navigation/native@6.1.18 を持っていて、これが競合。

✅ 解決方法

以下のどれかを試してみてください：

① -legacy-peer-deps を使う（手っ取り早い）


npm install --legacy-peer-deps

これは、npm v7以降で導入された厳格な依存解決を無視してインストールしてくれます。

② -force を使う（最終手段）


npm install --force

ただし、壊れる可能性もあるので慎重に。

③ 依存関係を明示的に揃える（推奨）

package.json の中でバージョンを以下のように一致させてみてください。


"dependencies": {
  "@react-navigation/native": "^6.1.18",
  "@react-navigation/bottom-tabs": "6.6.1",
  ...
}

その後に：


rm -rf node_modules package-lock.json
npm install

とのこと。

うおー、なるほど！よしやってみよう！

↓

結果：

違うエラー出た。

（もはや乾いた笑いしか出ない）

どうしてこうなったのか？（仮説）

  • Bolt.newが自動で追加したライブラリのバージョンが、既存のReact Navigation系と微妙に合わなかった。
  • 特に@react-navigation/bottom-tabsと@react-navigation/nativeのバージョンのズレが原因。
  • ChatGPTの提案はそれっぽいけど、根本解決にはならず。

試したことまとめ

  1. Bolt.newで機能追加しようとする
  2. 自動で@react-navigation/bottom-tabsがインストールされる
  3. npm installでERESOLVE発生
  4. ChatGPTに泣きつく
  5. ③の依存関係を明示的に揃えるで対処 → 別の依存エラー
  6. 結局、開発止まったまま ←イマココ

いま、ぼくが思っていること

バイブコーディングってすごく夢があるし、ガチですごい開発ツールだと思う。

でも、「npmの依存関係の競合」っていうリアルな壁にぶち当たって、

「やっぱりAIでも超えられない地雷があるんだな…」って実感した。

ぼくが使いこなせていないだけかな？

開発が止まって3日、進捗ゼロ。

誰かヘルプミー！

最後に

同じようにハマってる人いたら、ぜひコメントください！

この記事が誰かの「バグ解決の足がかり」になれば、3日止まった意味もある気がします。

進展あれば追記します！とりあえず、これからも戦います！

Discussion