0

Решил использовать 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']
}
11
  • 1
    по второму пункту вебпак-1 не понимает из коробки es6 импорты, Обычно они обрабатываются бабелем, то есть в loaders должен быть babel-loader 15 фев 2017 в 0:15
  • @УткаУчитсяУму бабель с нужными пресетами уже установлен - "presets": ["es2015", "stage-0", "react"]. сборка происходит успешно, ошибку получаю при попытку обновить страницу приложения. до этого местами использовал возможности es7 и не возникало проблем. может я что-то еще упустил?
    – while1pass
    15 фев 2017 в 8:28
  • @УткаУчитсяУму чем отличаются пресеты - stage-0, 1, 2?
    – while1pass
    15 фев 2017 в 8:29
  • 1
    видимо упустили. Конфг вебпака покажите. Про пресеты: каждая js-фича проходит несколько этапов до попадания в стандарт в ходе которых она меняется. stage-3 - только фичи самые близкие к попаданию в актуальный стандарт, stage-0 - самые нестабильные плюс фичи из более высоких пресетов.. Подробнее в доках бабеля. babeljs.io/docs/plugins 15 фев 2017 в 10:46
  • 1
    навскидку выглядит норм, возможно он babelrc не подтягивает. "до этого местами использовал возможности es7 и не возникало проблем". Может Вы использовали возможности поддерживаемые нативно в том браузере который смотрели?) Код реально транспилировался? Возьмите запилите тупо файл с одной стрелочной функцией и посмотрите преобразится ли он в результате сборки в function() 15 фев 2017 в 12:39

1 ответ 1

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']
      }
    }
  ]
}
1
  • не пойму причем здесь реакт-роутер? по второму пункту - бабель с нужными пресетами уже установлен - "presets": ["es2015", "stage-0", "react"]. сборка происходит успешно, ошибку получаю при попытку обновить страницу приложения с новой сборкой. до этого местами использовал возможности es7 и не возникало проблем. может я что-то еще упустил?
    – while1pass
    15 фев 2017 в 8:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.