Node/ES6 import. Uncaught SyntaxError: Unexpected token import при запуске приложения

934

16 февраля 2017, 00:20

Решил использовать react-scrollbar для кастомизации скроллбаров на сайте. В мануале по использованию, указывается нодовский импорт модуля

var ScrollArea = require('react-scrollbar');
    var App = React.createClass({
      render() {
        return (
          <ScrollArea
            speed={0.8}
            className="area"
            contentClassName="content"
            horizontal={false}
            >
            <div>Some long content.</div>
          </ScrollArea>
        );
      }
    });

сборка происходит успешно, однако при запуске приложения я получаю ошибку

React.createElement: type is invalid -- expected a string 
(for built-in components) or a class/function (for composite components) but 
got: object

Использую ES6 импорт

import ScrollArea from 'react-scrollbar/src/js/ScrollAreaWithoutCss'

и получаю другую ошибку

SyntaxError: Unexpected token import

по какой-то причине ругается на первую строчку файла модуля

import ScrollArea from './ScrollArea.jsx';
export default ScrollArea;

где допускаю ошибку?

Конфиг с babel

module: {
      preloaders:[{
          test: /\.(js|jsx)$/,
          loaders: ['eslint']
      }],
      loaders: [{
          test: /\.(js|jsx)$/,
          loaders: ['babel'],
          exclude: [
            /(node_modules|bower_components)/
          ]
        }]
      ...

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": ['transform-runtime', 'transform-decorators-legacy']
}

Answer 1

По первому пункту: попробуйте установить последнюю версию react-router. По второму пункту: Утка правильно советует, это будет примерно так:

Установка:

npm install babel-loader babel-core babel-preset-es2015 webpack --save-dev

Использование в webpack:

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }
  ]
}