vscode ionic extension UI doesnt recognise Electron plugin

[laurencefass]

Describe the bug
I added packages with
npm i @capacitor-community/electron
and
npx cap add @capacitor-community/electron

which has created an electron folder in my vscode project

the vscode extension doesnt recognise the new platform even after restart:

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
I added packages with
npm i @capacitor-community/electron
and
npx cap add @capacitor-community/electron

Screenshots
see above

Desktop (please complete the following information):

Window 10

Additional context
Add any other context about the problem here.

[jepiqueau]

@laurencefass you must also do

• npm cap sync @capacitor-community/electron
• npm run build
• npm cap copy @capacitor-community/electron
• cd electron
• npm run electron: start

You can create a script in your package.json which do all of this

[laurencefass]

thanks i noticed this on first install and ignored but looks like i cant

root@vps765527:/docker/apps-root/capacitor/capdemo# npx cap sync @capacitor-community/electron
ℹ Copying Web App to Electron platform: start 🚀
ℹ Copying Web App to Electron platform: Copying /docker/apps-root/capacitor/capdemo/dist into /docker/apps-root/capacitor/capdemo/electron/app
✔ Copying Web App to Electron platform: completed in 82.72ms
ℹ Updating Electron plugins: start 🚀
⠋ Updating Electron plugins: searching for plugins
Unable to find node_modules/@testing-library/user-event.
Are you sure @testing-library/user-event is installed?

Unable to find node_modules/@vitejs/plugin-legacy.
Are you sure @vitejs/plugin-legacy is installed?

Unable to find node_modules/@vitejs/plugin-react.
Are you sure @vitejs/plugin-react is installed?
ℹ Updating Electron plugins: searching for plugins
ℹ Updating Electron plugins: generating electron-plugins.js
✔ Updating Electron plugins: completed in 46.77ms

however package.json has all of these:

"dependencies": {
"@capacitor-community/electron": "^5.0.1",
"@capacitor/android": "6.1.0",
"@capacitor/app": "6.0.0",
"@capacitor/camera": "^6.0.1",
"@capacitor/core": "6.1.0",
"@capacitor/dialog": "^6.0.0",
"@capacitor/filesystem": "^6.0.0",
"@capacitor/geolocation": "^6.0.0",
"@capacitor/haptics": "6.0.0",
"@capacitor/keyboard": "6.0.1",
"@capacitor/status-bar": "6.0.0",
"@ionic/react": "^8.0.0",
"@ionic/react-router": "^8.0.0",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"ionicons": "^7.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4"
},
"devDependencies": {
"@capacitor/cli": "6.1.0",
"@testing-library/dom": ">=7.21.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"@vitejs/plugin-legacy": "^5.0.0",
"@vitejs/plugin-react": "^4.0.1",
"cypress": "^13.5.0",
"electron": "^31.1.0",
"eslint": "^8.35.0",
"eslint-plugin-react": "^7.32.2",
"jsdom": "^22.1.0",
"terser": "^5.4.0",
"typescript": "^5.1.6",
"vite": "~5.2.0",
"vitest": "^0.34.6"
},

are these notices caused by version mismatch?

I only installed this yesterday so should be using latest versions of everything.

[laurencefass]

I worked through other commands anyway and its not running

root@vps765527:/docker/apps-root/capacitor/capdemo/electron# npm run electron:start

> [email protected] electron:start
> npm run build && electron --inspect=5858 ./


> [email protected] build
> tsc && electron-rebuild

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property '"accept-charset"' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property '"accept-encoding"' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property '"accept-language"' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property '"content-length"' of type 'string | number' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property '"proxy-authenticate"' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property '"sec-websocket-extensions"' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property '"sec-websocket-protocol"' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property '"set-cookie"' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property '"www-authenticate"' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property 'accept' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property 'connection' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property 'cookie' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property 'dav' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property 'link' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property 'prgama' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/builder-util-runtime/out/httpExecutor.d.ts:9:5 - error TS2411: Property 'via' of type 'string | string[]' is not assignable to 'string' index type 'string'.

9     [key: string]: string;
      ~~~~~~~~~~~~~~~~~~~~~~

node_modules/chokidar/types/index.d.ts:9:14 - error TS2420: Class 'import("/docker/apps-root/capacitor/capdemo/electron/node_modules/chokidar/types/index").FSWatcher' incorrectly implements interface 'import("fs").FSWatcher'.
  Type 'FSWatcher' is missing the following properties from type 'FSWatcher': ref, unref

9 export class FSWatcher extends EventEmitter implements fs.FSWatcher {
               ~~~~~~~~~


Found 17 errors in 2 files.

Errors  Files
    16  node_modules/builder-util-runtime/out/httpExecutor.d.ts:9
     1  node_modules/chokidar/types/index.d.ts:9

[jepiqueau]

@laurencefass in the tsconfig.json of the electron folder you must add skipLibCheck: true

[laurencefass]

already set by default

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
i havent modified this since setup

[jepiqueau]

@laurencefass i am talking about the tsconfig.json file in the electron folder not the one of the app

[laurencefass]

ok thank you ill try it. should it be set by default?