"Cannot find module" of newly generated plugin and generator using @nrwl/nx-plugin

[ChazUK]

Current Behavior

Creating a new plugin and generator using @nrwl/nx-plugin in an empty workspace, fails to find the new plugin.

Expected Behavior

Newly created custom plugin and generator should be able to be ran inside a new empty workspace.

Steps to Reproduce

Starting from a blank empty workspace, and then creating a new plugin using the nx-plugin generator:

npx create-nx-workspace@12.9.0 test-workspace --preset=empty --nxCloud=false
cd test-workspace
npm i -D @nrwl/nx-plugin
nx g @nrwl/nx-plugin:plugin imperva --directory=plugins --importPath=@org/imperva
nx g @nrwl/nx-plugin:generator application --project=plugins-imperva
nx g @org/imperva:application test

Failure Logs

Unable to resolve @org/imperva:application.
Cannot find module '@org/imperva/package.json'
Require stack:
- /Users/uut1/repos/nx-test/test-workspace/node_modules/@nrwl/tao/src/shared/workspace.js
- /Users/uut1/repos/nx-test/test-workspace/node_modules/@nrwl/tao/src/commands/generate.js
- /Users/uut1/repos/nx-test/test-workspace/node_modules/@nrwl/tao/index.js
- /Users/uut1/repos/nx-test/test-workspace/node_modules/@nrwl/cli/lib/init-local.js
- /Users/uut1/repos/nx-test/test-workspace/node_modules/@nrwl/cli/bin/nx.js
- /Users/uut1/.npm-global/lib/node_modules/nx/node_modules/@nrwl/cli/bin/nx.js
- /Users/uut1/.npm-global/lib/node_modules/nx/bin/nx.js

I also tried running nx build plugins-imperva to build it but it still won't run.

Environment

  Node : 14.17.0
  OS   : darwin x64
  npm  : 6.14.13
  
  nx : 12.9.0
  @nrwl/angular : Not Found
  @nrwl/cli : 12.9.0
  @nrwl/cypress : Not Found
  @nrwl/devkit : 12.9.0
  @nrwl/eslint-plugin-nx : Not Found
  @nrwl/express : Not Found
  @nrwl/jest : 12.9.0
  @nrwl/linter : 12.9.0
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : 12.9.0
  @nrwl/nx-cloud : Not Found
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.9.0
  @nrwl/web : Not Found
  @nrwl/workspace : 12.9.0
  @nrwl/storybook : Not Found
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

[ChazUK]

So after much head scratching, reading every line diff and every generated file I think I've found the problem(s).

Firstly, my own bad, to run a package that is being developed locally you need to run 2 commands

nx build plugins-imperva to build the plugin (plugins-imperva being the lib name)
cd dist/libs/plugins/imperva cd into the plugin directory
npm link which creates a link to the dist folder inside your .npm-global folder
npm ls -g --link=true will display the link from the package to the dist directory.
nx g @org/imperva:application to finally run the plugin generator

Any time you update the package you will need to rebuild the plugin.

---

Secondly I think there is an issue with the --importPath option on the plugin generator, or what I perceived the import path to do.

In the above example the workspace is created with the name 'test-workspace' which is then used in the package.json and nx.json as the projects name and npmScope respectively. When the plugin is generated the package.json for the plugin is created as below:

{
  "name": "@test-workspace/imperva",
  "version": "0.0.1",
  "main": "src/index.js",
  "generators": "./generators.json",
  "executors": "./executors.json"
}

I was expecting the import path to effect the plugins package name, but in fact it only changes the import path in the tsconfig file for importing directly in a JS file. So the description on the docs does not fit the actual implementation: How the plugin will be published, like @myorg/my-awesome-plugin. Note this must be a valid npm name

Anyway it'd be good to get a reply on this to see if it is a bug, or just a misunderstanding in the docs.

[mdo5004]

I have the same issue. Any progress on this @vsavkin ?

[mdo5004]

@ChazUK Did you find any work-around to this? Using npm link from inside the plugin's dist folder doesn't seem like the nx way to do things. (Also it didn't resolve the issue for me!)

[ChazUK]

@mdo5004 the only solution I found was documented above using npm link :(

[wwwsolutions]

Suggested solution

STEP 1

Create workspace for developing plugin/plugins. See docs.

• npx create-nx-plugin my-org --pluginName imperva
• cd my-org

Create additional 'aplication' generator for 'imperva' plugin

• npx nx g @nrwl/nx-plugin:generator application --project=imperva

Run tests

• npx nx run imperva:test
• npx nx run imperva-e2e:e2e

Build plugin

• npx nx run imperva:build

STEP 2

Create workspace for consuming plugin/plugins.

• npx create-nx-workspace test-workspace --preset=empty --nxCloud=false
• cd test-workspace

Well, now, I'm aware of two approaches how to consume/test plugin locally:

SIMPLE

Import plugin locally as a file, add this line in package.json#devDependency.

"@my-org/imperva": "file:../my-org/dist/packages/imperva"

• install plugin

  • npm i

• consume plugin

  • npx nx generate @my-org/imperva:imperva --name=xyz --no-interactive --dry-run

COMPLEX

Create and run npm registry locally. I'm using Verdaccio.

• install plugin

  • npm i -D @my-org/imperva

• consume plugin

  • npx nx generate @my-org/imperva:imperva --name=xyz --no-interactive --dry-run

Note:

With complex approach you must build AND publish plugin.

Hope this helps!

[AgentEnder]

This will be fixed as part of #9116

[github-actions]

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.