0
# Build Integration
1

2
React Hot Loader provides build-time integration tools including Babel plugin and Webpack loader for automatic component registration and hot reload setup. These tools eliminate the need for manual component registration and provide seamless hot reload experience.
3

4
## Capabilities
5

6
### Babel Plugin Integration
7

8
Babel plugin that automatically registers React components for hot reloading during the build process.
9

10
```javascript { .api }
11
// .babelrc configuration
12
{
13
  "plugins": ["react-hot-loader/babel"]
14
}
15

16
// babel.config.js configuration
17
module.exports = {
18
  plugins: [
19
    "react-hot-loader/babel"
20
  ]
21
};
22

23
// Webpack babel-loader configuration
24
{
25
  test: /\.(js|jsx)$/,
26
  use: {
27
    loader: 'babel-loader',
28
    options: {
29
      plugins: ['react-hot-loader/babel']
30
    }
31
  }
32
}
33
```
34

35
**Usage Examples:**
36

37
```javascript
38
// .babelrc - Basic setup
39
{
40
  "presets": ["@babel/preset-react"],
41
  "plugins": ["react-hot-loader/babel"]
42
}
43
```
44

45
```javascript
46
// babel.config.js - Advanced setup
47
module.exports = {
48
  presets: [
49
    ['@babel/preset-env', { targets: { node: 'current' } }],
50
    '@babel/preset-react'
51
  ],
52
  plugins: [
53
    'react-hot-loader/babel',
54
    '@babel/plugin-proposal-class-properties'
55
  ],
56
  env: {
57
    development: {
58
      plugins: ['react-hot-loader/babel']
59
    },
60
    production: {
61
      // Exclude hot loader in production
62
      plugins: []
63
    }
64
  }
65
};
66
```
67

68
```javascript
69
// Webpack configuration with Babel
70
module.exports = {
71
  module: {
72
    rules: [
73
      {
74
        test: /\.(js|jsx)$/,
75
        exclude: /node_modules/,
76
        use: {
77
          loader: 'babel-loader',
78
          options: {
79
            presets: ['@babel/preset-react'],
80
            plugins: ['react-hot-loader/babel']
81
          }
82
        }
83
      }
84
    ]
85
  }
86
};
87
```
88

89
### Webpack Loader Integration
90

91
Webpack loader that provides hot reload functionality without requiring Babel.
92

93
```javascript { .api }
94
// Webpack configuration
95
{
96
  test: /\.(js|jsx)$/,
97
  use: ['react-hot-loader/webpack']
98
}
99

100
// Combined with other loaders
101
{
102
  test: /\.(js|jsx)$/,
103
  use: [
104
    'react-hot-loader/webpack',
105
    'babel-loader'
106
  ]
107
}
108
```
109

110
**Usage Examples:**
111

112
```javascript
113
// webpack.config.js - Basic webpack loader setup
114
module.exports = {
115
  entry: './src/index.js',
116
  module: {
117
    rules: [
118
      {
119
        test: /\.jsx?$/,
120
        exclude: /node_modules/,
121
        use: ['react-hot-loader/webpack']
122
      }
123
    ]
124
  },
125
  // ... other config
126
};
127
```
128

129
```javascript
130
// webpack.config.js - Combined with Babel loader
131
module.exports = {
132
  module: {
133
    rules: [
134
      {
135
        test: /\.jsx?$/,
136
        exclude: /node_modules/,
137
        use: [
138
          'react-hot-loader/webpack', // Hot loader first
139
          {
140
            loader: 'babel-loader',
141
            options: {
142
              presets: ['@babel/preset-react']
143
              // Note: Don't include react-hot-loader/babel plugin here
144
            }
145
          }
146
        ]
147
      }
148
    ]
149
  }
150
};
151
```
152

153
```javascript
154
// webpack.config.js - Development only
155
module.exports = (env, argv) => ({
156
  module: {
157
    rules: [
158
      {
159
        test: /\.jsx?$/,
160
        exclude: /node_modules/,
161
        use: [
162
          // Only add hot loader in development
163
          ...(argv.mode === 'development' ? ['react-hot-loader/webpack'] : []),
164
          'babel-loader'
165
        ]
166
      }
167
    ]
168
  }
169
});
170
```
171

172
### Patch Integration
173

