Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to use nx-electron #66

Closed
Julien76 opened this issue Dec 23, 2020 · 22 comments · Fixed by #68
Closed

Unable to use nx-electron #66

Julien76 opened this issue Dec 23, 2020 · 22 comments · Fixed by #68

Comments

@Julien76
Copy link

Julien76 commented Dec 23, 2020

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
Copy link
Owner

Hmm, do you mined trying the same with NX v9

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

@Julien76
Copy link
Author

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
Copy link
Owner

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

bennymeg added a commit that referenced this issue Dec 24, 2020
This was referenced Dec 27, 2020
@ericwooley
Copy link
Contributor

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
Copy link

a88zach commented Jan 5, 2021

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

@bennymeg
Copy link
Owner

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

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

@shlajin
Copy link

shlajin commented Feb 1, 2021

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
Copy link
Contributor

@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
Copy link

shlajin commented Feb 1, 2021

@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
Copy link
Contributor

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
Copy link

shlajin commented Feb 2, 2021

@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
Copy link
Owner

bennymeg commented Feb 2, 2021

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
Copy link

shlajin commented Feb 3, 2021

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
Copy link

shlajin commented Feb 3, 2021

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
Copy link
Contributor

@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
Copy link

shlajin commented Feb 4, 2021

@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
Copy link
Contributor

@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
Copy link
Owner

bennymeg commented Feb 8, 2021

@shlajin please try 11.0.0-alpha.1.

@shlajin
Copy link

shlajin commented Feb 8, 2021

@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
Copy link
Contributor

@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
Copy link

shlajin commented Feb 9, 2021

@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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants