Vue project Error：NX Could not load plugin @nx/vite/plugin about nx HOT 3 CLOSED

Did you add the plugin?

nx add @nx/vite

from nx.

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'

from nx.

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/[email protected]
  - @nrwl/[email protected]
  - @nx/[email protected]
  - @nrwl/[email protected]
  - @nx/[email protected]
  - @nx/[email protected]
  - @nrwl/[email protected]

To fix this, run `nx migrate [email protected]`

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.

from nx.