Unable to use nx-electron

[Julien76]

Describe the bug
I cannot create an electron app by following the instruction in the README.md file.

To Reproduce
Steps to reproduce the behavior:

1. Generate an empty nx workspace npx create-nx-workspace@latest
2. Install yarn add -D @nrwl/react
3. Create a basic react app: nx g @nrwl/react:application test
4. Install yarn add -D nx-electron
5. Create electron app: nx g nx-electron:app test-electron --frontendProject=test
6. See error below

Unable to resolve nx-electron:app.
 in JSON at position 1480

The behavior is the same if 10.0.0-beta.1 or 9.3.2 is installed.

Expected behavior
The command should generate a nx-electron application

Desktop:

• OS: Window 10
• nx: 11.0.16

EDIT: clarified the error message

[bennymeg]

Hmm, do you mined trying the same with NX v9

npx create-nx-workspace@9
yarn add -D @nrwl/react@9

[Julien76]

It seems to work with NX@9. I can install everything but the electron view display a blank page.
I see that the configuration generated relies on "architect" while in NX@11 this is replaced by "targets".
Could it be the reason of the issue?

[bennymeg]

It might be, I have not explored NX@11. I have not release v10 yet 🙃.

[ericwooley]

After making the build cross platform, i tested this with my nx-11 project with yarn link, which works fine. However when installed as a package, i get:

tengable on  auto-hide-sound [$!?] is 📦 v0.0.0 via ⬢ v14.14.0 on 🐳 v20.10.1 using ☁️  default/bubbles-298018 took 17s 
➜ nx build tengable-electron --skip-nx-cache

> nx run tengable-electron:build 
Unable to resolve nx-electron:build.
Cannot read property 'cyan' of undefined

[a88zach]

@bennymeg is there a timeline yet for supporting version 11 of NX?

[bennymeg]

@bennymeg is there a timeline yet for supporting version 11 of NX?

Thank to @pascalbayer you will have a v11 released soon.

[shlajin]

I'm really looking forward to use nx-electron with v11! Do you have an idea of what's left to do before the v11 support will happen?

[pascalbayer]

@shlajin There is already an alpha version available to test npm i nx-electron@11.0.0-alpha.0 that was published 7 days ago. I've been using it for a few days and it seems to work great so far. If you identify any issues, let me know and I'll do my best to get it resolved.

[shlajin]

@pascalbayer I fail at the very first step. I added

"nx-electron": "11.0.0-alpha.0",

to my devDependencies, (then yarn) and then ran

Unable to resolve @nrwl/react:nx-electron.
Cannot find generator 'nx-electron' in

The result is

Unable to resolve @nrwl/react:nx-electron.
Cannot find generator 'nx-electron' in ...

I imagine I should start with v10, then upgrade to v11 and switch the package?

[pascalbayer]

Not sure what exactly you're trying, I guess the command should be different and is a copy&paste mistake. Can you maybe correct it and add more details on your setup?

[shlajin]

@pascalbayer Indeed, a copy-paste mistake, sorry.
The command I'm running is

nx g nx-electron electron --frontendProject=renderer

and the produced error is

Unable to resolve @nrwl/react:nx-electron.
Cannot find generator 'nx-electron' in ...

[bennymeg]

The command is:

nx g nx-electron:app <electron-app-name> --frontendProject=<frontend-app-name>

So in your case it would be:

nx g nx-electron:app electron --frontendProject=renderer

Please note that you should generate your frontend project (renderer) before you run this command

[shlajin]

Right... I wonder why I forgot about the :app part, yet used it in every v10 nx project :D Thank you for pointing that out.

