When I try to generate a Vue 3 app using @nx/vue, it throws error

[rizypb]

trafficstars

Current Behavior

When I try to generate a fresh Vue 3 app in my existing NX monorepo using the command nx g @nx/vue:application my-app --directory apps/my-app --verbose, I encounter the following error:

NX  Generating @nx/vue:application

✔ Which stylesheet format would you like to use? · scss
✔ Would you like to add Vue Router to this application? (y/N) · true
✔ Which unit test runner would you like to use? · vitest
✔ Which E2E test runner would you like to use? · cypress
? What should be the project name and where should it be generated? …
❯ As provided:
✔ What should be the project name and where should it be generated? · my-app @ apps/my-app

  As provided:
    Name: my-app
    Root: my-app
❯ Derived:
    Name: my-app
    Root: apps/my-app

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
[unplugin-vue-components] no components found

Error: NX   Could not add the plugin in a way which does not conflict with existing targets. Please report this error at: https://github.com/nrwl/nx/issues/new/choose

Expected Behavior

The expected behavior is that the Vue 3 application should be generated successfully without any errors.

GitHub Repo

No response

Steps to Reproduce

1. Create or navigate to an existing NX monorepo workspace.
2. Ensure that all NX packages are upgraded to v19.
3. Run the command: nx g @nx/vue:application my-app --directory apps/my-app --verbose
4. Follow the prompts to enter project details.
5. Observe the error.

Nx Report

Node   : 20.11.1
OS     : darwin-arm64
yarn   : 1.22.22

nx (global)        : 19.2.0
nx                 : 19.2.0
@nx/js             : 19.2.0
@nx/jest           : 19.2.0
@nx/linter         : 19.2.0
@nx/eslint         : 19.2.0
@nx/workspace      : 19.2.0
@nx/cypress        : 19.2.0
@nx/devkit         : 19.2.0
@nx/eslint-plugin  : 19.2.0
@nx/nest           : 19.2.0
@nx/node           : 19.2.0
@nrwl/tao          : 19.2.0
@nx/vite           : 19.2.0
@nx/vue            : 19.2.0
@nx/web            : 19.2.0
@nx/webpack        : 19.2.0
typescript         : 5.4.5
---------------------------------------
Community plugins:
nx-vue3-vite : 0.25.0

Failure Logs

No response

Package Manager Version

yarn version: 1.22.22

Operating System

• [X] macOS
• [ ] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

I have recently upgraded NX and the NX plugins from v17 to v19. This issue started occurring after the upgrade. Any guidance on resolving this Vue-related issue in NX would be greatly appreciated.

[Coly010]

Hey @rizypb !

Can you try this again on latest Nx (19.3.1 at time of writing)? I've been creating a bunch of vue apps in existing and new workspaces recently to test a set of new features coming in 19.4.0 and did not encounter this issue.

[github-actions[bot]]

This issue has been automatically marked as stale because no results of retrying on the latest version of Nx was provided within 7 days. It will be closed in 21 days if no results are provided. If the issue is still present, please reply to keep it active. If the issue was not present, please close this issue. Thanks for being a part of the Nx community! 🙏

[rizypb]

Hey @rizypb !

Can you try this again on latest Nx (19.3.1 at time of writing)? I've been creating a bunch of vue apps in existing and new workspaces recently to test a set of new features coming in 19.4.0 and did not encounter this issue.

Hi @Coly010 I tried with nx v19.3.2 and still throws the same error Error: Could not add the plugin in a way which does not conflict with existing targets. Please report this error at: https://github.com/nrwl/nx/issues/new/choose

[github-actions[bot]]

This issue has been automatically marked as stale because no results of retrying on the latest version of Nx was provided within 7 days. It will be closed in 21 days if no results are provided. If the issue is still present, please reply to keep it active. If the issue was not present, please close this issue. Thanks for being a part of the Nx community! 🙏

[Coly010]

I can't reproduce this in latest (19.5).

I'm likely going to need a repo containing a reproduction of this issue to investigate further. When the @nx/vite/plugin is added, it tries to set up a name used for the inferred targets that won't conflict with any existing targets in the repo.

The options it creates combinations from currently are:

        buildTargetName: ['build', 'vite:build', 'vite-build'],
        testTargetName: ['test', 'vite:test', 'vite-test'],
        serveTargetName: ['serve', 'vite:serve', 'vite-serve'],
        previewTargetName: ['preview', 'vite:preview', 'vite-preview'],
        serveStaticTargetName: [
          'serve-static',
          'vite:serve-static',
          'vite-serve-static',
        ],

Realistically, there should be at least 1 combination from all of this that works for your workspace. I'd need to see the workspace though to know for definite.

[github-actions[bot]]

This issue has been automatically marked as stale because no reproduction was provided within 7 days. Please help us help you. Providing a repository exhibiting the issue helps us diagnose and fix the issue. Any time that we spend reproducing this issue is time taken away from addressing this issue and other issues. This issue will be closed in 21 days if a reproduction is not provided. If a reproduction has been provided, please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[rizypb]

This issue has been resolved in @nx/vue 19.5.6 version @Coly010 Thank you

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.