Składnia importu nie działa z pakietem sieci Web

Question

Mam błąd Illegal import declaration. kiedy próbowałem zintegrowany reagować js repo z WebPacka

I przeniesione z oryginalnego kodu źródłowego z https://github.com/dptoot/react-event-calendar/blob/master/example/src/example.js

Jak mogę naprawić Illegal import declaration błąd?

Myślę, że składnia import działa tylko w niektórych js lib?

Błąd

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

użycie Babel poprzez babel-loader przekształcić import deklaracji (i innych ES2015 jeśli chcesz) . http://babeljs.io/docs/setup/#webpack

Answer 2

Jako że @JMM odpowiedział, wydaje się, że potrzebujesz babel-loader. Ponadto, ja wciąż stoi ten sam problem, i wreszcie zostanie rozwiązany poprzez edycję webpack.config.js takich jak

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

albo dlatego jsx-loader już nie wygląda praca z tej konfiguracji, może być usunięty.

Mam nadzieję, że pomoże to