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

[viridia]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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

[JaapWeijland]

I had this issue as well when I was using the ionic cli installed in the global context. After installing it locally and running npx ionic cap run ios (in my case), it worked.