Search code examples
reactjssliderrangeslidermdbreact

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

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.

Solution

  • 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