Electron-react-boilerplate: Blank screen after build package (dev works)

[ppazuchowski]

Hi,
I have a problem with building package and I need little help.
When I run: npm install && npm run package
and then run application I have a blank screen(background only).

Running app through npm run dev is ok.

I have a clean repo from master branch.

Node: v6.9.4
Npm: 3.10.10
OS: macOS Sierra 10.12.1

[amilajack]

Try solution 3 in #400

[96peerik]

Same issue here (Clean repo, OSX 10.11.4, npm 3.9.5), tried suggested solution but no difference. With dev tools enabled there is an error logged:

Uncaught TypeError: Cannot call a class as a function - isEventSupported.js:17

Edit: Same error when running npm run start

[ppazuchowski]

Debugger shows that, there is a problem with running "provider" transpiled by babel. I dont know why its works on dev.

[jhen0409]

Debugger shows that, there is a problem with running "provider" transpiled by babel. I dont know why its works on dev.

It may related to #670 (it also updated babel-preset-babili to 0.0.10), I also experiencing this problem in my project.

Here's a similar problem

Could we revert #670 first?

[sheldonlynn]

Same problem here with packaging a clean pull of the repo on OS X 10.12.2 node v7.4.0. Been having this issue since a week and a half ago.

[dzello]

Had the same issue, reverted 6528aa9c0242b8289b7613cd54b5e22168d900d0 related to #670 and that fixed it.

[fr05t1k]

I have same issue. I tried with 0.0.7 and 0.0.8 babili-webpack-plugin. It didn't work for me.

[ppazuchowski]

When I reverted babili-webpack-plugin to 0.0.6 its works!!!! Thanks 👍

[Nauss]

Had the issue and updated to 0.0.9 and it works :)

[fr05t1k]

0.0.9 works for me :)

[derekssmith]

I am having the same issue. I have tried babili-webpack-plugin as 0.0.6 and 0.0.9, but neither worked. It appears to be related to the lodash module. I am getting the error:

"Uncaught SyntaxError: Invalid or unexpected token".

Works fine with npm run dev

[derekssmith]

I ended up switching from Babili to Uglify. That isn't a real fix, but it got me up and running.

[amilajack]

@derekssmith Are you using the most recent version of this boilerplate?

[jimklo]

having similar issues... I did a merge of master today... still no luck in getting "production" mode working. I get the very same blank white window.

How does one actually debug "production" mode?

[amilajack]

Try doing a fresh clone of the repo instead of merging and follow step 3 in #400

[jimklo]

@amilajack I tried that.. and just running the straight boilerplate seems to work. Not sure what the merge deltas are that are causing mine to startup "white". And alas dev mode works.. Its the npm run build && npm run start that's being trouble.

[jhen0409]

@jimklo try to do #719 changes, if it still have same problem, you can openDevTools in production, and read this documentation from babili for debugging.

[jimklo]

@jhen0409 I think I figured out the problem.

Turns out my issue is a different bug related to npm run cleanup of the boilerplate - albeit same symptoms. It aggressively removes all the stubs for redux store in configureStore.production.js whereas configureStore.development.js leaves a minimal working configuration. Not sure if this has been reported yet...

[edit] looks like this issue was reported with #668 and fixed on Jan 22, which is after I ran my boilerplate cleanup. So something to check for others having a similar issue (blank white screen for production build), check to see that you actually have a configureStore.production.js that has some kind of content. Mine was completely empty, creating a non-functional production mode.

[jhen0409]

719 should fixed this.

[matiasdecarli]

I've changed to

"babili-webpack-plugin": "0.0.11"

But still struggling with this

[bundle.js:18] Uncaught TypeError: Cannot read property 'statusCode' of undefined

[isEventSupported.js:17] POST file:///C:/Users/Administrator/workspace/project/app/undefinedlogin net::ERR_FILE_NOT_FOUND(anonymous function) @ isEventSupported.js:17N.exports @ isEventSupported.js:17N.exports @ isEventSupported.js:17
index.js:8 Uncaught (in promise) Error: Network Error(…)

This only happens when I run npm run start or npm run package. Works OK on dev

Any ideas? Thanks

[matiasdecarli]

@amilajack can you help me?

[amilajack]

@matiasdecarli Sorry for the late response. Are you using the latest commit of master? What are your node and npm versions? Try 3 of #400 first

[matiasdecarli]

