Merge branch 'leipert-fix-incremental-compiling' into 'master'

Fix incremental webpack mode without live_reload

See merge request gitlab-org/gitlab!81798

.gitpod.yml

@@ -20,6 +20,8 @@ tasks:
         gdk config set gitlab.rails.port 443
         gdk config set gitlab.rails.https.enabled true
         gdk config set webpack.host 127.0.0.1
+        gdk config set webpack.static false
+        gdk config set webpack.live_reload false
         # make documentation builds available
         gdk config set gitlab_docs.enabled true
         # reconfigure GDK
@@ -49,6 +51,8 @@ tasks:
         gdk config set gitlab.rails.port 443
         gdk config set gitlab.rails.https.enabled true
         gdk config set webpack.host 127.0.0.1
+        gdk config set webpack.static false
+        gdk config set webpack.live_reload false
         # reconfigure GDK
         echo "$(date) – Reconfiguring GDK" | tee -a /workspace/startup.log
         gdk reconfigure

app/assets/javascripts/webpack_non_compiled_placeholder.js

+/* globals LIVE_RELOAD */
 const div = document.createElement('div');
 
 Object.assign(div.style, {
@@ -15,6 +16,10 @@ Object.assign(div.style, {
   'text-align': 'center',
 });
 
+const reloadMessage = LIVE_RELOAD
+  ? 'You have live_reload enabled, the page will reload automatically when complete.'
+  : 'You have live_reload disabled, the page will reload automatically in a few seconds.';
+
 div.innerHTML = `
 <!-- https://github.com/webpack/media/blob/master/logo/icon-square-big.svg -->
 <svg height="50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
@@ -30,9 +35,15 @@ div.innerHTML = `
   Learn more <a href="https://gitlab.com/gitlab-org/gitlab-development-kit/-/blob/main/doc/configuration.md#webpack-settings">here</a>.
 </p>
 <p>
-  If you have live_reload enabled, the page will reload automatically when complete.<br />
-  Otherwise, please <a href="">reload the page manually in a few seconds</a>
+  ${reloadMessage}<br />
+  If it doesn't, please <a href="">reload the page manually</a>.
 </p>
 `;
 
 document.body.append(div);
+
+if (!LIVE_RELOAD) {
+  setTimeout(() => {
+    window.location.reload();
+  }, 5000);
+}

config/helpers/incremental_webpack_compiler/compiler.js

@@ -102,7 +102,7 @@ class IncrementalWebpackCompiler {
 
         setTimeout(() => {
           devServer.invalidate(() => {
-            if (devServer.sockets) {
+            if (Array.isArray(devServer.webSocketServer && devServer.webSocketServer.clients)) {
               devServer.sendMessage(devServer.webSocketServer.clients, 'static-changed');
             }
           });

config/webpack.config.js

@@ -677,6 +677,7 @@ module.exports = {
       IS_JH: IS_JH ? 'window.gon && window.gon.jh' : JSON.stringify(false),
       // This is used by Sourcegraph because these assets are loaded dnamically
       'process.env.SOURCEGRAPH_PUBLIC_PATH': JSON.stringify(SOURCEGRAPH_PUBLIC_PATH),
+      ...(IS_PRODUCTION ? {} : { LIVE_RELOAD: DEV_SERVER_LIVERELOAD }),
     }),
 
     /* Pikaday has a optional dependency to moment.