Unexpected token import - Electron/React

Question

When I attempt to run my program after starting to learn React, I face this error when I ran my start script. I am importing the class 'App' from app.js to my entry point main.js.

Below is my code:

webpack.config.js

module.exports = {
  entry: './main.js',
  target: "electron",
  output: {
    path: './',
    filename: 'app.js'
  },
devServer: {
  inline: true,
  port: 3333
},
module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
 }
}

app.js:

const React = require('react');

class App extends React.Component {
    mapboxgl.accessToken = 'key_here';

    render() {
      return (
        <div>
          var map = new mapboxgl.Map({
              container: 'map',
              style: 'map_style_here',
              center: [-74.50, 40],
              zoom: 9
           });
        </div>
      );
    }
}

export default App

main.js:

'use strict';

const React    = require('react');
const ReactDOM = require('react-dom');

import App from './app';

const BrowserWindow = require('browser-window')
const app           = require("app");

var mainWindow = null;     // Keep global reference to main broswer window.

app.on('window-all-closed', function() {
 if (process.platform != 'darwin') {
   app.quit();
 }
});

app.on('ready', function() {

 // Reference the main window object.
 mainWindow = new BrowserWindow({width: 1200, height: 800});

 mainWindow.loadURL('file://' + __dirname + "/app.html")

 mainWindow.on('closed', function() {

 // Dereference the main window object.
 mainWindow = null;

 ReactDOM.render(<App />, document.getElementById('map'))
 })
})

Error:

Uncaught Exception:
SyntaxError: Unexpected token import
  at exports.runInThisContext (vm.js:53:16)
  at Module._compile (module.js:404:25)
  at Object.Module._extensions..js (module.js:432:10)
  at Module.load (module.js:356:32)
  at Function.Module._load (module.js:313:12)
  at loadApplicationPackage  
(C:\Programming\RestaurantChat\node_modules\electron
prebuilt\dist\resources\default_app\main.js:257:23)
  at Object.<anonymous> 
(C:\Programming\RestaurantChat\node_modules\electron
prebuilt\dist\resources\default_app\main.js:289:5)
  at Module._compile (module.js:425:26)
  at Object.Module._extensions..js (module.js:432:10)
  at Module.load (module.js:356:32)

Is there's something not compiling? I'm really at a loss for why there's a syntax error.

Answer 1

It makes little sense to use React in the main Electron process, the main process doesn't have access to the DOM. So, unless your plan is to render React components to string and then send the result to the renderer process via IPC you need to rethink your approach.

As for the SyntaxError, it looks like Babel isn't converting import to require, though I'm not sure if it's supposed to or if that's something that Webpack is supposed to handle. Are you using the electron-renderer plugin? You may want to start with the electron-react-boilerplate.