question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Blank screen with Ionic React app; no obvious errors

See original GitHub issue

Describe 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

no_output

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:closed
  • Created 2 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
IT-MikeScommented, Oct 20, 2021

I’ll have dig into it later then but I’ll have a peek

0reactions
ptmkennycommented, Oct 20, 2021

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ionic 6 vite build gives blank screen
vite build after adding ionic components displays blank screen with no console errors. This is all in browser, no devices added.
Read more >
Debugging the Ionic White Screen of Death - YouTube
In this video, we walk through 4 different steps you can take to help track down errors that are occurring in your Ionic...
Read more >
Ionic v5 react based start app - blank screen when launched ...
When I create Ionic v5 react based start app (e.g. 'blank' or 'sidemenu'), it doesn't renders when loaded as chrome extension.
Read more >
Ionic react app showing blank page after first state change ...
Coding example for the question Ionic react app showing blank page after first state change-Reactjs.
Read more >
What to do when Ionic shows a blank page without any error
While developing Ionic apps, you will experience a lot with this, blank page just shows up with no error, so do I. As...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found