All range slider libraries giving the error Element type invalid. What else can I try?

Question

I want to create a slider in my project and I am using react-rangeslider library. I wrote a very simple piece

const Slider = require('react-rangeslider');
var Para = React.createClass({
handleChange: function(value) {
        this.setState({
            value: value,
        });
    },
    render: function () {

        return (
            <Slider
        value={this.state.value}
        orientation="vertical"
        onChange={this.handleChange} />
        );
    }
});

which is resulting in the error

app.js:6873 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Para`.

Version "react-rangeslider": "^2.2.0" Other libraries I tried were mdbReact, ReactBootstrapSlider.

I did see the posts with similar error but all those are importing in a different way.

Answer 1

this error happens when you import incorrectly your component.

in case you are using default export:

// yourfile.js
const Component;
export default Component;

// anotherFile.js
import yourComponent form './yourfile';

in case you are using named export:

// yourfile.js
export const Component;

// anotherFile.js
import { Component } form './yourfile';

Answer 2

This is a known issue, the library doesn't export default properly, so to import the library you'll need to do:

const Slider = required('react-rangeslider').default;

Source: https://github.com/whoisandy/react-rangeslider/issues/96