Slow webpack watch execution and webapp not getting updated with the new bundles

Not sure if anything can be done here... please check https://stackoverflow.com/questions/36826405/webpack-dev-middleware-react-hot-reload-too-slow and https://stackoverflow.com/questions/43129647/intellij-idea-spring-boot-hot-reload-on-manual-save for some tips. The https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000378264-Make-IntelliJ-automatically-detect-changes-produced-by-webpack thread is irrelevant here, as this is not the IDE but the dev server that doesn't see the changes

Thank you very much for your response Elena.

I saw both URLs but the first one is about the webpack config file and I can guarantee that the webpack config is ok because before using IntelliJ IDEA Ultimate I used Netbeans for a long time and the webpack watch command worked without any problems. The second one explains how to implement spring boot hot reload with the devtools dependency and that is also working ok.

My problem is indeed only with the bundles produced by webpack that are not being picked up and served after receiving the request from the webapp for them. I will continue to search for a solution.

I once again thank you very much for your help.

Could you elaborate on your setup? What server is the app hosted on, what do your configurations look like?

I'm running the app locally ("by default, the built-in Apache Tomcat server") - Spring Boot application with React.

I have the spring-boot-devtools dependency in pom.xml in order for the hot reload to work and it is working fine.

The npm run configurations are:

"scripts": {
     "watch": "webpack --config webpack.config.js",
     "build": "webpack --config webpack.prod.js"
},

The webpack.config.js contains the watch: true property as displayed below.

