Robotjs not working using Electron and Windows 10

Question

I'm working on an app for Mac OSX and Windows using Electron and React . Our team of designers would like the app to have rounded borders. They want something that looks more or less like this:

I am using the following code that works fine on Mac

On my main.dev.js :

mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 728,
    hasShadow: false,
    frame: false, // Important!
    transparent: true // Important!
  });

On my app.global.css :

body {
  position: relative;
  height: 100vh;
  font-family: Arial, Helvetica, Helvetica Neue, serif;
  overflow-y: hidden;
  background-color:rgba(0,0,0,0); /* Important! */
  -webkit-app-region: drag;
}

On my DisplayBar React component:

class DisplayBar extends React.Component {
  render() {
    return (
      <div style={styles.container}>
        {this.props.children}
      </div>);
  }
}

const styles = {
  container: {
    backgroundColor: '#333333',
    borderRadius: 40, // Important!
    display: 'flex',
    height: '100%',
    border: '2px solid white',
    alignItems: 'center',
    justifyContent: 'flex-end'
  }
};

As I said it works fine on Mac however, on Windows it doesn't show anything, just a transparent screen. Do you know any solution for this problem?

PS: Greetings form Spain!

EDIT

I found out I have some missing dependencies problem and I have run the following command:

npm install --global --production windows-build-tools

I found it on this question .

Still I get the following error on my dev tools console:

Answer 1

Iv looked over your code and everything looks fine apart from your CSS where you set the background to black ( 0, 0, 0 ) but you set the opacity to 0 so when you show the window it is there but the background is "invisible" because there is nothing to show.

Also I once made a window with rounded corners and ran into a problem where some corners were not rounded, I fixed this by making the window its self have a margin. This happens because when you add the border radius the border goes on the outside which in the window is out the display region so adding a margin pushes it back in.

Hope this helps you and if you run in to any problems just drop a comment.