Javascript React路由产生意外的令牌错误

我正在尝试使用React路由器组件为我的React应用程序创建路由。但是，当我使用webpack构建项目时，会出现以下错误：

./app/js/client.jsx中的

错误
模块生成失败：错误：分析错误：第22行：意外标记不要对
MainPage
变量使用解构，因为该文件仅导出React类。应该是这样的

var MainPage = require('./components/views/app.jsx');

可能您的JSX没有被编译。你用什么网页加载器来编译它？您可以编辑您的问题以包括您的网页包配置吗？谢谢Jordan，我添加了网页包配置和到我的github repo分支的链接，到目前为止包含了完整的项目。我想我可能弄错了。其他JSX文件是否正常工作？错误消息是奇怪的，因为
client.jsx
似乎没有22行，所以似乎在编译文件后发生了这种情况（因为编译后的输出可能有22多行）。谢谢！
webpack: {
  client: {
    entry: __dirname + '/app/js/client.jsx',
    output: {
      path: 'build/',
      file: 'bundle.js'
    },
    module: {
      loaders: [
      {
        test: /\.jsx$/,
        loader:'jsx-loader'
      }]
    }
  },
  test: {
    entry: __dirname + '/test/client/test.js',
    output: {
      path: 'test/client/',
      file: 'bundle.js'
    },
    module: {
      loaders: [
      {
        test: /\.jsx$/,
        loader:'jsx-loader'
      }]
    }
  },
  karma_test: {
    entry: __dirname + '/test/karma_tests/test_entry.js',
    output: {
      path: 'test/karma_tests/',
      file: 'bundle.js'
    },
    module: {
      loaders: [
      {
        test: /\.jsx$/,
        loader:'jsx-loader'
      }]
    },
    background: true
  }
},

var MainPage = require('./components/views/app.jsx');