No longer working with React 15.3.2

[ajgilzean]

This library used to work well in my application with React 15.1.0, but since I upgraded it no longer works. The page now crashes and here is the warning and error I get:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of ....

invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of ....

[anchetaWern]

I'm having the same problem as well with a project started with create-react-app https://github.com/facebookincubator/create-react-app

[semeano]

Same here.

[whobutsb]

When developing with create-react-app (React 15.3.2, React Scripts 0.6.1), I have no issues, but when I build the project i'm running into the issue where after the mount the slider is stuck at 0 value and will not move. After I resize the window, i'm able to change the position of the slider.

[astoltzfus]

I see the same issue as @whobutsb, both in a create-react-app and in my project (both React 15.3.2 and Rect-Dom 15.3.2) ... however, I cannot replicate the issue when I upgrade a forked version of this repo to 15.3.2 all around (React, React-Dom, Test-Utils).

Create React App

In Project

Edit: Resizing the window has made no difference - the bug remains.

[edgehero]

= behind handleChange is not not expected

handleChange = (value) => { this.setState({ value: value })

how to solve this error

[whobutsb]

@edgehero Can you explain your solution? Here is what I have, which is not working:

class Volume extends Component {

    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(volume){
        this.props.actions.changeVolume(volume);
    }

    render(){
        return (
            <div className="Volume">
                <div className="panel">
                    <div className="panel-body">
                        <h3>Current Volume: { this.props.app.volume }</h3>
                        <Slider
                            value={ this.props.app.volume }
                            orientation="horizontal"
                            step={ 1 }
                            min={ 0 }
                            max={ 31 }
                            onChange={ this.handleChange } />
                    </div>
                </div>
            </div>
        );
    }
}

[edgehero]

that seems to work for me

[whobutsb]

@edgehero Did you try building the app? It works in development. After the build you run in to the same problem as - https://github.com/whoisandie/react-rangeslider/issues/33#issuecomment-254287759

[whoisandy]

@whobutsb @anchetaWern Tried using it with create-react-app and works fine to me in both dev and prod environments with both the latest version of react and 15.3.2 as well. Not quite sure, why it isn't working on your end. Also used the same code found examples directory.

@whobutsb Seems like redux is being used in the example mentioned. Haven't tried with it though. Can you show the flow, i.e the reducer, action and mapStateToProps for further insight?

[ajhurliman]

It doesn't look like react-rangeslider works with props, so it's difficult to pair up with redux. However, if you include componentWillReceiveProps() in your component you can use the change in props from redux to drive the change in state.

class ControlRackComponentElement extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      volumeLevel: props.media.volumeLevel,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      volumeLevel: nextProps.media.volumeLevel,
    });
  }

  handleVolumeChange = (newVolumeLevel) => {
    store.dispatch(setVolumeLevel(newVolumeLevel));
  }

  render() {
    let { volumeLevel } = this.state;

    return (
      <div id="volume-container">
        <div id="volume-slider-container">
          <Slider
            value={volumeLevel}
            onChange={this.handleVolumeChange}
          />
        </div>
      </div>
    )
  }
}

[asaf]

With react-15.4.2 I get:

warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the MyPage component.

Seems like the onChange is invoked in a very early stage before component is mounted.

[whoisandy]

@ajhurliman Managing state from both component and reducer would behave in a wierd way since setState is async does a batch update. Check out this gist out for a similar implementation.

[whoisandy]

@asaf Could you be more specific about the problem? I've tried it out with 15.4.2, seems to work fine on my end.

[asaf]

@whoisandie I somehow got version 1.x, updating to 2x works fine :-)

[johndiiorio]

@whoisandie I am also having the same problem where after the slider handle is stuck at 0 and will not move until I resize the window. I am using react-rangeslider version 2.0.1 and React 15.5.4

[martinpesout]

@johndiiorio I had the same problem. I spent hours trying to find solution. Upgrade to the latest React 16.2 fixed this problem. It can be also solution for you.