ReactRefresh - Addition of Hot Reloading creates preload.js error
- Dominant language
- TypeScript
- Stars
- 7.1k
- Forks
- 641
- Avg merge
- 3d 1h
- Merged PRs (30d)
- 30
Description
### Pre-flight checklist
- [X] I have read the [contribution documentation](https://github.com/electron/forge/blob/main/CONTRIBUTING.md) for this project.
- [X] I agree to follow the [code of conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project uses.
- [X] I have searched the issue tracker for a bug that matches the one I want to file, without success.
### Electron Forge version
6.0.3
### Electron version
21.3.1
### Operating system
macOS 12.4
### Last known working Electron Forge version
_No response_
### Expected behavior
Expected not to have issues after adding React Refresh and to not have the entire window refresh every time. I expected to only have the one component refreshed and not the whole window.
I am trying to understand how to run React Refresh within Electron Forge properly, I searched the existing issues and this is where I got my forge.config.ts file updates from aka setting liveReload to false but I seem to still be getting some errors.
I'd appreciate some guidance to get it to work appropriately. Also before adding React Refresh I did not get the `__dirname is not defined` error or the `Unable to load preload script` error.
### Actual behavior
When I do `yarn run start` I get the below errors in the console:

### Steps to reproduce
package.json
```json
{
"name": "client-desktop-phoenix-edition",
"productName": "client-desktop-phoenix-edition",
"version": "1.0.0",
"description": "My Electron application description",
"main": ".webpack/main",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "eslint --ext .ts,.tsx ."
},
"keywords": [],
"author": {
"name": "",
"email": ""
},
"license": "MIT",
"devDependencies": {
"@electron-forge/cli": "^6.0.3",
"@electron-forge/maker-deb": "^6.0.3",
"@electron-forge/maker-rpm": "^6.0.3",
"@electron-forge/maker-squirrel": "^6.0.3",
"@electron-forge/maker-zip": "^6.0.3",
"@electron-forge/plugin-auto-unpack-natives": "^6.0.3",
"@electron-forge/plugin-electronegativity": "^6.0.3",
"@electron-forge/plugin-local-electron": "^6.0.3",
"@electron-forge/plugin-webpack": "^6.0.3",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"@vercel/webpack-asset-relocator-loader": "1.7.3",
"css-loader": "^6.0.0",
"electron": "21.3.1",
"eslint": "^8.0.1",
"eslint-plugin-import": "^2.25.0",
"fork-ts-checker-webpack-plugin": "^7.2.13",
"node-loader": "^2.0.0",
"react-refresh": "^0.14.0",
"style-loader": "^3.0.0",
"ts-loader": "^9.2.2",
"ts-node": "^10.0.0",
"typescript": "~4.5.4"
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.5"
}
}
```
forge.config.ts
```ts
import type { ForgeConfig } from '@electron-forge/shared-types';
import { MakerSquirrel } from '@electron-forge/maker-squirrel';
import { MakerZIP } from '@electron-forge/maker-zip';
import { MakerDeb } from '@electron-forge/maker-deb';
import { MakerRpm } from '@electron-forge/maker-rpm';
import { WebpackPlugin } from '@electron-forge/plugin-webpack';
import { mainConfig } from './webpack.main.config';
import { rendererConfig } from './webpack.renderer.config';
const config: ForgeConfig = {
packagerConfig: {
asar: true // or an object containing your asar options
},
rebuildConfig: {},
makers: [new MakerSquirrel({}), new MakerZIP({}, ['darwin']), new MakerRpm({}), new MakerDeb({})],
plugins: [
new WebpackPlugin({
devServer: { liveReload: false },
mainConfig,
renderer: {
config: rendererConfig,
entryPoints: [
{
html: './src/index.html',
js: './src/renderer.ts',
name: 'main_window',
preload: {
js: './src/preload.ts',
},
},
],
},
}),
// Electronegativity Plugin
// https://www.electronforge.io/config/plugins/electronegativity
// Check for misconfigurations and security anti-patterns with the Electronegativity tool.
{
name: '@electron-forge/plugin-electronegativity',
config: {
isSarif: true
}
},
// Auto Unpack Native Modules Plugin
// https://www.electronforge.io/config/plugins/auto-unpack-natives
// Reduce loading times and disk consumption by unpacking native Node modules from your Forge app's ASAR archive.
{
name: '@electron-forge/plugin-auto-unpack-natives',
config: {}
},
// Local Electron Plugin
// https://www.electronforge.io/config/plugins/local-electron
// Integrate a local build of Electron into your Forge app.
// This plugin allows you to both run and build your app using a local build of Electron.
// {
// name: '@electron-forge/plugin-local-electron',
// config: {
// electronPath: '/Users/me/projects/electron/out/Testing', // path to Electron binary
// },
// }
],
};
export default config;
```
wepbpack.plugin.ts
```ts
import type IForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import type ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ForkTsCheckerWebpackPlugin: typeof IForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const webpack = require('webpack');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ReactRefreshWebpackPlugin: typeof ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
export const plugins = [
new ForkTsCheckerWebpackPlugin({
logger: 'webpack-infrastructure',
}),
new ReactRefreshWebpackPlugin()
];
```
### Additional information
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.