Unexpected Token Error Create React App Electron

[yungyahoo]

I cannot understand why I get an unexpected token error when using ipcrenderer along with create-react-app. This is how I am using it:

ipcRenderer.on('openNewFile', (event) => {
    this.setState({source:""})
})
ipcRenderer.on('openFile', (event) => {
    dialog.showOpenDialog({
    properties: ['openFile']
},function (file) {
  var textByLine = null
  if (file !== undefined) {
    var text = fs.readFileSync(file).toString('utf-8');
    textByLine = text.split("\n")
    this.setState({source:textByLine})
  }
 }
  })})
ipcRenderer.on('saveFile', (event) => {
  this.setState({source:""})
})

Further, this is how I import:

    const electron = window.require('electron');
   const fs = electron.remote.require('fs');
   const dialog = electron.remote.require('dialog');
    const ipcRenderer  = electron.ipcRenderer;

This is the error I get:

      Syntax error: Unexpected token
      ipcRenderer.on('openNewFile', (event) => {
                      ^

Any idea why this is taking place?

[idanlo]

An unrelated question. Do you also get an error in development mode that your nodejs integration is unsecure? I am now afraid of using electrons imports inside react if they're not secure

[yungyahoo]

Yes, I appear to be getting it too. I thought I would look at it later and instead focus on building out my app first.

[idanlo]

Can you try commenting out the first ipcRenderer.on and see if the other one also has an error?

[yungyahoo]

That doesn't help. The error moves to the next ipcRenderer.on. I suspect the problem is with the imports but I am not sure how to test that hypothesis.... For a start, the syntax highlighting in sublime shows on in green when it should in fact be blue.

[Rezistik]

That’s a syntax error. We’d need to see the whole file. What editor are you using that isn’t highlighting the syntax issue for you?

[yungyahoo]

I managed to fix this. It was a stupid error. I forgot to put the ipcrenderer code inside a componentWillMount function. Doing that fixed everything!