Babel plugin to wrap default export with react-hot-loader
...
export default thing;
will be transformed to
import { hot } from 'react-hot-loader';
...
export default hot(module)(thing);
This can be useful when multiple "root" react components are rendered in the process of converting a legacy app into react.
A list of absolute paths to such "root" components can be generated by grep or similar tools and stored into a file.
Then you can prepend your exising webpack rules with one that will check if a module is your "root" component and should be hot-exported.
// webpack.dev.config
const path = require('path');
const files = fs
.readFileSync('./renderReactRoots.txt', 'utf8')
.split('\n')
.map(p => path.resolve(p);
module.exports = {
...
module: {
rules: [
// Hot Export React Root Components
{
test: /*.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
babelrc: true,
plugins: [
['hot-export', { files }]
],
},
},
},
... // all your standard rules
],
}
...
};