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
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.
I ran into problems when running the example in this repo.
The original
label.jsx
:If we add a dependency to it:
we get an error in the browser:
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 from6
to7
, as the newlabel.jsx
knows. So, when reloading, it tries to load the module with the index7
, which fails asreact-transform-hmr
keeps the old index6
in the module definitions.I've thought up two ways to fix it:
--full-paths
flag, so absolute paths are used as indexes instead of numbers. The result will not be suitable for production.How would you fix this problem, @AgentME ?