bug: "ionic serve" fails to detect vite in npm workspaces

オープン
#5,013 コメント 2 件 リアクション 5 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
45/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
node.js, typescript, vite
領域
cli

調査の方向性

ionic serve コマンドの Vite 検出パスから始め、npm-workspaces プロジェクトで packages/test から障害を再現します。CLI がサブディレクトリからどのように Vite を解決するかを追跡し、その後、コマンドが hoisted インストールを認識し、通常のプロジェクトでも引き続き動作することを確認します。

索引モデルが issue の本文から書いたものです。

説明

triage
Prerequisites
Ionic Framework Version

v7.x

Current Behavior

In my ionic/react project, when I run "ionic serve" it gives the following error:

[INFO] Looks like vite isn't installed in this project.

       This package is required for this command to work properly. The package provides a CLI utility, but the vite
       binary was not found in your PATH.

The problem is that vite is installed, but ionic is unable to detect it. This happens because my project is a monorepo using npm workspaces - one of the packages (packages/ui-ionic) is my Ionic-basd application, generated from the template, while other subpackages represent libraries. Note that in every other way the project works, I'm able to run unit tests, and vite dev does what you would expect.

The vite can be found at <project_root>/node_modules, however because my ionic app is in a subdirectory, I have to cd to that subdirectory to order to run the frontend. When I do this, ionic serve fails with the error message. I'm guessing that the ionic command is checking only the node_modules in the current directory, instead of searching upwards in the file hierarchy as per the standard node resolution algorithm.

Also note that installing vite explicitly as a dependency of the subpackage doesn't help, because npm still hoists it to the root level.

Expected Behavior

The ionic command should check for the existence of vite using the standard node module resolution algorithm instead of assuming that it's in the node_modules in the current directory.

Steps to Reproduce
  1. Create a blank Ionic project using the wizard.
  2. Move the src, public, index.html and vite.config.ts into a subdirectory named packages/test. Create a minimal package.json and tsconfig.json and place it in the same directory.
  3. Add "workspaces": [ "./packages/*" ] to the top-level package.json.
  4. Copy the "scripts" commands from the top-level package into the subpackage (you only need the ones that invoke Vite).

Now cd to packages/test and try to run the app. You should see the error message about Vite not being installed.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v18.10.0
npm : 8.19.2
OS : macOS Monterey

Additional Information

No response

主要言語
TypeScript
スター
2k
フォーク
681
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

ionic-team/ionic-cli のほかの issue

ionic-team/ionic-cli の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。