Vue project Error：NX Could not load plugin @nx/vite/plugin

[cgbin24]

Current Behavior

Procedure：
1、npx nx g @nx/vue:app main --directory=/apps/；
2、npx nx serve main

Error：
NX Could not load plugin @nx/vite/plugin

Expected Behavior

All managed projects can be started normally, regardless of whether 'npx nx serve' is started separately or 'npx nx run-many --target=serve --all' is enabled together

GitHub Repo

https://github.com/cgbin24/myorg-demo

Steps to Reproduce

1. Use this repository to manage multiple tech stack projects at the same time, such as using 'vue', 'react', and more may be added in the future;
2. All projects are built with 'vite', everything is normal when you start creating, and the plugins are installed and introduced as normal;
3. An error is reported when starting the 'vue' project (/apps/main).

Nx Report

➜  myorg-demo git:(main) ✗ npx nx report

 NX   Could not load plugin @nx/vite/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

➜ myorg-demo git:(main) ✗ node -v
v16.18.0

[codemile]

Did you add the plugin?

nx add @nx/vite

[cgbin24]

Did you add the plugin?

nx add @nx/vite

Yes, the '@nx/vite' dependency is already installed in the package in the root directory and is also present in the 'node_modules'

[Coly010]

Because you were unable to run nx report the problem is harder to identify on your end.

You're encountering this issue because you're using mismatched versions of the nx and @nx/ packages.
They are expecting APIs from other packages that just aren't there because of this version mismatch.

When I manually patch the node_modules/@nx/vite/src/plugin/plugin.js file to fix the issue, and then run nx report I get the following:

 NX   Report complete - copy this into the issue template

Node   : 20.12.2
OS     : darwin-arm64
npm    : 10.5.0

nx                 : 19.1.2
@nx/js             : 19.2.0
@nx/jest           : 19.1.2
@nx/linter         : 19.1.2
@nx/eslint         : 19.1.2
@nx/workspace      : 19.1.2
@nx/devkit         : 19.1.2
@nx/eslint-plugin  : 19.1.2
@nx/react          : 19.1.2
@nrwl/tao          : 19.1.2
@nx/vite           : 19.2.0
@nx/vue            : 19.2.0
@nx/web            : 19.2.0
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/vite/plugin
@nx/eslint/plugin
@nx/jest/plugin
---------------------------------------
The following packages should match the installed version of nx
  - @nx/js@19.2.0
  - @nrwl/js@19.2.0
  - @nx/vite@19.2.0
  - @nrwl/vite@19.2.0
  - @nx/vue@19.2.0
  - @nx/web@19.2.0
  - @nrwl/web@19.2.0

To fix this, run `nx migrate nx@19.2.0`

You can see at the bottom it tells you about the problem in your workspace.

Remember, you MUST keep all your nx package versions aligned.

The easiest way to do this is to use both nx migrate to migrate to newer versions, and nx add when adding new plugnis.