The problem of using numeric indexes in browserify

[zoubin]

I ran into problems when running the example in this repo.

The original label.jsx:

import React from 'react';

export default class Label extends React.Component {
  render() {
    return (
      <div className="commentBox">
        Hello, world!
      </div>
    );
  }
}

If we add a dependency to it:

import React from 'react';
import str from './a.js';

export default class Label extends React.Component {
  render() {
    return (
      <div className="commentBox">
        Hello, world!
      </div>
    );
  }
}

we get an error in the browser:

bundle.js:366 TypeError: (0 , _index6.default) is not a function(…)(anonymous function) 
bundle.js:9386 [HMR] Updated modules ["label.jsx", "a.js"]

However, if we rename './a.js' to './z.js', it works.

I dived a little into the source code, and found that modules are updated only when their contents change. However, when './a.js' inserted, all indexes (to modules in the final bundle) change. The index to node_modules/babel-preset-react-hmre/node_modules/react-transform-hmr/lib/index.js changes from 6 to 7, as the new label.jsx knows. So, when reloading, it tries to load the module with the index 7, which fails as react-transform-hmr keeps the old index 6 in the module definitions.

I've thought up two ways to fix it:

• turn on the --full-paths flag, so absolute paths are used as indexes instead of numbers. The result will not be suitable for production.
• use another plugin to change the indexes into some values which change and only change when contents or file paths change. Like index-hashify

How would you fix this problem, @AgentME ?

[Macil]

Changes in the numeric indexes should already be tracked and handled. It seems like this is just a bug with in that code, possibly specific to handling new files. I'll look into it.