Hey! No problem, thanks for the reply!

Im using

node --version
v6.10.0
npm --version
4.4.1

And the commit base of the boilerplate for my project is 6a0c7f3a75208aae71bece34ef7cccac9bfb8ceb

I'll try today to start a new project using the latest version of the boilerplate

[matiasdecarli]

After I've updated to the last version of the boilerplate, the error is this

POST file:///C:/Users/Administrator/AppData/Local/Programs/electron-react-boilerplate/resources/app.asar/undefinedlogin net::ERR_FILE_NOT_FOUND
(anonymous) @ es6.string.from-code-point.js:4
N.exports @ es6.string.from-code-point.js:4
N.exports @ es6.string.from-code-point.js:4
es6.string.from-code-point.js:4 Uncaught (in promise) Error: Network Error
    at N.exports (es6.string.from-code-point.js:4)
    at XMLHttpRequest.ye.onerror (es6.string.from-code-point.js:4)

Uncaught (in promise) Error: Network Error
    at N.exports (es6.string.from-code-point.js:4)
    at XMLHttpRequest.ye.onerror (es6.string.from-code-point.js:4)

Now the error is in es6.string.from-code-point.js:4

Any idea?

[amilajack]

After I've updated to the last version of the boilerplate, the error is this

By this do you mean updating your app or cloning the latest boilerplate

[matiasdecarli]

Apparently I was missing some envars and the app was crashing. There wasnt any issue with the boilerplate

Thanks a lot @amilajack !

[witbybit]

I am also seeing a blank application on running 'npm build' and then 'npm start'. 'npm run dev' works absolutely fine. I am not seeing any error in the terminal and I can't bring up the debug window for production application. How do I debug this issue?

[witbybit]

I tried debugging the prod application. No error in console or terminal but the app is just blank. I already tried solution 3 in #400 but that didn't work either. What should I do?

[jhen0409]

@amilajack should we try migrate to uglifyjs-webpack-plugin when https://github.com/webpack-contrib/uglifyjs-webpack-plugin/pull/63 merged and released? I guess uglify-es should be more stable than Babili.

[amilajack]

@jhen0409 I've tried out uglify-es and I don't think it supported classes. Not sure if I set it up correctly. Will give this another try

[witbybit]

Any suggestions on what I can try to fix this issue? Could it be related to react router?
The reason why I am concerned about react router is because it's rendering everything until the Route component.

[witbybit]

Ok in my case, I was able to fix it by changing configureStore.prod.js history object to createHashHistory() from createBrowserHistory(). I saw hash history being used in configureStore.dev.js and hence I made it same for prod.

[jhen0409]

I've tried out uglify-es and I don't think it supported classes. Not sure if I set it up correctly. Will give this another try

@amilajack I just saw harmony tests for classes. Also, I added uglifyjs-webpack-plugin@^1.0.0-beta.1 in my project and it works great, I might try make a PR for that later.

[c446984928]

try this way to debug :

function createWindow () {
  mainWindow = new BrowserWindow({
    //...
  })
// use this to open dev tools manualy to debug
 mainWindow.webContents.openDevTools()
//...
}

[talha131]

@c446984928 Actually, a better way which is already mentioned in project read me is to run

DEBUG_PROD=true npm run package

[rotatopoti]

In angular index file try putting a dot before the slash for the base href

<base href="./">

[pooyagolchian]

How to resolve this bug?

[Stylll]

For those using a specific express server.js file for production. You should check to ensure you added the express static file path like this.

app.use(express.static(path.join(__dirname, '../client/dist')));

That solved the problem for me since it provides access to the bundled js and css file in my dist folder

[greysonmrx]

I had this same problem. I managed to solve it by adding just one checker if the route exists. Like this:
<Route render={()=> <Redirect to="/"/>} />

[derzierau]

Hey community,

I encountered following strange behaviour of my app:
My dev application works like a charme but if I package my app the inital screen is blank. If I hit cmd+r the react application will render successfully. In debug mode the renderer process shows 2 errors:

Objects are not valid as a React child (found: object with keys {code}). If you meant to render a collection of children, use an array instead.

The problem is how I should debug it when in dev mode everything works and there is no error at all. What does webpack does different in prod env?
I tried running yarn cross-env NODE_ENV=development DEBUG_PROD=true yarn package -> App works perfectly (no errors shown)

Thanks for your help in advance!