I tried to use the ng g nx-electron:app and got this:
(Note: I kept the directory name empty since I didn't want to put it into any extra directories)

? In which directory should the electron application be generated?
⠹ Installing packages (yarn)...warning "@nrwl/cypress > @cypress/webpack-preprocessor@4.1.5" has unmet peer dependency "webpack@^4.18.1".
warning "@nrwl/cypress > @cypress/webpack-preprocessor > babel-loader@8.2.2" has unmet peer dependency "webpack@>=2".
warning "@nrwl/react > eslint-plugin-react-hooks@2.5.1" has incorrect peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0".
warning "@nrwl/react > url-loader@3.0.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
✖ Package install failed, see above.
UnsuccessfulWorkflowExecution [Error]: Workflow did not execute successfully.
    at ChildProcess.<anonymous> (/Users/[...]/node_modules/@angular-devkit/schematics/tasks/package-manager/executor.js:109:31)
    at ChildProcess.emit (events.js:315:20)
    at maybeClose (internal/child_process.js:1048:16)
    at Socket.<anonymous> (internal/child_process.js:439:11)
    at Socket.emit (events.js:315:20)
    at Pipe.<anonymous> (net.js:673:12)
The generator workflow failed. See above.

Oddly enough, it created a project; I tried to run it with a different name (e.g. named project electron2) and it was created successfully without any errors. Not sure what it was, but I'm unable to reproduce this error anymore. Thank you so much for you help (and for awesome plugin!)

[shlajin]

Update: I tried to create a fresh nx workspace and I got the very same error again. Apparently it happens only in the very first time I run nx-electron:app per workspace. I don't think it's related, but in both scenarios I used yarn

Update: it's a bumpy ride. I tried to start electron with nx serve electron, but the electron asked to rm -rf node_modules/electron and rebuild. Rebuild did not succeed with weird EHOSTDOWN errors, so I started poking around.
Upgrading node from 14.15.3 to 14.15.4 helped, but now

nx serve electron

> nx run electron:serve
Invalid format version detected - Expected:[ 1 ] Found: [ 2 ]

Googling this problem reveals that it's something to do with angular, but I don't use angular. The error in the previous message also states @angular-devkit, but I'm building a react application.

[pascalbayer]

@shlajin I wasn't able to reproduce your issue by now. Haven't tried node 14 yet, takes some more time for testing that as well. Regarding @angular-devkit, @nrwl is build on top of the Angular Schematics architecture and still has a lot in common with the @angular/cli project.

[shlajin]

@pascalbayer Tried fresh with node v12:

$ nvm use 12
// Now using node v12.4.0 (npm v6.9.0)

$ npx create-nx-workspace@latest
// I provided these parameters
? Workspace name (e.g., org name)     electrontest
? What to create in the new workspace react             [a workspace with a sing
le React application]
? Application name                    renderer
? Default stylesheet format           SASS(.scss)  [ http://sass-lang.com   ]
? Use Nx Cloud? (It's free and doesn't require registration.) No

// so my default application name is `renderer`

$ cd electrontest
$ npm i nx-electron@11.0.0-alpha.0 --dev

// installed

nx g nx-electron:app electron --frontendProject=renderer
// output:
? In which directory should the electron application be generated? (NOTE: I hit enter, left this one empty)
✔ Packages installed successfully.
CREATE apps/electron/.eslintrc.json
CREATE apps/electron/tsconfig.app.json
CREATE apps/electron/tsconfig.json
CREATE apps/electron/src/main.ts
CREATE apps/electron/src/app/app.ts
CREATE apps/electron/src/app/constants.ts
CREATE apps/electron/src/app/api/preload.ts
CREATE apps/electron/src/app/events/electron.events.ts
CREATE apps/electron/src/app/events/squirrel.events.ts
CREATE apps/electron/src/app/events/update.events.ts
CREATE apps/electron/src/app/options/maker.options.json
CREATE apps/electron/src/assets/.gitkeep
CREATE apps/electron/src/environments/environment.prod.ts
CREATE apps/electron/src/environments/environment.ts
CREATE apps/electron/jest.config.js
CREATE apps/electron/tsconfig.spec.json
UPDATE package.json
UPDATE .vscode/extensions.json
UPDATE workspace.json
UPDATE nx.json
UPDATE jest.config.js

When I try to run I still get the same error.

nx serve electron

> nx run electron:serve
Invalid format version detected - Expected:[ 1 ] Found: [ 2 ]

Which node version do you use?

[pascalbayer]

@shlajin Thanks for that detailed description. I've been able to identify the issue. nx g nx-electron:app electron --frontendProject=renderer puts the latest stable version back into the package.json file. Reinstalling with npm i nx-electron@11.0.0-alpha.0 --dev solves this but I can still reproduce the original error, trying to implement a fix for it.

[bennymeg]

@shlajin please try 11.0.0-alpha.1.

[shlajin]

@bennymeg tried with node v12.4.0 and node v14.15.4, yarn and npm (at first I thought it could be something to do with the yarn lib cache) – but no luck.

I run the very same commands as in my previous post (except for the version of the lib, I run npm i nx-electron@11.0.0-alpha.1 --dev)

> nx run electron:serve
Invalid format version detected - Expected:[ 1 ] Found: [ 2 ]

[pascalbayer]

@shlajin the root cause of the error is that your workspace.json file is in version 2, which I think can’t be handled by @angular-devkit anymore. I think with nx11 to handle the new version format we need to migrate all code to @nrwl/devkit. This seems to be more work then I thought initially. The reason why I never ran into that problem is that it works well with projects with either the original angular.json or workspace.json in version 1 configuration files.

[shlajin]

@pascalbayer i see... do you know if it’s possible to have nx v11 with v1 workspace? I use some new features from v11 and I also need an electron app...

[bennymeg]

It seems we have mixed here two different issues.
The original issue have been resolved, so will close this issue for now.

Feel free to finish you discussion here, but I think it will be more organized if we will move this discussion to #76.