ThorstenHans/ngx-electron

Namespace 'Electron.CrossProcessExports' has no exported member 'Remote'.

Ch3shireDev opened this issue ยท 13 comments

(found on Windows).

How to reproduce:

ionic start example tabs --type=angular
cd example
npm i ngx-electron --save

After that I change src/app/app.module.ts from:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

to

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxElectronModule } from 'ngx-electron';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, NgxElectronModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule { }

Then I spawn ionic build and I get the following error:

Error: node_modules/ngx-electron/lib/electron.service.d.ts:17:31 - error TS2694: Namespace 'Electron.CrossProcessExports' has no exported member 'Remote'.

17     readonly remote: Electron.Remote;
                                 ~~~~~~

My package.json file:

{
  "name": "example",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@capacitor/app": "1.0.3",
    "@capacitor/core": "3.2.4",
    "@capacitor/haptics": "1.1.0",
    "@capacitor/keyboard": "1.1.0",
    "@capacitor/status-bar": "1.0.3",
    "@ionic/angular": "^5.5.2",
    "ngx-electron": "^2.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@angular/language-service": "~12.0.1",
    "@capacitor/cli": "3.2.4",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  },
  "description": "An Ionic project"
}

I also am seeing this same issue. Curious if anyone has a workaround?

Same here, even with a basic new Angular project (without IONIC) that has both Electron and ngx-electron installed

same issue here

Looks like the remote module has been deprecated in Electron 12 and been removed in Electron 14 (https://www.electronjs.org/blog/electron-14-0#removed-remote-module). They moved the remote stuff into its own package (https://github.com/electron/remote/blob/main/README.md). So as a quick fix I would assume that downgrading to version 13 should do the trick. But of cource I would love to see this change reflected in ngx-electron.

Has this project been abandoned or is remote going to be updated?

Has this project been abandoned or is remote going to be updated?
It's been three months no and there is no movement in the issue. I'd call this abandonware...

Had the same issue. Let's hope someone fixes this...

I went into ./node_modules/ngx-electron/lib/electron.service.d.ts and comment out this line:

// readonly remote: Electron.Remote;

It compiled fine, and using axious for http, rest, google access and authentication all my remote issues were handled.

Note that if you update the module you will have to reload it, or do a branch of this and use that instead.

I went into ./node_modules/ngx-electron/lib/electron.service.d.ts and changed the type:
readonly remote: any;

I guess that's not a good practice, but solved my problem.

I went into ./node_modules/ngx-electron/lib/electron.service.d.ts and changed the type: readonly remote: any;

I guess that's not a good practice, but solved my problem.

Yup - that works too - but as you say neither of our solutions is best practice. Since this appears to not be maintained, the best practice for either of our solutions would probably be to fork the project to make the change so that we do not have to keep making the change over and over.

I went into ./node_modules/ngx-electron/lib/electron.service.d.ts and changed the type: readonly remote: any;
I guess that's not a good practice, but solved my problem.

Yup - that works too - but as you say neither of our solutions is best practice. Since this appears to not be maintained, the best practice for either of our solutions would probably be to fork the project to make the change so that we do not have to keep making the change over and over.

Great answer! You got the point!

Note: I ran into this as well. looks like still not fixed with npx-electron.

one addition to helping others. when you make your local change, use the package: patch-package
https://www.npmjs.com/package/patch-package

You can make the edit, store the edit in your local repo, then tie it into post-install so it applies the edit again for future npm installations/other machines on your project. see patch-package readme.

Again, unfortunate but, this at least saves you from editing it every time, or scripting it yourself.

creates folder patches, in it you find a file and can see your delta in there:

-    readonly remote: Electron.Remote;
+    readonly remote: any;

working well for me.

I went into ./node_modules/ngx-electron/lib/electron.service.d.ts and comment out this line:

// readonly remote: Electron.Remote;

It compiled fine, and using axious for http, rest, google access and authentication all my remote issues were handled.

Note that if you update the module you will have to reload it, or do a branch of this and use that instead.

thank you <3 it worked for me