Composing generators requires '@angular-devkit/schematics'

[merlosy]

Current Behavior

Composing @nx-plus/vue generators triggers an error when running the generator command

PS D:\git-workspace\my-monorepo> npx nx workspace-generator create-vue-app test-app
Cannot find module '@angular-devkit/schematics'
Require stack:
- D:\git-workspace\my-monorepo\node_modules\@nrwl\workspace\src\utils\ast-utils.js       
- D:\git-workspace\my-monorepo\node_modules\@nrwl\workspace\src\utils\project-type.js    
- D:\git-workspace\my-monorepo\node_modules\@nrwl\workspace\index.js
- D:\git-workspace\my-monorepo\node_modules\@nx-plus\vue\src\generators\vuex\generator.js
- D:\git-workspace\my-monorepo\node_modules\@nx-plus\vue\src\index.js
- D:\git-workspace\my-monorepo\dist\out-tsc\tools\generators\create-vue-app\index.js     
- D:\git-workspace\my-monorepo\node_modules\nx\src\config\workspaces.js
- D:\git-workspace\my-monorepo\node_modules\nx\src\command-line\generate.js
- D:\git-workspace\my-monorepo\node_modules\nx\src\command-line\workspace-generators.js  
- D:\git-workspace\my-monorepo\node_modules\nx\src\command-line\nx-commands.js
- D:\git-workspace\my-monorepo\node_modules\nx\bin\init-local.js
- D:\git-workspace\my-monorepo\node_modules\nx\bin\nx.js

This seems to be related to the import of @nrwl/workspace

Expected Behavior

It should work out of the box, or document how to make it work

Suggestions:

• option 1: add as peer dependency @angular-devkit/schematics?
• option 2: refactor code to avoid importing from @nrwl/workspace (prefer @nrwl/devkit)?

Steps to Reproduce

Using a custom schematic/generator and import as follows (condensed extract):

import type { Tree } from '@nrwl/devkit';
import { logger, names } from '@nrwl/devkit';
import { applicationGenerator } from '@nx-plus/vue'; // <-- Here

/**
 * Generate the default web application
 * @param tree The virtual file system tree
 * @param schema The project configuration
 */
async function generateWebApp(tree: Tree, schema: SchematicOptions): Promise<void> {
  logger.debug('Generating the app (external schematics)');
  const name = names(schema.name).fileName;
  // "app" generator from "@nx-plus/vue"
  await applicationGenerator(tree, {
    name,
    style: 'scss',
    unitTestRunner: 'jest',
    e2eTestRunner: 'cypress',
    routing: true,
    vueVersion: 3,
    skipFormat: true,
    babel: false,
    tags: `fmk:vue,type:app,scope:${name}`,
  });
}

export default async function (tree: Tree, schema: SchematicOptions): Promise<void> {
  await generateWebApp(tree, schema);
}

Failure Logs

Environment

Plugin name and version:

Node : 16.16.0
OS : win32 x64
npm : 8.5.5

nx : 13.10.0
@nrwl/angular : Not Found
@nrwl/cypress : 13.10.6
@nrwl/detox : Not Found
@nrwl/devkit : 13.10.6
@nrwl/eslint-plugin-nx : 13.10.6
@nrwl/express : Not Found
@nrwl/jest : 13.10.6
@nrwl/js : 13.10.6
@nrwl/linter : 13.10.6
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : 13.10.6
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : Not Found
@nrwl/web : 13.10.6
@nrwl/workspace : 13.10.6
typescript : 4.7.4
rxjs : 6.6.7

Community plugins:
@nx-plus/vue: 13.0.2

[merlosy]

For a bit more context, these are related issues from NX repo:

• Cannot find module '@angular-devkit/schematics' - on NEW nextjs app nrwl/nx#4857
• Cannot find module '@angular-devkit/schematics' nrwl/nx#5429

[ZachJW34]

Do you know if this is still an issue with the latest version of Nx and nx-plus?

[danfoust]

@ZachJW34 I encountered this in 15.4.4 when importing from the top-level @nrwl/workspace barrel. Fix was to import from @nrwl/workspace/generators.

nrwl/nx#4857 (comment)