ScrollArea doesnt work under IE 11
Cheers.
when rendering page in Internet Explorer 11 invariant.js throws error:
e.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
chrome, firefox, safari, opera work just fine; main.js as basic as it gets:
import React from 'react';
import {render} from 'react-dom';
import ScrollArea from 'react-scrollbar';
render(<ScrollArea><div>hello</div></ScrollArea>, document.getElementById('app'));
When i was looking for solution i managed to make a scenario (in real app, with router.js) when i saw in ReactReconciler:
Unable to get property 'getNativeNode' of undefined or null reference.
But i forgot how exactly and cant provide info how to reproduce it anymore.
On above i've found https://github.com/facebook/react/issues/6271, https://github.com/facebook/react/issues/6246 may those be connected to this issue?
installed packages:
"dependencies": {
"autoprefixer": "6.3.6",
"babel-loader": "6.2.4",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-polyfill": "6.9.1",
"babel-preset-es2015": "6.9.0",
"babel-preset-react": "6.11.0",
"babel-preset-stage-0": "6.5.0",
"bundle-loader": "0.5.4",
"classnames": "2.2.5",
"css-loader": "0.23.1",
"debug-levels": "0.2.0",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"gen-uid": "0.0.2",
"immutable": "3.8.1",
"less": "2.7.1",
"less-loader": "2.2.3",
"lodash": "4.13.1",
"moment": "2.13.0",
"nuka-carousel": "2.0.2",
"postcss-loader": "0.9.1",
"pure-render-decorator": "1.1.1",
"react": "15.1.0",
"react-dom": "15.1.0",
"react-dropzone": "3.5.1",
"react-highcharts": "8.4.0",
"react-intl-tel-input": "3.1.0",
"react-lazyload": "2.1.3",
"react-mixin": "3.0.5",
"react-modal": "1.3.0",
"react-notification-system": "0.2.7",
"react-redux": "4.4.5",
"react-router": "2.5.1",
"react-scrollbar": "0.4.1",
"react-select": "1.0.0-beta13",
"react-tooltip": "3.0.7",
"redux": "3.5.2",
"redux-create-reducer": "1.1.1",
"redux-logger": "2.6.1",
"redux-thunk": "2.1.0",
"sortablejs": "1.4.2",
"style-loader": "0.13.1",
"superagent": "2.0.0",
"svg-inline-loader": "0.6.0",
"svg-inline-react": "1.0.1",
"url-loader": "0.5.7",
"webpack": "2.1.0-beta.14",
"why-did-you-update": "0.0.8"
},
"devDependencies": {
"MD5": "1.3.0",
"babel-cli": "6.10.1",
"babel-eslint": "6.1.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.9.0",
"eslint": "2.13.1",
"eslint-plugin-react": "5.2.2",
"expect": "1.20.1",
"glob": "7.0.5",
"gulp": "3.9.1",
"gulp-batch": "1.0.5",
"gulp-clean": "0.3.2",
"gulp-clean-css": "2.0.10",
"gulp-concat": "2.6.0",
"gulp-filter": "4.0.0",
"gulp-if": "2.0.1",
"gulp-less": "3.1.0",
"gulp-mustache": "2.2.0",
"gulp-plumber": "1.1.0",
"gulp-rename": "1.2.2",
"gulp-requirejs": "0.1.3",
"gulp-rev": "7.1.0",
"gulp-sourcemaps": "1.6.0",
"gulp-svg-sprite": "1.3.1",
"gulp-uglify": "1.5.4",
"gulp-watch": "4.3.8",
"isparta": "4.0.0",
"istanbul": "0.4.4",
"less-plugin-autoprefix": "1.5.1",
"mocha": "2.5.3",
"mock-local-storage": "1.0.2",
"nock": "8.0.0",
"react-addons-test-utils": "15.1.0",
"react-styleguidist": "2.3.1",
"redux-devtools": "3.3.1",
"redux-devtools-dock-monitor": "1.1.1",
"redux-devtools-filterable-log-monitor": "0.6.6",
"redux-devtools-log-monitor": "1.0.11",
"redux-mock-store": "1.1.1",
"redux-slider-monitor": "1.0.6",
"run-sequence": "1.2.1",
"superagent-nock": "0.1.1",
"through2": "2.0.1"
},
webpack config:
module.exports = {
entry: {
app: APP_ENTRY,
vendor: VENDOR_ENTRY
},
output: {
path: BUILD_PATH,
publicPath: PUBLIC_PATH,
filename: '[name]-' + revision + '.js'
},
devtool: 'inline-source-map',
module: {
loaders: [{
test: /bootstrap\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap!postcss!less?sourceMap'),
exclude: /node_modules/
}, {
test: /\.less$/,
loaders: ['style', 'css?sourceMap', 'postcss', 'less?sourceMap'],
exclude: [/node_modules/, /bootstrap\.less$/]
}, {
test: /\.css$/,
loaders: ['style', 'css?sourceMap', 'postcss'],
exclude: /node_modules/
}, {
test: /\.jsx?$/,
loaders: ['babel-loader'],
plugins: ['transform-decorators-legacy'],
exclude: /node_modules/
}, {
test: /\.svg$/,
loaders: ['svg-inline'],
exclude: /node_modules/
}, {
test: /\.(png|jpg|gif)$/,
loaders: [
'url?limit=1000000'
]
}, {
test: /\.(woff|eot|ttf])$/,
loader: 'url-loader',
exclude: /node_modules/
}]
},
postcss: function () {
return [autoprefixer];
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new ExtractTextPlugin('bootstrap-' + revision + '.css'),
new webpack.EnvironmentPlugin([
'NODE_ENV'
])
]
};
Dont know what more useful info i could provide.
same here, @bulaj have you found any workaround for this issue?
nope, we moved to react-custom-scrollbars
Hi, thanks for notice that defect. I'll look at it :)
@souhe any progress on this issue? I think I'm being bitten by it too.
:(