IE 11 support ?

[fakefish]

Bug description scroll event didn't listen in IE, please support IE11 at least

To Reproduce none Expected behavior none

Screenshots none

Technical details:

• Server Side Rendering? [No]
• Device [Desktop]
• Operating System [Windows]
• Browser [IE 11]

[Aljullu]

Hi @fakefish, thanks for filling a bug. Unfortunately I don't have a Windows machine and it's a bit hard for me to test in IE11.

However, I tested the live demo and it seems to work as expected in Internet Explorer 11. Could you explain a bit more what unexpected results are you experimenting?

[petertenhoor]

Can confirm that the package does not work on IE11.

Console error:

SCRIPT438: Object doesn't support property or method 'createRef'

It happens when creating a ref:

                return "debounce" === e.delayMethod ? t.delayedScroll = (0, u.default)(n, e.delayTime) : "throttle" === e.delayMethod && (t.delayedScroll = (0, s.default)(n, e.delayTime)), t.state = {
                    scrollPosition: {
                        x: y(),
                        y: h()
                    }
                }, t.baseComponentRef = i.default.createRef(), t

I will try to transpile your package with my babel setup. Maybe this fixes it. It not, I might just have to fork your package because it's just to good to let go for IE11 ;p

[Aljullu]

@petertenhoor any luck with that? I use Babel in all my React projects, so I don't know if there are browser incompatibilities when the code is not transpiled.

But I will be happy to review and merge a PR if you think this is an issue in the package and you could find a solution! :slightly_smiling_face:

[petertenhoor]

Yes I got it working in IE11 by transpiling your node_module with my webpack setup:

{
     test: /\.js?$/,
    exclude: /node_modules\/(?![react\-lazy\-load\-image\-component])/,
    use: 'babel-loader'
}

My .babelrc looks like this:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-function-bind",
    "@babel/plugin-transform-for-of",
    "react-hot-loader/babel"
  ]
}

I also use the @babel-polyfill in my webpack entry point:

 entry: {
        app: [
            "@babel/polyfill",
            'react-hot-loader/patch',
            './client/index.js'
        ]
    }

I'm not sure which part it is, but your module must be missing one of these to make it IE11 compatible.