react-hotkeys production build causes runtime error

[andrewvarga]

Hi! I'm using esbuild with the react-hotkeys npm library, and there is a runtime error I get when using the production build.
https://github.com/greena13/react-hotkeys

The issue might be within the library, but I wanted to confirm this here.
I created a simplified repository where this can be reproduced:
https://github.com/andrewvarga/esbuild-test

1. Run npm install and the prod build: npm run build:prod.
2. Open the result in build/prod/index.html
3. Press cmd + shift on a mac
   -> error:

Uncaught ReferenceError: KeysWithKeyUpHiddenByCmd is not defined
    at keyupIsHiddenByCmd (app.bundle.js:7547)

This works fine using the dev build.

What I found is that in the production build of react-hotkeys, the variable KeysWithKeyUpHiddenByCmd is defined right before the function keyupIsHiddenByCmd in the same context so it's accessible from there:

for(var KeysWithKeyUpHiddenByCmd={Enter:!0,Backspace:!0,ArrowRight:!0,ArrowLeft:!0,ArrowUp:!0,ArrowDown:!0,CapsLock:!0},i=1;13>i;i++)KeysWithKeyUpHiddenByCmd["F".concat(i)]=!0;

function keyupIsHiddenByCmd(a){return 1===a.length||hasKey(KeysWithKeyUpHiddenByCmd,a)}

However in the bundle file provided by esbuild the variable is defined in something which starts like this:

  var init_react_hotkeys_production_min = __esm({
    "node_modules/react-hotkeys/es/react-hotkeys.production.min.js"() {

and the function keyupIsHiddenByCmd is defined in an outer scope so it doesn't have access to KeysWithKeyUpHiddenByCmd.

These 2 modules in the react-hotkeys repo are here:
https://github.com/greena13/react-hotkeys/blob/master/src/helpers/resolving-handlers/keyupIsHiddenByCmd.js
https://github.com/greena13/react-hotkeys/blob/master/src/const/KeysWithKeyUpHiddenByCmd.js

Given this, is it possible to detect the source of the problem, whether it's in react-hooks or maybe esbuild does something during bundling that breaks these references?

[andrewvarga]

@evanw With further investigation I think the issue is probably within esbuild..if I change the above snippet with the for loop to read like this:

var KeysWithKeyUpHiddenByCmd;
for(KeysWithKeyUpHiddenByCmd=...)
function keyupIsHiddenByCmd(){...}

then it works well. The only difference is that I added the declaration of KeysWithKeyUpHiddenByCmd above the for loop.
Is it possible that esbuild assumes that the variable declared within the for loop should only have a scope within the for loop?

[kzc]

It does seem like an esbuild bug as you've explained. There might be a simple workaround, however. I don't know much about react-hotkeys but its ES module wrapper in package.json is suboptimal/undesirable because of its use of commonjs require():

$ grep module node_modules/react-hotkeys/package.json 
  "module": "index.es",

$ cat node_modules/react-hotkeys/index.es.js 
'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./es/react-hotkeys.production.min.js');
} else {
  module.exports = require('./es/index.js');
}

Apply this change to your example App.tsx file to avoid the problematic commonjs require() wrapper in order to use ES code directly:

-import { GlobalHotKeys } from 'react-hotkeys';
+import { GlobalHotKeys } from 'react-hotkeys/es/react-hotkeys.production.min.js';

When this command is executed:

esbuild App.tsx --bundle --define:process.env.NODE_ENV='"production"' > out.js

The following code fragment can be seen in out.js:

  for (var KeysWithKeyUpHiddenByCmd = { Enter: true, Backspace: true, ArrowRight: true, ArrowLeft: true, ArrowUp: true, ArrowDown: true, CapsLock: true }, i = 1; 13 > i; i++)
    KeysWithKeyUpHiddenByCmd["F".concat(i)] = true;
  function keyupIsHiddenByCmd(a) {
    return a.length === 1 || hasKey(KeysWithKeyUpHiddenByCmd, a);
  }