174
Runtime patching utility for React methods to enable hot reloading.
175

176
```javascript { .api }
177
// Import at application entry point
178
import 'react-hot-loader/patch';
179

180
// Or require in CommonJS
181
require('react-hot-loader/patch');
182
```
183

184
**Usage Examples:**
185

186
```javascript
187
// src/index.js - Application entry point
188
import 'react-hot-loader/patch'; // Must be first import
189
import React from 'react';
190
import ReactDOM from 'react-dom';
191
import App from './App';
192

193
ReactDOM.render(<App />, document.getElementById('root'));
194
```
195

196
```javascript
197
// webpack.config.js - Entry point array
198
module.exports = {
199
  entry: [
200
    'react-hot-loader/patch',
201
    './src/index.js'
202
  ],
203
  // ... other config
204
};
205
```
206

207
```javascript
208
// Next.js integration
209
// pages/_app.js
210
import 'react-hot-loader/patch';
211
import { hot } from 'react-hot-loader/root';
212

213
function MyApp({ Component, pageProps }) {
214
  return <Component {...pageProps} />;
215
}
216

217
export default process.env.NODE_ENV === 'development' 
218
  ? hot(MyApp) 
219
  : MyApp;
220
```
221

222
## Build Tool Specific Integrations
223

224
### Create React App Integration
225

226
```javascript
227
// Using react-app-rewired and customize-cra
228
// config-overrides.js
229
const { addBabelPlugin, override } = require('customize-cra');
230

231
module.exports = override(
232
  addBabelPlugin('react-hot-loader/babel')
233
);
234
```
235

236
```javascript
237
// Using craco
238
// craco.config.js
239
module.exports = {
240
  babel: {
241
    plugins: ['react-hot-loader/babel']
242
  }
243
};
244
```
245

246
### Next.js Integration
247

248
```javascript
249
// next.config.js
250
module.exports = {
251
  webpack: (config, { dev }) => {
252
    if (dev) {
253
      config.module.rules.push({
254
        test: /\.(jsx|js)$/,
255
        include: [path.resolve(__dirname, 'pages')],
256
        use: ['react-hot-loader/webpack']
257
      });
258
    }
259
    return config;
260
  }
261
};
262
```
263

264
```javascript
265
// .babelrc for Next.js
266
{
267
  "presets": ["next/babel"],
268
  "plugins": ["react-hot-loader/babel"]
269
}
270
```
271

272
### Vite Integration
273

274
```javascript
275
// vite.config.js
276
import { defineConfig } from 'vite';
277
import react from '@vitejs/plugin-react';
278

279
export default defineConfig({
280
  plugins: [
281
    react({
282
      babel: {
283
        plugins: ['react-hot-loader/babel']
284
      }
285
    })
286
  ]
287
});
288
```
289

290
### Parcel Integration
291

292
```javascript
293
// .babelrc for Parcel
294
{
295
  "presets": ["@babel/preset-react"],
296
  "plugins": ["react-hot-loader/babel"]
297
}
298
```
299

300
```javascript
301
// src/index.js with Parcel
302
import 'react-hot-loader/patch';
303
import React from 'react';
304
import ReactDOM from 'react-dom';
305
import { hot } from 'react-hot-loader/root';
306
import App from './App';
307

308
const HotApp = hot(App);
309

310
ReactDOM.render(<HotApp />, document.getElementById('root'));
311
```
312

313
## Advanced Configuration
314

315
### Babel Plugin Options
316

317
```javascript
318
// .babelrc with options
319
{
320
  "plugins": [
321
    ["react-hot-loader/babel", {
322
      "safetyNet": true  // Enable safety net (default: true)
323
    }]
324
  ]
325
}
326
```
327

328
### Webpack Loader Options
329

330
```javascript
331
// webpack.config.js with loader options
332
{
333
  test: /\.jsx?$/,
334
  use: {
335
    loader: 'react-hot-loader/webpack',
336
    options: {
337
      withPatch: true,     // Include patch (default: true)
338
      noRegister: false    // Skip registration (default: false)
339
    }
340
  }
341
}
342
```
343

344
### Environment-Specific Configuration
345

