【问题标题】：import syntax not working with webpack导入语法不适用于 webpack
【发布时间】：2015-09-23 02:31:45
【问题描述】：

我收到Illegal import declaration 错误。当我尝试将 react js repo 与 webpack 集成时

我从https://github.com/dptoot/react-event-calendar/blob/master/example/src/example.js迁移了原源码

如何修复Illegal import declaration 错误？

我认为import 语法只适用于某些 js 库？

错误

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' }
    ]
  }

};

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

通过 babel-loader 使用 Babel 来转换 import 声明（如果需要，还可以使用其他 ES2015）。 http://babeljs.io/docs/setup/#webpack

【讨论】：

【解决方案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 看起来不再使用这个配置，它可以被删除。

希望对你有帮助

【讨论】：