Scroll and mousewheel don't work in chrome

[onemanstartup]

firefox 37 is working
chrome 39 give me these errors.

ReactWheelHandler.js:44 Uncaught ReferenceError: normalizeWheel is not defined
DOMMouseMoveTracker.js:45 Uncaught ReferenceError: EventListener is not defined 

PS. Also, shouldn't be dependencies like object.assign be in readme? or browser support? at least couple of lines. Thanks.

[pieterv]

Hey @onemanstartup, can you please give us a little more info around this issue. Is this happening on the sites examples? or just locally? is this installed via npm or the dist bundle?

Agree we should add some more info around browser support/environment requirements, feel free to create another issue for this.

[onemanstartup]

Just locally, basically this is what I have this code. I'm using webpack.

Object.assign = Object.assign || require('object.assign')
FixedDataTable = require('fixed-data-table')
require('fixed-data-table/dist/fixed-data-table.css')
Table = FixedDataTable.Table
Column = FixedDataTable.Column
rows = [[1,2], [2,2], [2,2], [2,2], [2,2]]

rowGetter = (rowIndex) ->
  rows[rowIndex]

module.exports = React.createClass
  render: ->
    <div>
      <Table rowHeight={40} rowGetter={rowGetter} rowsCount={rows.length} width={200} height={610} headerHeight={40} >
        <Column cellRenderer={@cellRender} label="lol" width={200} dataKey={0} />
      </Table>
    </div>

it seems webpack can't require some files.

var normalizeWheel = __webpack_require__(366);
var EventListener = __webpack_require__(407);

[jusio]

Didn't encounter this issue, until I started using webpack. Happens randomly, for no obvious reason.

[pieterv]

Hey @onemanstartup @jusio i'm having some trouble reproducing this issue. I created this minimal test case repo based off your example code above (https://github.com/pieterv/fixed-data-table-test), this runs fine for me locally. Could you try checking this out to see if it works for you and maybe tweak it till you can reproduce your error.

Thanks for your help, this seems like a strange error, it would be good to get to the bottom of it :P

[onemanstartup]

@pieterv Here is how to reproduce, insert in webpack.config.js this devtool: "eval",
Without eval it is working, and with inline-source-map.

[pieterv]

@onemanstartup hmm adding devtool: "eval" to my config still didn't reproduce the issue :S, i'm on chrome 40, any other ideas? I wonder if this is some kinda webpack issue, I can't imagine what we are doing that would cause this.

[onemanstartup]

I tried chrome 39
Checked webpack version 1.5.3
Safari, Firefox, even old Opera are working.

So I downloaded chrome canary 42, clear cache and it's working. I still don't know what besides eval can trigger that behaviour. I will report if any changes in browser break this.

[jusio]

Well, it's looks like this bug is extremely random. Sometimes it appears right away after page load. Sometimes it appears after 5 minutes after load. But happens less often on your example (with devtools:"eval"), than on my project.

Just to help I've put my code on this branch: https://github.com/jusio/storage-area-explorer/tree/wheel-bug

To build, use:
npm install
webpack
open reacttest/test.html

Here is a demonstration of bug in action: https://www.youtube.com/watch?v=eupBPysVaDg

[pieterv]

Hey @jusio, thanks for the awesomely detailed bug report, thanks to this after a lot of digging i think i have found the issue!

So first to reliability reproduce the bug i found that if you close the dev tools, then refresh the page it would show up as soon as you scrolled the mouse wheel.

I believe the issue is related to how webpack is packaging the files then evaling them in combination with the "use strict" declaration. So the quick fix for this is to remove the "use strict" definition from node_modules/fixed-data-table/internals/ReactWheelHandler.js line 40. Removing this code seems to reliable fix the error for me as it allows the function to use the global normalizeWheel var (it seems to be evaling it into global scope).

There is two ways to fix this issue, one hacky quick way is for us to remove "use strict" from our files, which i would really rather not do. Or the other way is for webpack to wrap the eval string of the modules in a self executing function which it does for most modules that use custom globals like process anyway. @jusio @onemanstartup In the mean time you can make the change locally and maybe we should file an issue on the webpack repo to see if they are able to fix it.

[pieterv]

By the way @jusio that looks like an awesome chrome plugin, it's awesome to see this project being used outside of Facebook!

[jusio]

@pieterv thanks a lot, I was toying with idea to move to React from Angular for some time already, but it was fixed-data-table, which helped to make this decision. Many more people will be using it, for many applications a scrollable, fast grid with fixed rows/headers is a must have component. It is very generous of you to open-source this component=)

Regarding the bug, I think Webpack should be notified for sure, at least they will be able to make a more specific bug report for chrome team (it is mainly a chrome issue, from what I understand).

[pieterv]

@jusio Awesome to hear! It's comments like that that make it worth it for us!

Good idea i will create an issue with webpack.

[pieterv]

After some poking around on github issues it seems this is a known issue and can be fixed by adding a "use strict"; to the top any file that uses ES6 classes (which will remove them from being inserted in each method), i believe ReactWheelHandler is the only module that falls in this category but i will double check.

Related issues:
webpack/webpack#417
facebookarchive/flux#45

[pieterv]

This should be working in the 0.1.1 release, let me know if not.