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.

Sign up for GitHub

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

Jump to bottom

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

Open
jepiqueau opened this issue Sep 5, 2023 · 2 comments · May be fixed by #273 or #279
Open

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

jepiqueau opened this issue Sep 5, 2023 · 2 comments · May be fixed by #273 or #279

Comments

@jepiqueau
Copy link

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/sqlite@5.2.3

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

si458 commented Dec 9, 2023

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

si458 commented Dec 9, 2023 •
edited

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.

@si458 si458 linked a pull request Dec 9, 2023 that will close this issue
Open
@ShanArosh ShanArosh linked a pull request Jan 23, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@si458 @jepiqueau