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.