Ad

App Threw An Error When Running [SyntaxError: Unexpected Token Import]

- 1 answer

We have a running react app that i am asked to generate an electron for. After adding my Main.js file as explained Here . My electron threw the error above . After going through, i noticed that my electron does not the es6 and react terminologies in my index.js below

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './_store/root';

ReactDOM.render(<Root/>, document.getElementById('root'));

When i change the import from the code above, electron threw another error invalid token > which i understand is from the <Root/> .

Below is how i run my electron

./node_modules/.bin/electron .

Part of my package.json is

"main": "src/index.js",
  "scripts": {
    "test": "npm run test:eslint && npm run test:unit",
    "test:eslint": "webpack --config webpack.config.dev.js",
    "test:unit": "mocha --compilers js:babel-core/register ./src/**/__tests__/*.js",
    "test:watch": "npm test -- --watch",
    "test:coverage": "babel-node ./node_modules/istanbul/lib/cli cover ./node_modules/mocha/bin/_mocha ./src/_common/__tests__/*.js",
    "start": "node server.js",
    "build": "npm run clean && npm run build:webpack",
    "translate": "bash fetch-translation.sh"
  }

My react app implemented in react , react-redux is working fine .

and my webpack.config

module.exports = {
    devtool: 'eval',
    entry: [
        './src',
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js',
        publicPath: '/',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            include: path.join(__dirname, 'src'),
        }, {
            test: /\.js$/,
            loader: 'eslint-loader',
            include: path.join(__dirname, 'src'),
        }],
    },
};

The only problem is my electron which i am trying to generate a desktop app with. Any help would be appreciated.

and my dependencies

"devDependencies": {
    "babel-core": "^6.4.0",
    "babel-eslint": "^5.0.0-beta6",
    "babel-loader": "^6.2.1",
    "babel-plugin-react-intl": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-function-bind": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "eslint": "^1.10.3",
    "eslint-config-airbnb": "^3.1.0",
    "eslint-loader": "^1.2.0",
    "eslint-plugin-react": "^3.15.0",
    "expect": "^1.13.4",
    "expect-jsx": "^2.2.2",
    "express": "^4.13.3",
    "istanbul": "^0.4.2",
    "json-loader": "^0.5.4",
    "mocha": "^2.3.4",
    "react-addons-perf": "^0.14.6",
    "react-addons-test-utils": "^0.14.6",
    "webpack": "^1.12.11",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^2.6.0"
  }
Ad

Answer

It turns out the error is in my package.js The

"main": "src/index.js",
  "scripts": {
    "test": "npm run test:eslint && npm run test:unit",
    "test:eslint": "webpack --config webpack.config.dev.js",
    "test:unit": "mocha --compilers js:babel-core/register ./src/**/__tests__/*.js",
    "test:watch": "npm test -- --watch",
    "test:coverage": "babel-node ./node_modules/istanbul/lib/cli cover ./node_modules/mocha/bin/_mocha ./src/_common/__tests__/*.js",
    "start": "node server.js",
    "build": "npm run clean && npm run build:webpack",
    "translate": "bash fetch-translation.sh"
  }

Change the main above to point to your electron file .like

"main": "src/electron.js",
  "scripts": {
    "test": "npm run test:eslint && npm run test:unit",
    "test:eslint": "webpack --config webpack.config.dev.js",
    "test:unit": "mocha --compilers js:babel-core/register ./src/**/__tests__/*.js",
    "test:watch": "npm test -- --watch",
    "test:coverage": "babel-node ./node_modules/istanbul/lib/cli cover ./node_modules/mocha/bin/_mocha ./src/_common/__tests__/*.js",
    "start": "node server.js",
    "build": "npm run clean && npm run build:webpack",
    "translate": "bash fetch-translation.sh"
  }

in my case . The electron.js is simply the electron js implementation below which is obtainable on the electron github page.

const electron = require('electron');
const app = electron.app;  // Module to control application life.
const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.

// Report crashes to our server.
electron.crashReporter.start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 600, height: 500});

  // and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/../public/index.html',{"userAgent":"Mobile"});

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });

In this case your electron does not need to be aware of your es6 scripts as it would be handle by babel and rendered on your index.html. index.html is in return rendered on our electron

Ad
source: stackoverflow.com
Ad