Blank screen with Ionic React app; no obvious errors
See original GitHub issueDescribe the bug A clear and concise description of what the bug is.
To Reproduce
I have an Ionic React app that is working on Android, iOS, and as a PWA. I just tried to build an Electron app following the getting started instructions.
However, when I run npx cap open @capacitor-community/electron
to check out my app, I am getting a blank screen.
When I investigate using the dev tools in Electron, I see that my public/index.html
from Ionic React is being loaded properly, and when I check the dev tools Network tab and do a reload, I see my javascript and css files from Ionic are there. There’s no errors in the console except for this:
Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
My issue sounds like https://github.com/ionic-team/capacitor/issues/639, but the final comment in that issue states that the error was fixed in this repo.
So it appears like the app was built properly (I can see all my CSS and JS in Electron), but I don’t see my actual react app (the window is blank). Do I need to do something special to prepare Ionic or React for use in Electron?
Screenshots
Desktop (please complete the following information):
- OS: Ubuntu 20.04 being run via WSL2 in Windows 10 (building inside Linux)
capacitor-community/electron
3.1.0- latest capacitor and ionic react (5.6.11)
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (4 by maintainers)
I’ll have dig into it later then but I’ll have a peek
@IT-MikeS Thanks for the reply.
I just ran
npm run build; npx cap copy
, and I noticed that the output only indicated things were copied for iOS, android, and web.So I ran
npx cap copy electron
to copy the electron stuff.Then I ran
npx cap open @capacitor-community/electron
, but unfortunately I still have the same problem-- a blank screen. However, I can see some JS files being loaded in the Network tab of the dev tools in the Electron window.