module.exports = [
     {
          mode: 'development',
          watch: true,
          devtool: "eval-source-map",

I'm running the npm watch configuration and webpack is watching the files as it is shown in the output of the Services tab.

I installed the live edit plugin (https://plugins.jetbrains.com/plugin/7007-live-edit) and it looked like it was working during some changes.

But after some time the same behavior was present, changes are made in the React files, webpack runs and produces bundle, but the current bundle is not served to the browser (and the changes made don't appear in the page).

If you can tell me what can I do to overcome this issue I would appreciate very much as this is a fundamental feature to the development process.

Thank you in advance.

>When running webpack watch command in IntelliJ the changes are noted, and bundles are produced at each save action (CTRL+S) but with a delay of +/- 5 seconds. Then when I hit CTRL+F5 in the browser the changes are not reflected for a long time. After I go back to the IDE and go back to the browser a few times the changes appear.

We would like to better understand what exactly is not working with the update setup, so could you please clarify what exact changes are updated but slowly? Where the changed file is located in project? Do you see the corresponding output updated right after you change the file and where this ouptut is copied to? How long does it take for the browser to detect the change? What browser do you use? Are there any errors/warnings in browser console?

Please also check if File | Save and File | Reload All from Disk actions help.

Thank you for your reply Andrey.

When I run “webpack watch” the changes I make in the react-side files are detected, and at each save action (CTRL+S) webpack compiles all the files and produces a new .js bundle at /src/main/resources/static/scripts.

I noticed that these webpack compile actions are only executed after at least 5-12 seconds from the moment I execute the save action, i.e. I save the changes, and after an irregular time interval of 5 up to 12 seconds the new bundle .js is produced, and I confirm that the file in the /src/main/resources/static/scripts is updated. In order to compare the situation I can say that before I get the IntelliJ IDEA Ultimate I used Netbeans for a long time, and when I saved any of the files in there after 1-3 seconds the new bundle was already produced and the changes in the browser were present after 1 refresh (CTRL+F5).

I cannot be precise regarding the time for the browser to detect the change because many changes don’t appear at all, or take minutes to appear after many CTRL+F5 hits. The behavior is not consistent at all.

I tested on Firefox Developer Edition (v96.0b7 (64-bit)) and Google Chrome (Version 96.0.4664.110 (Official Build) (64-bit)), and the behavior is the same for both browsers.

The console contains warnings but regarding the React code in specific (like future updates to make for the future versions), nothing like failed HTTP requests to get the bundle.

I tried the approach with File | Save and File | Reload All from Disk but the behavior stayed the same.

I found this issue https://youtrack.jetbrains.com/issue/IDEA-168617.

I think it is the same problem I have. Webpack makes the changes but the application server doesn't pick up the updated bundle.

Thank you for elaborating. So, do I understand correctly that the changes in the browser do appear but after you switch from the IDE frame and back without the restarting the server? Or you always have to restart the application server for the changes to be updated?

Do you use JavaScript Dbug Run Configuration? When issue happens, does it help to clear the browser cache (say for the last hour)?

Could you please also attach screenshot of the Run Configuration you launch? Also please atatch IDE logs zipped I will check them just in case there are any potential problems. Thank you. 

For uploading you can use https://uploads.jetbrains.com or any file sharing service.

Thank you for your reply Andrey.

Yes, I confirm that the changes only appear when I switch from the IDE frame and back without restarting the server, i.e. following these steps:

1: edit the code and save;
2: go to browser;
3: go back to IDE (at the right bottom it is displayed the loading bar representing the IDE executing the indexing action);
4: go back to browser and execute CTRL+F5 - the update can now be seen.

I'm not using JavaScript Dbug Run Configuration and I have the HTTP cache disabled (toolbox open) - I am using Firefox Developer Edition.

I already uploaded the files - upload id: 2022_01_03_NJGkM5cELNTqN2hi

Thank you for your help.

>I cannot be precise regarding the time for the browser to detect the change because many changes don’t appear at all, or take minutes to appear after many CTRL+F5 hits. The behavior is not consistent at all.

Could you please advise - do these changes appear in the project build output directory after the webpack update? You've mentioned that these changes appear in the source directory: 

>When I run “webpack watch” the changes I make in the react-side files are detected, and at each save action (CTRL+S) webpack compiles all the files and produces a new .js bundle at /src/main/resources/static/scripts.

But when running application, IDE uses build output directory of the application for the classpath including the resources.

If updated files appear there but not in browser, it means that there is some issue with updating these static files in browser session rather than in Spring Boot application.

Thanks.

Thanks for your reply Andrey.

I cannot be precise regarding the time for the browser to detect the change because many changes don’t appear at all, or take minutes to appear after many CTRL+F5 hits. The behavior is not consistent at all.

When I wrote this I was saving the code, and going directly to the browser (not returning to the IDE, so not inducing the indexing action). Therefore the changes were not appearing at all.

I said this before I note that the frame deactivation did the trick of indexing the files and updating the .js bundle that is served to the frontend.

I made some tests and noted that the the .js bundle is updated in app/src/main/resources/static/scripts after webpack runs, but in app/target/classes/static/scripts (build output directory) the .js bundle does not update until the indexing action takes place and the changes are only visible in the browser after the .js bundle gets updated in this build output directory.

So the .js bundle in the build output directory only gets updated after the indexing action (induced by the frame deactivation).

Is there some way of updating this .js bundle in the build output directory (app/target/classes/static/scripts) immediately after save action takes place?

Expected scenario:

1. Save the code;
2. Webpack runs and updates the .js bundle in app/src/main/resources/static/scripts/bundle.js;
3. Expected - IDE notes the file update and updates .js bundle in the app/target/classes/static/scripts/bundle.js (build output directory) immediately (no frame deactivation needed) - I believe that is a copy from app/src/main/resources/static/scripts/bundle.js to app/target/classes/static/scripts/bundle.js;
4. Changes are visible after 1 refresh action in the browser.

Thank you for elaborating.

>So the .js bundle in the build output directory only gets updated after the indexing action (induced by the frame deactivation).

This is expected behaviour and this is what the On frame deactivation option actually does - it updates sources(and/or) resources when you switch the frames. This way IDE knows for sure that it needs to synchronize the files - it then checks if files have ben changed and updates them in the build output directory. Other than that it should be possible to call the actions like Build | Build Project or File | Save All and File |  Reload All from Disk manually that would force the project build and copying of the changed resources into build output directory.

Thanks for your reply Andrey.

I understand that this is the expected behavior for "On frame deactivation" setting, but as I was using other IDE I know this is possible to do automatically, without having to induce frame deactivation. As soon as the bundle gets updated, update the bundle in the build output directory too in order for it to get served to the frontend.

Are there any options of setting IntelliJ to do this automatically and without having to induce the frame deactivation (switching between IDE and browser)?

There are mentioned Build and Save/Synchronize actions that one could call manually. For example you can try to assign the Ctrl(Cmd)+S shortcut for them. Other that that there is no automatic update for this currently. The mentioned https://youtrack.jetbrains.com/issue/IDEA-168617 issue if about solving this problem. Try also to enable Settings (Preferences on macOS) | Appearance & Behavior | System Settings | Save files if the IDE is idle for option and set smaller interval for it.

Thank you for all the support and the suggestions Andrey.

It would be great if this issue could be solved. I'll be checking the issue regularly to stay updated.

Hello, I am facing the exact same situation. Just setup React with Spring Boot. 

And the changes just dont take any effect in the browser but are directly reflected in the output file.

This is very strange behaviour as I would expect this to work

I have attached my project here for you to test. The worst part is, even when I open the same code in VSCode to do the React work outside IntelliJ.

The changes are not reflected immediately. 

This is a massive issue and makes it almost impossible.

Everything about Java seems to work like an outdated relic from 1995. 

Peshotan Pavri answered in the support ticket. It was a Webpack misconfiguration: it put the out files in the resources directory so the project needed to be compiled in order for the updated webpack resources be copied into the compiler output directory where they are served by the browser.