npx cap sync @capacitor-community/electron with Ionic7 Vite React or Vue Apps

[jepiqueau]

Describe the bug
When running npx cap sync @capacitor-community/electron on a Ionic7 Vite React or Vue App i got the following message:

To Reproduce
Steps to reproduce the behavior:

1 ionic start ionic7-react-sqlite-app blank --type=react --capacitor
2 cd ./ionic7-react-sqlite-app
3 npm i --save @capacitor-community/electron
4. npm i --save @capacitor-community/sqlite
5. npm i --save-dev rimraf @testing-library/user-event
6. npm run build
7. npx cap add @capacitor-community/electron
8. npx cap sync @capacitor-community/electron

Expected behavior
Not to see these 4 messages
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?

Unable to find node_modules/rimraf.

Screenshots
see the error
npx cap sync @capacitor-community/electron
ℹ Copying Web App to Electron platform: start 🚀
ℹ Copying Web App to Electron platform: Copying /Volumes/Development_Lacie/Development/blog/Tutorials-Apps/Part-2/ionic7-vue-sqlite-app/dist into /Volumes/Development_Lacie/Development/blog/Tutorials-Apps/Part-2/ionic7-vue-sqlite-app/electron/app
✔ Copying Web App to Electron platform: completed in 65.85ms
ℹ Updating Electron plugins: start 🚀
⠋ Updating Electron plugins: searching for plugins
Unable to find node_modules/@vitejs/plugin-legacy.
Are you sure @vitejs/plugin-legacy is installed?

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

Unable to find node_modules/rimraf.
Are you sure rimraf is installed?
ℹ Updating Electron plugins: searching for plugins
ℹ Updating Electron plugins: generating electron-plugins.js
⠋ Updating Electron plugins: installing electron plugin files

Will install: @capacitor-community/[email protected]

ℹ Updating Electron plugins: installing electron plugin files
✔ Updating Electron plugins: completed in 5.66s

Desktop (please complete the following information):

• OS: [e.g. iOS] macOS Monterey Version 12.6.8
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] Version 116.0.5845.140 (Build officiel) (x86_64)

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Node.js v18.17.1

[si458]

ive spent the day debugging this and i cant figure it out either?
its erroring out here
https://github.com/capacitor-community/electron/blob/f7ce86454469e967b41c1db8f51ddb942d278ca9/src/cli-scripts/common.ts#L91C76-L132
certainly this line
const t = require.resolve(pathSegments.join('/'), { paths: [root] });

[si458]

found the issue
if any of the packages sets main, module, types, etc... in package.json and they begin with ./ then it fails on the require.resolve
a work around is to remove the ./ from at least the main value from package.json inside that particular package!
working out why it does this?

CHATGPT reply:
The require.resolve function in Node.js is used to resolve the path of a module. When you pass a module name to require.resolve, Node.js searches for the module and returns the absolute path to the main entry point of the module.

Now, if the main entry in the package.json file of a module starts with ./, it is treated as a relative path. This can cause issues when using require.resolve because the module resolution process may not correctly handle relative paths when resolving the module.

Here's an example to illustrate the issue:

Consider the following package.json:

{
  "name": "example-module",
  "main": "./lib/index.js"
}

If you use require.resolve('example-module'), Node.js will try to resolve the module using the relative path ./lib/index.js from the current working directory. This may not always work as expected, especially if the working directory is different from where the module is located.

To avoid this issue, it's recommended to specify the main entry in package.json without the ./ prefix:

{
  "name": "example-module",
  "main": "lib/index.js"
}

This way, require.resolve will correctly resolve the module based on the module resolution algorithm without any potential issues related to relative paths.

If you provide more details about your specific use case or share some code snippets, I might be able to provide more targeted assistance.