From 0af6906343ef4948e5c846bb8d9125fa850d3813 Mon Sep 17 00:00:00 2001
From: Michael Mok <pmmmwh@gmail.com>
Date: Mon, 7 Feb 2022 00:46:10 +0100
Subject: [PATCH] fix: handle WDS auto port values

Fixes #552
---
 lib/utils/getAdditionalEntries.js      |  2 +-
 test/unit/getAdditionalEntries.test.js | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/lib/utils/getAdditionalEntries.js b/lib/utils/getAdditionalEntries.js
index fa7df2e9..e6616152 100644
--- a/lib/utils/getAdditionalEntries.js
+++ b/lib/utils/getAdditionalEntries.js
@@ -45,7 +45,7 @@ function getAdditionalEntries({ devServer, options }) {
         path = parsedUrl.pathname;
       }
       if (parsedUrl.port != null) {
-        port = String(parsedUrl.port) !== '0' ? parsedUrl.port : undefined;
+        port = !['0', 'auto'].includes(String(parsedUrl.port)) ? parsedUrl.port : undefined;
       }
       if (parsedUrl.protocol != null) {
         protocol = parsedUrl.protocol !== 'auto' ? parsedUrl.protocol.replace(':', '') : 'ws';
diff --git a/test/unit/getAdditionalEntries.test.js b/test/unit/getAdditionalEntries.test.js
index 2f43155b..41d688cb 100644
--- a/test/unit/getAdditionalEntries.test.js
+++ b/test/unit/getAdditionalEntries.test.js
@@ -196,6 +196,24 @@ describe('getAdditionalEntries', () => {
       prependEntries: [ReactRefreshEntry],
       overlayEntries: [`${ErrorOverlayEntry}?sockHost=0.0.0.0&sockPath=/socket&sockProtocol=ws`],
     });
+    expect(
+      getAdditionalEntries({
+        options: DEFAULT_OPTIONS,
+        devServer: {
+          client: {
+            webSocketURL: {
+              hostname: '0.0.0.0',
+              pathname: '/socket',
+              protocol: 'auto',
+              port: 'auto',
+            },
+          },
+        },
+      })
+    ).toStrictEqual({
+      prependEntries: [ReactRefreshEntry],
+      overlayEntries: [`${ErrorOverlayEntry}?sockHost=0.0.0.0&sockPath=/socket&sockProtocol=ws`],
+    });
   });
 
   it('should handle devServer client.webSocketURL missing values', () => {