импорт синтаксис не работает с webpack

Question

У меня есть Illegal import declaration ошибка. когда я попытался интегрировал среагировать Js репо с WebPack

Я мигрировал исходный код из https://github.com/dptoot/react-event-calendar/blob/master/example/src/example.js

Как я мог исправить Illegal import declaration ошибки?

Я думаю, что синтаксис import работает только в некоторых js lib?

ERRor

ERROR in ./app/main.js 
Module build failed: Error: Parse Error: Line 2: Illegal import declaration 
    at throwError (/Users/poc/sandbox/ha/node_modules/jsx-loader/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2823:21) 

main.js

var React = require('react'); 
const EventCalendar = require('react-event-calendar'); 

import moment from 'moment'; 
import Row from 'react-bootstrap/lib/Row'; 
import Col from 'react-bootstrap/lib/Col'; 
import Button from 'react-bootstrap/lib/Button'; 
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'; 
import Popover from 'react-bootstrap/lib/PopOver'; 
import Overlay from 'react-bootstrap/lib/Overlay'; 

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 


var config = module.exports = { 
    // the base path which will be used to resolve entry points 
    context: __dirname, 
    // the main entry point for our application's frontend JS 
    entry: './app/main.js', 
    output: { 
    filename: 'main.js' 
    }, 

    resolve: { 
     extensions: ['', '.js', '.jsx', '.ts'] 
    }, 

    module: { 
    loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'jsx-loader?insertPragma=React.DOM&harmony' } 
    ] 
    } 

}; 

Answer 1

Использование Бабель с помощью babel-loader превратить import декларации (и другие ES2015, если вы хотите) , http://babeljs.io/docs/setup/#webpack

Answer 2

Как @JMM ответил, кажется, вам нужно babel-loader. Кроме того, я по-прежнему сталкивается с той же проблемой, и, наконец, разрешаются путем редактирования webpack.config.js, такие как

module: { 
    loaders: [ 
-  {test: /\.jsx?$/, loader: 'babel-loader'}, 
-  {test: /\.jsx$/, loader: 'jsx-loader'} 
+  {test: /\.jsx$/, loader: 'jsx-loader'}, 
+  {test: /\.jsx?$/, loader: 'babel-loader'} 
    ] 
    }, 

или потому, что jsx-loader выглядит больше не работает с этой конфигурации, он может быть удален.

Я надеюсь, что это поможет