iscroll generates warning and error since upgrading to react 0.14.3
I'm using react-scroll. It was working ok before I upgraded react to version 0.14.3. After upgrading the react version I had to update a few other libraries to the latest version namely: react-router-component react-bootstrap react-addons-pure-render-mixin I also had to add react-dom
I had to replace any react.render statements with reactdom.render and remove a React.initializeTouchEvents(true) statement.
I now get a warning and error when the render method in a jsx file tries to render a react-scroll component as follows:
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 Page .
Uncaught Error: 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 Page
var React = require('react');
var IScroll = require('iscroll/build/iscroll-probe');
var ReactIScroll = require('react-iscroll');
var AppStore = require('../../stores/app-store');
var Timeline = require('../timeline/timeline.jsx');
var Vehicles = require('../vehicles/vehicles.jsx');
var SlotsDepartment = require('./slots-department.jsx');
var AppConstants = require('../../constants/app-constants');
var AppWatchMixin = require('../../mixins/AppWatchMixin');
var AppActions = require('../../actions/app-actions');
var PureRenderMixin = require('react-addons-pure-render-mixin');
var Immutable = require('immutable');
var Moment = require('moment');
function getDepartments(){
return {departments: AppStore.getDepartments()}
}
function getVehicleCount() {
return AppStore.getVehicles().size;
}
var scrollOptions = {
scrollX: true,
scrollY: true,
probeType: 3,
bounce: true,
scrollbars: true,
mouseWheel: true
};
var Page = React.createClass({
mixins: [AppWatchMixin(getDepartments), PureRenderMixin],
onScroll: function (scroller) {
AppActions.scroll(AppConstants.Scroll.PAGE, scroller.x, scroller.y);
},
onScrollStart: function() {
AppActions.scrollStart();
},
onScrollEnd: function (scroller) {
AppActions.scrollEnd(AppConstants.Scroll.PAGE, scroller.x, scroller.y);
},
componentDidMount: function() {
AppStore.setPageScroll(this.refs.pageScroll.getIScrollInstance());
},
handleClick: function (e) {
if (!AppStore.isScrolling()) {
var x = e.nativeEvent.changedTouches != null ? e.nativeEvent.changedTouches[0].clientX : e.clientX;
var y = e.nativeEvent.changedTouches != null ? e.nativeEvent.changedTouches[0].clientY : e.clientY;
var vehicleIndex = Math.floor((y - AppStore.getCoords().get('y') - (AppConstants.SetupValues.SLOT_HEIGHT * 2)) / AppConstants.SetupValues.SLOT_HEIGHT);
var timeIndex = Math.floor((x - AppStore.getCoords().get('x') - (AppConstants.SetupValues.SLOT_WIDTH * 3)) / AppConstants.SetupValues.SLOT_WIDTH);
var vehicle = AppStore.getVehicles().slice(vehicleIndex, vehicleIndex + 1).first();
var time = AppStore.getTimeline().slice(timeIndex, timeIndex + 1).first().first();
AppActions.clickPage(x, y, vehicle, time);
}
AppStore.setScrolling(false);
},
render: function () {
var before = AppConstants.SetupValues.SLOTS_BEFORE;
var after = AppConstants.SetupValues.SLOTS_AFTER;
var totalWidth = (before + after + 1) * AppConstants.SetupValues.SLOT_WIDTH;
var totalHeight = (getVehicleCount() * AppConstants.SetupValues.SLOT_HEIGHT);
var departments = this.state.departments.map(function (department, index) {
return <SlotsDepartment key={index} department={department} />
});
var style = {
paddingTop: AppConstants.SetupValues.SLOT_HEIGHT * 2,
paddingLeft: AppConstants.SetupValues.SLOT_WIDTH * 3
}
var innerStyle = {
height: totalHeight,
width: totalWidth
}
return (
<ReactIScroll ref="pageScroll" iscroll={IScroll} options={scrollOptions} onScroll={this.onScroll} onScrollStart={this.onScrollStart} onScrollEnd={this.onScrollEnd} className="page-container" style={style} >
<div className="page-inner" style={innerStyle} onTouchEnd={this.handleClick} onClick={this.handleClick}>
{departments}
</div>
</ReactIScroll>
);
}
});
module.exports = Page;
If I remove the ReactIScroll element from the render method and replace with anything else, an empty div or another react component for example, I don't get an error or warning.
Has anybody else had a similar problem or can suggest anything to try?
thanks in advance
Here's my package.json for the project:
{
"name": "diary",
"version": "1.0.0",
"description": "DCM 2.0",
"main": "gulpfile.js",
"dependencies": {
"autoprefixer": "^6.0.3",
"bootbox": "^4.4.0",
"bootstrap": "^3.3.5",
"browserify": "^10.2.4",
"event-stream": "^3.3.1",
"flux": "^2.0.3",
"gulp": "^3.9.0",
"gulp-clean": "^0.3.1",
"gulp-concat": "^2.6.0",
"gulp-csso": "^1.0.0",
"gulp-postcss": "^6.0.0",
"gulp-replace": "^0.5.4",
"gulp-rev": "^5.1.0",
"gulp-rev-replace": "^0.4.2",
"gulp-sass": "^2.0.4",
"gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.6",
"immutable": "^3.7.4",
"immutable-json": "^2.0.0",
"iscroll": "^5.1.3",
"jquery": "^2.1.4",
"js-cookie": "^2.0.3",
"moment": "^2.10.3",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-async": "^2.1.0",
"react-bootstrap": "^0.28.1",
"react-addons-pure-render-mixin": "^0.14.3",
"react-iscroll": "^0.1.7",
"react-loader": "^1.4.0",
"react-router-component": "^0.28.0",
"react-tap-event-plugin": "^0.1.7",
"reactify": "^1.1.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"jest": {
"collectCoverage": true,
"rootDir": "./",
"scriptPreprocessor": "./preprocessor.js",
"unmockedModulePathPatterns": [
"react"
]
},
"scripts": {
"test": "jest"
},
"author": "Chris Child",
"license": "ISC",
"devDependencies": {
"gulp-jest-iojs": "^1.0.1",
"jest-cli": "^0.5.0"
}
}
Here is my app.jsx file with routing:
var React = require('react');
var Template = require('./app-template.jsx');
var Router = require('react-router-component');
var Locations = Router.Locations;
var Location = Router.Location;
var NotFound = Router.NotFound;
var AppStore = require('../stores/app-store');
var Diary = require('./diary/diary.jsx');
var Login = require('./login/login.jsx');
var Helpdesk = require('./helpdesk/helpdesk.jsx');
var App = React.createClass({
componentDidMount: function() {
AppStore.setRouterLocations(this.refs.routerLocations);
},
render: function(){
return (
<Template className="react-container">
<Locations className="react-container" ref="routerLocations">
<Location path="*/diary/:zoom" handler={Diary} />
<Location path="*/helpdesk" handler={Helpdesk} />
<Location path="*/login" handler={Login} />
<Location path="*/login/:error" handler={Login} />
<NotFound handler={Diary} />
</Locations>
</Template>
);
}
});
module.exports = App;
and its template:
var React = require('react');
var Loading = require('./loading.jsx');
var Template = React.createClass({
render: function() {
return (
<div>
<div className="react-container">
{this.props.children}
</div>
<Loading />
</div>
);
}
});
module.exports = Template;
You probably upgraded react-iscroll to v1.0 which introduced some breaking changes. The most likely culprit is the renaming of iscroll prop to iScroll . From the docs:
// v1.0
<ReactIScroll iScroll={iScroll}>
// versions below 1.0
<ReactIScroll iscroll={iScroll}>