Electron/Browser JS crash, SplashScreenProxy

[globules-io]

trafficstars

Bug Report

Command or Code

cordova plugin add cordova-plugin-splashscreen@latest
cordova platform add electron@latest
cordova run electron  --nobuild

<platform name="browser">
        <preference name="SplashScreen" value="/res/screens/browser/land-480x320-screen.png" />
        <preference name="AutoHideSplashScreen" value="true" />
        <preference name="SplashScreenDelay" value="3000" />
        <preference name="ShowSplashScreen" value="true" />
        <preference name="SplashScreenWidth" value="480" />
        <preference name="SplashScreenHeight" value="320" />
 </platform>

What does actually happen?

adding proxy for SplashScreen
SplashScreenProxy.js:80 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.show (SplashScreenProxy.js:80)
    at showAndHide (SplashScreenProxy.js:143)
    at SplashScreenProxy.js:158
    at XMLHttpRequest.xhrStatusChangeHandler (cordova.js:902)

Environment, Platform, Device

[email protected] [email protected] [email protected] [email protected].

Checklist

• [X] I searched for existing GitHub issues
• [X] I updated all Cordova tooling to most recent version
• [X] I included all the necessary information above

[Kepro]

Did you try <platform name="electron"> ?

[globules-io]

Try where?

[Kepro]

in config.xml

[globules-io]

<platform name="electron">
        <preference name="ElectronSettingsFilePath" value="res/electron/settings.json" />
    </platform>

[Kepro]

dude, just put what you have under browser platform under electron platform

[globules-io]

@Kepro, please stop being so cryptic ... No idea what you mean. Post code or just .... you know?

[Kepro]

this

<platform name="electron"> <preference name="SplashScreen" value="/res/screens/browser/land-480x320-screen.png" /> <preference name="AutoHideSplashScreen" value="true" /> <preference name="SplashScreenDelay" value="3000" /> <preference name="ShowSplashScreen" value="true" /> <preference name="SplashScreenWidth" value="480" /> <preference name="SplashScreenHeight" value="320" /> </platform>

[globules-io]

Thanks I will try that

[globules-io]

 <platform name="electron">
        <preference name="ElectronSettingsFilePath" value="res/electron/settings.json" />
        <preference name="SplashScreen" value="res/screens/electron/land-480x320-screen.png" />
        <preference name="AutoHideSplashScreen" value="true" />
        <preference name="SplashScreenDelay" value="3000" />
        <preference name="ShowSplashScreen" value="true" />
        <preference name="SplashScreenWidth" value="480" />
        <preference name="SplashScreenHeight" value="320" />
    </platform> 

adding proxy for SplashScreen
SplashScreenProxy.js:80 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.show (SplashScreenProxy.js:80)
    at showAndHide (SplashScreenProxy.js:143)
    at SplashScreenProxy.js:158
    at XMLHttpRequest.xhrStatusChangeHandler (cordova.js:902)
land-480x320-screen.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

I guess image is not copied over? Note that res/screens/electron/land-480x320-screen.png exists.

[Kepro]

run cordova with -d to see log

[globules-io]

  copy  platforms\electron\platform_www\plugins\cordova-plugin-splashscreen\src\browser\SplashScreenProxy.js platforms\electron\www\plugins\cordova-plugin-splashscreen\src\browser\SplashScreenProxy.js (updated file)
  copy  platforms\electron\platform_www\plugins\cordova-plugin-splashscreen\www\splashscreen.js platforms\electron\www\plugins\cordova-plugin-splashscreen\www\splashscreen.js (updated file)

This app does not have splash screens defined.

The file is never moved.

[ryanflores-bayalarm]

I know that this is really old and I apologize for grave digging, but I just wanted to provide some information in regards to this and how I got cordova-plugin-splashscreen to work with Electron. This issue is what helped me troubleshoot the issue... especially with the recommendation of the -d command line option.

• Issue 1: Regardless of what's mentioned in the docs, not only do you need to define the SplashScreen preference, but you MUST also define the <splash> tag as a relative path to your project directory (i.e. "res/splash.png").
• Issue 2: The value defined for SplashScreen does not get honored or maintained. The image defined by the <splash> tag will get copied to a new platform/electron/www/.cdv/ directory, and the image will get renamed to splashScreen.png. The platform/electron/config.xml file will then get updated such that both the <splash> tag and the SplashScreen preference will get (force) set to .cdv/splashScreen.png, not matter what.
• Issue 3: Basically, the JavaScript errors that @globules-io mentioned above were being caused by a timing issue. More specifically, the initAndShow() function in platform/electron/www/plugins/cordova-plugin-splashscreen/src/browser/SplashScreenProxy.js would get called/executed before the <body> tag was fully initialized in the DOM. The document node would exist, but not document.body, as as result producing the appendChild error.

Basically, the way I resolved this issue was by:

• Adding <splash> to config.xml within <platform name="electron">
• Adding the SplashScreen preference as well, but leaving the value empty. It doesn't appear to matter if it's populated or not.
• Wrapping the (function initAndShow () { block of code in platform/electron/platform_www/plugins/cordova-plugin-splashscreen/src/browser/SplashScreenProxy.js in a setTimeout(). There's no need to specify a delay. Just using setTimeout() will cause a long enough delay to wait for document.body to initialize.

For that last bullet, please take note that I specifically mentioned the platform_www directory and not www. Whenever you run/build the app, the plugin(s) will get copied from platform_www/plugins/ to www/pugins/.

I hope anyone who comes across this will find this useful. I wasted 2-3 days just trying to figure all this out.

As far as whose responsible for fixing what, for sure the maintainers of cordova-plugin-splashscreen must fix SplashScreenProxy.js. However, in regards to <splash> and the SplashScreen preference, I have no clue who needs to address that.

[exaland]

This is bug for Browser platform because the cordova-plugin-splashscreen is not properly configured

Go to your config.xml file and add this

    <platform name="browser">
    <preference name="SplashScreen" value="/img/logo.png" /> <!-- defaults to "/img/logo.png" -->
    <preference name="AutoHideSplashScreen" value="true" /> <!-- defaults to "true" -->
    <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->
    <preference name="SplashScreenBackgroundColor" value="green" /> <!-- defaults to "#464646" -->
    <preference name="ShowSplashScreen" value="false" /> <!-- defaults to "true" -->
    <preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->
    <preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->
</platform>

[gnardydev]

HEY BRO U SAVED ME LOVE U LOTS OF LOVE

[exaland]

@gnardydev You are welcome 🙏 thanks to add me an emoji 👍