Hot Module Replacement only works on CSS, not .tsx

[klunderjeff-printabout]

Hi all,

Playing around with a existing React/Typescript application which also uses Rspack. I want to make use of HMR (Hot Module Replacement) to have a better development flow. After editing css files, on saving the file, the changes directly are shown in the browser; no page reload, just a reload of the component. Weird thing is that when editing a tsx file, no component reload occurs. Changes made to the tsx component only show up after manually clicking on Ctrl+R so to speak.

I would like the tsx changes also cause a component (not a whole page) reload for a improved development flow.

Currently I have @rspack/plugin-react-refresh as dev dependency and i think I have all configurations in place (hence the correct working of css edits). Not entirely sure it's a Rspack issue, but before we used Rspack, it worked fine for both css and tsx files.

Anyone got any ideas?

[LingyuCoder]

Need a repro. You can try to follow this guide and check:

• need to set process.env.NODE_ENV to developement and make sure that you import the react.development.js
• need to enable both jsc.transform.react.refresh and jsc.transform.react.development
• need to add @rspack/plugin-react-refresh to your plugins

[github-actions]

Hello @klunderjeff-printabout, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

[klunderjeff-printabout]

Need a repro. You can try to follow this guide and check:

• need to set process.env.NODE_ENV to developement and make sure that you import the react.development.js
• need to enable both jsc.transform.react.refresh and jsc.transform.react.development
• need to add @rspack/plugin-react-refresh to your plugins

Thanks for the reply @LingyuCoder.
To answer the bulletpoints: I checked to see what the current env is so to speak: it is set to development.
I did already added @rspack/plugin-react-refresh.

Not sure what these react.development.js, jsc.transform.react.refresh and jsc.transform.react.development are; will investigate on this.

[klunderjeff-printabout]

Hello @klunderjeff-printabout, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

Hi there,

Not sure if I can provide a repro demo, due to my application is not my private one so to speak. But will try and create a (simple) repro demo and if succeeded will add it here.

[codagonist]

Alright guys, sorry for the delayed response, but I got a test repo available here.

The only thing I added was a TestComponent.js and -.css file. To reproduce my issue (or I think what is an issue):

• run pnpm run dev:rspack
• open the localhost url the terminal returns
• edit and save TestComponent.css: the changes are immediately shown without complete page reload
• edit and save TestComponent.js: the changes are immediately shown, but with the page completely reloading

What i would expect is that after editing and saving the js file, the page shouldn't reload completely. Only the component itself should reload. I deliberately didn't make changes to the package.json or config(s); imo HMR looks to work out of the box, at least for the css part. Could be mistaken here tho..

Only difference with my 'real' application is that the files are of types *.tsx and *.module.css, but the same workings apply here, so I don't think that's an issue..

(I was on my work account before, so that's why you see a different username.. still me (= )

[github-actions]

Since the issue was labeled with need reproduction, but no response in 14 days. This issue will be closed. Feel free to comment and reopen it if you have any further questions.