ReactJS + Electron. В чем ошибка?

Question

[Григорий Дикий]

Доброго времени суток! Месяц назад отошел от проекта по React и решил все же его доделать, но почему-то постоянно получаю ошибку при обработке синтаксиса.

bundle.js:1 SyntaxError: /home/dikiigr/MEGA/Uneversity/3 Курс/Визуальное программирование/Pomidoro Timer/app/index.js: Unexpected token (22:2) while parsing file: /home/dikiigr/MEGA/Uneversity/3 Курс/Визуальное программирование/Pomidoro Timer/app/index.js

package.json

{
  "name": "pomidoro-timer",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "watch-js": "watchify app/index.js -t babelify -o public/js/bundle.js --debug --verbose",
    "watch-sass": "node-sass -w src/ -o public/css/",
    "watch": "npm run watch-js & npm run watch-sass"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/dikiigr/desktop-pomidoro-timer.git"
  },
  "keywords": [
    "pomidoro-timer"
  ],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/dikiigr/desktop-pomidoro-timer/issues"
  },
  "homepage": "https://github.com/dikiigr/desktop-pomidoro-timer#readme",
  "dependencies": {
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babelify": "^7.3.0",
    "electron-context-menu": "^0.4.0",
    "electron-prebuilt": "^1.3.3",
    "electron-reload": "^1.0.2",
    "jquery": "^3.1.0",
    "node-sass": "^3.8.0",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.1",
    "react-router-redux": "^4.0.5",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0",
    "watchify": "^3.7.0"
  },
  "devDependencies": {
    "debug-menu": "^0.4.0",
    "node-sass": "^3.8.0"
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { hashHistory } from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';
import { taskListReducer } from './reduces/TaskListReducers';
import { timerReducer } from './reduces/TimerReducers';
import { settingsReducer } from './reduces/SettingReducer';
import * as localStore from './utils/LocalStorage';
import App from './containers/App';

const store = createStore(combineReducers({taskList: taskListReducer, timer: timerReducer, settings: settingsReducer, routing: routerReducer}), localStore.get());
const history = syncHistoryWithStore(hashHistory , store);

function newState() {
  let state = store.getState();
  localStore.set(state, ['timer', 'taskList', 'settings']);
}

ReactDOM.render(
  <Provider store={store}>
    <App history={history} />
  </Provider>,
  document.getElementById('root')
);

store.subscribe(newState);
newState();

Подозреваю что ошибка в пакетах или параметрах передачи babel скрипта. Он находит ошибку синтаксиса в месте ReactDOM.render. Пытался чисто вызвать App без Provider такая же ошибка

Answer 1

[Максим]

Судя по ошибке, babel не может преобразавать "react-компонент" и для него "<" (22:2 - первый символ в строке <Provider... , а так же если вы убирали , то первый символ в<App...) - это не валидный код.

Добавьте в файлик с настройками пресет "react", (или создайте с подобным содержимым)

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
}