Webpack予期しないトークン<

Question

私はこのプロジェクトでwebpackを使用して反応し、私のプロジェクトにreact-paginatorをインポートしたいのですが、フロントエンドコードをバンドルするとエラーが発生します。

私はWebPACKのはnode_modulesフォルダの下にJSXコードを解析していなかったと思いますが、私は解決するためにどのように何のアイデアを持っていない......

---

エラー：

ERROR in ./~/react-paginator/index.js 
Module parse failed: /home/kang/Desktop/doing/match-platform/node_modules/react-paginator/index.js Line 109: Unexpected token < 
You may need an appropriate loader to handle this file type. 

ウェブパック設定：

var webpack = require('webpack'); 

module.exports = { 
    entry: { 
     root: './src/front_end/scripts/root_container.js', 
    }, 
    module: { 
     loaders: [{ 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets:['es2015', 'react'] 
      } 
     }, { 
      test: /\.json$/, 
      loader: 'json' 
     }] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    output: { 
     path: './src/front_end/dist', 
     publicPath: '/', 
     filename: 'bundle.js' 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery', 
      'root.jQuery': 'jquery', 
      'Promise': 'exports?global.Promise!es6-promise', 
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch', 
     }), 
     new webpack.DefinePlugin({ 
      "require.specified": "require.resolve" 
     }), 
    ] 
}; 

Answer 1

反応ページャーのソースは、すぐに使えるフォーマットにプリコンパイルされていないという問題があります。それはまだJSXを含んでいます。だからコードがあなたのために失敗するのです。

これを解決するには、コードを自分でコンパイルする必要があります。あなたはJSXローダー定義にこのようなincludeを追加しようとすることができます：

include: path.join(__dirname, 'node_modules/react-paginator') 

これはあなたのためのファイルをコンパイルするためにWebPACKのに役立つはずです。

---

私はあなたが調べることができる代替コンポーネントを開発しました。 react-pagifyを参照してください。あなたの面倒を見ることなく動作するはずです。しかし、デザインによって使用するのはもっと複雑です。