346
```javascript
347
// webpack.config.js - Environment specific
348
module.exports = (env, argv) => {
349
  const isDevelopment = argv.mode === 'development';
350
  
351
  return {
352
    module: {
353
      rules: [
354
        {
355
          test: /\.jsx?$/,
356
          exclude: /node_modules/,
357
          use: [
358
            // Only in development
359
            ...(isDevelopment ? ['react-hot-loader/webpack'] : []),
360
            {
361
              loader: 'babel-loader',
362
              options: {
363
                presets: ['@babel/preset-react'],
364
                plugins: [
365
                  // Only in development
366
                  ...(isDevelopment ? ['react-hot-loader/babel'] : [])
367
                ]
368
              }
369
            }
370
          ]
371
        }
372
      ]
373
    }
374
  };
375
};
376
```
377

378
## Troubleshooting Build Integration
379

380
### Common Issues and Solutions
381

382
```javascript
383
// Issue: Hot reloading not working
384
// Solution: Ensure correct order in webpack config
385
{
386
  test: /\.jsx?$/,
387
  use: [
388
    'react-hot-loader/webpack', // Must be first
389
    'babel-loader'
390
  ]
391
}
392

393
// Issue: Babel plugin conflicts
394
// Solution: Use either babel plugin OR webpack loader, not both
395
// ❌ Don't do this:
396
{
397
  loader: 'babel-loader',
398
  options: {
399
    plugins: ['react-hot-loader/babel'] // Don't use if using webpack loader
400
  }
401
}
402

403
// ✅ Do this:
404
{
405
  test: /\.jsx?$/,
406
  use: ['react-hot-loader/webpack'] // Use webpack loader instead
407
}
408
```
409

410
### Debug Configuration
411

412
```javascript
413
// webpack.config.js - Debug hot reload
414
module.exports = {
415
  module: {
416
    rules: [
417
      {
418
        test: /\.jsx?$/,
419
        exclude: /node_modules/,
420
        use: [
421
          {
422
            loader: 'react-hot-loader/webpack',
423
            options: {
424
              withPatch: true,
425
              noRegister: false
426
            }
427
          }
428
        ]
429
      }
430
    ]
431
  },
432
  // Enable detailed webpack output
433
  stats: 'verbose'
434
};
435
```
436

437
### Testing Build Configuration
438

439
```javascript
440
// Test component for verifying hot reload
441
// src/TestComponent.js
442
import React from 'react';
443
import { hot } from 'react-hot-loader/root';
444

445
const TestComponent = () => {
446
  const [count, setCount] = React.useState(0);
447
  
448
  return (
449
    <div>
450
      <h1>Hot Reload Test</h1>
451
      <p>Count: {count}</p>
452
      <button onClick={() => setCount(count + 1)}>
453
        Increment
454
      </button>
455
      <p>Change this text to test hot reload!</p>
456
    </div>
457
  );
458
};
459

460
export default hot(TestComponent);
461
```
462

463
## Performance Optimization
464

465
### Build Performance
466

467
```javascript
468
// webpack.config.js - Optimize for build performance
469
module.exports = {
470
  module: {
471
    rules: [
472
      {
473
        test: /\.jsx?$/,
474
        exclude: /node_modules/,
475
        use: [
476
          {
477
            loader: 'react-hot-loader/webpack',
478
            options: {
479
              // Skip registration in certain cases for better performance
480
              noRegister: process.env.SKIP_HOT_LOADER === 'true'
481
            }
482
          }
483
        ]
484
      }
485
    ]
486
  }
487
};
488
```
489

490
### Production Exclusion
491

492
```javascript
493
// Ensure hot loader is completely excluded from production builds
494
const webpack = require('webpack');
495

496
module.exports = (env, argv) => {
497
  const isProduction = argv.mode === 'production';
498
  
499
  return {
500
    module: {
501
      rules: [
502
        {
503
          test: /\.jsx?$/,
504
          exclude: /node_modules/,
505
          use: [
506
            // Completely exclude in production
507
            ...(!isProduction ? ['react-hot-loader/webpack'] : []),
508
            'babel-loader'
509
          ]
510
        }
511
      ]
512
    },
513
    plugins: [
514
      // Define environment for conditional imports
515
      new webpack.DefinePlugin({
516
        'process.env.NODE_ENV': JSON.stringify(argv.mode)
517
      })
518
    ]
519
  };
520
};
521
```