slow fractal
Hi,
I am trying to setup the react-refresh plugin with electron
https://github.com/pmmmwh/react-refresh-webpack-plugin
but I cannot seem to get it to work no matter what I try.
I have tried following steps in the github repo and additionally this comment on a github thread:
https://github.com/electron/forge/issues/2560#issuecomment-1200510303
What I find is that after initailly running my electron app, if I change some text and save file, the window hot reload fails with this message:
slow fractal
@upbeat island I started a new help topic for this specific issue since I felt like you answered the topic question of my other post. Please help on here too if you have any experience though 😅
upbeat island
<@494518887165984790> I started a new help topic for this specific issue since I...
Yes I've seen it, but the plugin works for me and I don't use Forge nor TS so I don't think I can't do better than just reading the issues like you. I was really hoping you could get it to work easily :/
I would suggest to try all the solutions on the issue you linked, if you haven't tried everything yet
rigid nova
Not saying you should use it, but this one is recommended by most people and if you're working on an already existing project, I'm sure this could help you out by looking into the configuration of it 😉
upbeat island
I wouldn't recommend to use any template if you want to really know what's the config does. 🥲
What's your current config @slow fractal ?
slow fractal
I believe i used the electron-forge boiler plate to start off:
npm init electron-app@latest my-new-app -- --template=webpack-typescript
https://www.electronforge.io/templates/typescript-+-webpack-template
Then I added React and other plugins etc as needed for my project
upbeat island
okay but can you share your current webpack conf please?
slow fractal
oh, sorry!
webpack.main.config.ts?
upbeat island
hmm, don't you have one for the renderer?
maybe it's this one, I don't know
I just want to see how you set up the config for React
slow fractal
upbeat island
eh, need to see the rules and plugins as well
you can send as code instead of screenshots x)
slow fractal
webpack.rules.ts
import { Parser, type ModuleOptions } from 'webpack';
import * as path from 'path';
export const rules: Required<ModuleOptions>['rules'] = [
// Add support for native node modules
{
// We're specifying native_modules in the test because the asset relocator loader generates a
// "fake" .node file which is really a cjs file.
test: /native_modules[/\\].+\.node$/,
use: 'node-loader',
},
{
test: /[/\\]node_modules[/\\].+\.(m?js|node)$/,
parser: { amd: false },
use: {
loader: '@vercel/webpack-asset-relocator-loader',
options: {
outputAssetBase: 'native_modules',
},
},
},
{
test: /\.tsx?$/,
exclude: /(node_modules|\.webpack)/,
use: {
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"resolve-url-loader",
"sass-loader"
]
},
// When you need to bundle images or other with webpack,
// uncomment the below and add the file extension as needed
// can even add font files such as woff
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
];
.
.
.
.
.
webpack.plugins.ts
import type IForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import { 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');
// const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
export const plugins = [
new ForkTsCheckerWebpackPlugin({
logger: 'webpack-infrastructure',
}),
new ReactRefreshPlugin({})
];
.
.
.
.
webpack.renderer.config.ts
import type { Configuration } from 'webpack';
import { rules } from './webpack.rules';
import { plugins } from './webpack.plugins';
rules.push({
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});
export const rendererConfig: Configuration = {
module: {
rules,
},
plugins,
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
},
};
where is your ts-loader now?
slow fractal
webpack.rules.ts
upbeat island
oh yes sorry, missed it
upbeat island
you have not read the part of the doc related to TS as I told you x)
upbeat island
slow fractal
you mean this right?
slow fractal
let me put this back in - I had tried this also but no luck
upbeat island
I don't think you need fork-ts-checker-webpack-plugin, if it was not with the Forge config I would suggest to try with and without it and see if you really see a difference
slow fractal
its not in the other links i posted above but let me tets again
upbeat island
Well, since the docs say to do it like this, you should do it like this wether it works or not anyway
slow fractal
just getting this error right now, I am looking through my files to try debug it
i dont think this was the issue earlier, i think i got past this
slow fractal
its running now but hot reload still does not work, ~12seconds per reload
upbeat island
something's not normal
if hot reload is working only the part you change should update
slow fractal
its still doing a live reload im sure, let me snip the console
well, its maybe trying to hot reload and giving an error
I added this per the threads i posted way up
now when i load the project it runs, then when i change some text and save it, it gives the following error
upbeat island
okay, what do you currently have in plugin?
slow fractal
i think it actually doesnt give that error if i do one live reload and then try to use hot reload
although the hot reload is still extremely slow
upbeat island
finally ForkTsCheckerWebpackPlugin should not be a problem so you can use it to speed up the thing and set transpileOnly to true on ts-loader
the hot reload should not be slow
slow fractal
webpack.plugin.ts
import type IForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
// import { 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');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const isDevelopment = process.env.NODE_ENV !== 'production';
export const plugins = [
// new ForkTsCheckerWebpackPlugin({
// logger: 'webpack-infrastructure',
// }),
new ReactRefreshWebpackPlugin()
];
it seems like it actually is hot reloading but it just took 26 seconds to change the text
it was actually faster to live reload
lol
somethings very wrong
upbeat island
It's slow all the times or just once?
slow fractal
all time
upbeat island
yeah, I don't know
slow fractal
maybe i can record video to show you
upbeat island
I suppose you can try, but I don't know how I can help you
slow fractal
ill just grab sharex
upbeat island
do you have cache: true somewhere in the conf?
upbeat island
ill just grab sharex
Make sure to disable automatic sharing before starting to record
it's enabled by default
upbeat island
At this point, I think you can keep trying to tweak the config, or use the dumb way
remove 99% of your code, and see if you have the problem with a single file
slow fractal
ill make a new branch and try that
upbeat island
at least you can try to find if the problem is from your app or the webpack config
slow fractal
seems that it must be config, i deleted pretty much everything back down to a barebones project and hot reload got faster but still like ~9seconds
which seems very slow for hot reload
upbeat island
erm
maybe try to create a new Forge project
test the config without any change
you could also try to switch to Vite x)
but I don't think webpack is the problem
just config stuff
slow fractal
going to try the template yifan posted and see the speed
slow fractal
its instant
upbeat island
the problem is in your conf, you figured that
