Capacitor: Blank screen with IonReactRouter and Electron

[spidercatnat]

Description of the problem:

IonReactRouter does not work in Electron production builds. With Capacitor, it does not work whatsoever. The elements are present in the markup, but they are rendered invisible. Is it possible to allow IonReactRouter to have an additional API layer over the HashRouter instead of just BrowserRouter, which does not work with Electron?

Affected platform

• [ ] Android
• [ ] iOS
• [x] electron
• [ ] web

OS of the development machine

• [ ] Windows
• [ ] macOS
• [x] linux

Other information:

Capacitor version: 1.1.1

node version: 10.16.3

npm version: 6.9.0

CocoaPods version: N/A

Steps to reproduce:

1. Generated boilerplate code with
   ionic start ionic-electron sidemenu --capacitor --type=react

1. Set homepage in package.json:

{
...
  "homepage": ".",
...
}

1. Created a build with ionic build

2. Initialized Electron project with npx cap add electron

3. Copied project contents to electron project with npx cap copy

4. Ran app with npx cap open electron

This issue happens with the component regardless of whether or not the project was bootstrapped with Capacitor.

[timoplus]

I'm having the same issue, but on Windows and Mac.

runtime-es2015.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
polyfills-es2015.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
styles-es2015.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor-es2015.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main-es2015.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/Users/tim/electron/…ity-warnings.js:272 Electron Deprecation Warning (contextIsolation default change) This window has context isolation disabled by default. In Electron 5.0.0, context isolation will be enabled by default. To prepare for this change, set {contextIsolation: false} in the webPreferences for this window, or ensure that this window does not rely on context isolation being disabled, and set {contextIsolation: true}.
For more information, see https://electronjs.org/docs/tutorial/security#3-enable-context-isolation-for-remote-content
/Users/tim/electron/…ity-warnings.js:170 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.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
 This warning will not show up
once the app is packaged.

In the index.html I replaced
<base href="/" />
with
<base href="./">, but it doesn't help.

[gkTim]

I'm having the same problem with an angular based project

[lewixlabs]

I think my issue is related to this post.
https://forum.ionicframework.com/t/tutorial-guide-to-build-for-ionic-react-electron-app/176872

Can anybody help us?
Thanks

Lewix

[VincentvanMedenbach]

Having the exact same issue on my project

[timoplus]

To give a bit more detail, the ERR_FILE_NOT_FOUND problem is detailed in this GitHub project.
It was while following the official Capacitor docs.

[InfTkm]

I am have the same issue as well.

[nasrat-v]

Same issue for me with Angular based project

[jcesarmobile]

After adding the homepage, you also have to remove the <base href="/" /> in index.html or change it to <base href="%PUBLIC_URL%/">

https://github.com/ionic-team/capacitor/issues/2103

[andonivianez]

I can´t understand how can you close this issue... it is not fixed yet. I´ve done the same steps as reporter said, and it doesn´t work... it´s anoying... :(

[jcesarmobile]

If you read my comment in the issue I linked, I explained how to make it work for react.
Also says it’s the same issue as https://github.com/ionic-team/capacitor/issues/639, which is open.
So, why I closed it? Because it’s a duplicate of a duplicate

[andonivianez]

Mm...I think that it´s similar but not the same, as for example I get no errors in the console, but I´ve the same blank screen. The other one it´s related to errors of assets linking ;)
Anyway, thanks for your fast reply :) I didn´t see that related issue.

[RonAmihai]

Mm...I think that it´s similar but not the same, as for example I get no errors in the console, but I´ve the same blank screen. The other one it´s related to errors of assets linking ;)
Anyway, thanks for your fast reply :) I didn´t see that related issue.

I'm also getting blank screen....
Using the blank starter template
.
I've tried any combination of "homepage": "." in package.json, <base href="%PUBLIC_URL%/"> in public/index.html, or no href in public/index.html. Nothing solves this issue

[evalsxonted]

i think this issue should not be closed it is way different from other issues. i have the same for me.

[evalsxonted]

https://github.com/ionic-team/ionic/issues/19246#issuecomment-552858490
this workaround really works. check it out

[ollydixon]

I see the same issue, the only fix is to add a div. But that breaks the animations for iOS...

Broken for desktop, but annimations work for iOS.

 <IonReactRouter history={history} >
      <IonRouterOutlet>
        {/* Main tab paths */}
        <Route path={["/" + getLanguage().homeLink]} component={MainTabs} exact={true} />
        <Route path={["/" + getLanguage().exploreLink]} component={MainTabs} exact={true} />
        {/* Standalone paths */}
        <Route path={["/" + getLanguage().createRecipeLink]} component={CreateRecipePage} exact={true} />

        <Route path="/" render={() => <Redirect to="/home" />} exact={true} />
      </IonRouterOutlet>
    </IonReactRouter>

Works for desktop but no annimations.

 <IonReactRouter history={history} >
      <IonRouterOutlet>
           <div>
        {/* Main tab paths */}
        <Route path={["/" + getLanguage().homeLink]} component={MainTabs} exact={true} />
        <Route path={["/" + getLanguage().exploreLink]} component={MainTabs} exact={true} />
        {/* Standalone paths */}
        <Route path={["/" + getLanguage().createRecipeLink]} component={CreateRecipePage} exact={true} />

        <Route path="/" render={() => <Redirect to="/home" />} exact={true} />
          </div>
      </IonRouterOutlet>
    </IonReactRouter>

The fix (hacky but works) is to create a DesktopFix component.

const MainRoutes = () => {

  // https://github.com/ionic-team/capacitor/issues/1918
  const DesktopFix = ({ children }: any) => {
    if (isPlatform('capacitor')) {
      return (
        <IonRouterOutlet>
          {children}
        </IonRouterOutlet>
      )
    }
    return (
      <IonRouterOutlet>
        <div>
          {children}
        </div>
      </IonRouterOutlet>
    )
  }

  return (
    <IonReactRouter history={history} >
      <DesktopFix>
        {/* Main tab paths */}
        <Route path={["/" + getLanguage().homeLink]} component={MainTabs} exact={true} />
        <Route path={["/" + getLanguage().exploreLink]} component={MainTabs} exact={true} />
        {/* Standalone paths */}
        <Route path={["/" + getLanguage().createRecipeLink]} component={CreateRecipePage} exact={true} />

        <Route path="/" render={() => <Redirect to="/home" />} exact={true} />
      </DesktopFix>
    </IonReactRouter>
  )
}