I decided to use react-scrollbar to customize the scrollbars on the site. In the manual on the use of nodovskiy import module

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> ); } });

the build is successful, however when I run the application I get an error

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

I use ES6 import

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

and getting another error

 SyntaxError: Unexpected token import

for some reason, swears at the first line of the module file

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

Where do I make a mistake?

Config with 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'] }
  • one
    according to the second item, webpack-1 does not understand imports from the es6 box. Usually they are processed by babel, that is, the loel must be a babel-loader - Duck Learns to Hide
  • @ Duck Learning Babel with the necessary presets already installed - "presets": ["es2015", "stage-0", "react"]. The build is successful, I get an error when I try to refresh the application page. Before that, I used the possibilities of es7 in places and there were no problems. maybe I missed something else? - while1pass
  • @ Duck Learning How do presets differ - stage-0, 1, 2? - while1pass
  • one
    apparently missed. Webcam show. About presets: each js-feature goes through several stages before getting to the standard during which it changes. stage-3 - only features closest to getting into the current standard, stage-0 - the most unstable, plus features from higher presets .. Read more in dock Babel. babeljs.io/docs/plugins - Duck Learns to Take Cover
  • one
    Offhand looks like norms, maybe he babelrc does not pull up. "before that, in some places I used the possibilities of es7 and there were no problems." Maybe you used the features supported natively in the browser that you watched?) Was the code really transpiled? Take a stupid file with one arrow function and see if it is transformed as a result of the assembly in function () - Duck Learns to Hide

1 answer 1

On the first point: try installing the latest version of react-router. On the second point: Duck correctly advises, it will be something like this:

Installation:

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

Use in webpack:

 module: { loaders: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { presets: ['es2015'] } } ] }
  • I do not understand where is the reactor router? on the second point, a babel with the necessary presets is already installed - "presets": ["es2015", "stage-0", "react"]. The build is successful, I get an error when I try to update the application page with a new build. Before that, I used the possibilities of es7 in places and there were no problems. maybe I missed something else? - while1pass