Webpack Неожиданный токен <

Question

Я использую webpack и реагирую в этом проекте, и я хочу импортировать react-paginator в свой проект, но я получаю сообщение об ошибке, когда я связываю код переднего конца.

Я думаю Webpack не разобрать код JSX под node_modules папке, но у меня нет идей, как решить ......

---

ошибка:

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. 

Конфигурация webpack:

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

Проблема заключается в том, что источник response-paginator не был предварительно скомпилирован в формат, который будет работать из коробки. Он по-прежнему содержит JSX. Вот почему код вам не подходит.

Чтобы решить эту проблему, вам придется скомпилировать код самостоятельно. Вы можете попробовать добавить include как это к вашему JSX определения загрузчика:

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

Это должно помочь WebPack скомпилировать файл для вас.

В связи с этим я разработал альтернативный компонент, который вы могли бы изучить. См. react-pagify. Он должен работать без каких-либо действий с вашей стороны. Тем не менее, это сложнее использовать по дизайну.