ScrollArea doesnt work under IE 11

[bulaj]

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
facebook/react#6271,
facebook/react#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.

[berrtech]

same here, @bulaj have you found any workaround for this issue?

[bulaj]

nope, we moved to react-custom-scrollbars

[souhe]

Hi, thanks for notice that defect. I'll look at it :)

[jimmed]

@souhe any progress on this issue? I think I'm being bitten by it too.

[e1himself]

:(