From fbc4f07fb1f6daa3f9bc16c76e45b8416c364686 Mon Sep 17 00:00:00 2001
From: Hoang Le <38028938+hoangle4@users.noreply.github.com>
Date: Wed, 23 Feb 2022 18:42:34 -0800
Subject: [PATCH] Add watchOptions to Config

I was looking around and there isn't a way to add watchOptions to webpack configs. Without watchOptions, react-scripts can't see changes update from a remote PC or when dev is running inside a vm.

Purpose ENVs.
```
WDS_POLLING=true
WDS_AGGREGATE_TIMEOUT=200
WDS_POLLING_INTERVAL=1000
WSD_WATCH_IGNORE=**/node_modules
```
---
 .../react-scripts/config/webpack.config.js    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 2b1b3bbd47d..75b48989758 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -95,6 +95,24 @@ const hasJsxRuntime = (() => {
   }
 })();
 
+//  Polling for remote dev environment vagrant, etc.
+const isPolling = process.env.WDS_POLLING || false
+
+//  Create watchOptions Object
+const createWatchOptions = (isEnvDevelopment) => {
+  
+  //  Return configs on develoment and set WDS_POLLING to true
+  if(isEnvDevelopment && isPolling) {
+    return {
+      aggregateTimeout: parseInt(process.env.WDS_AGGREGATE_TIMEOUT) || 300,
+      poll: parseInt(process.env.WDS_POLLING_INTERVAL) || 500,
+      ignored: process.env.WSD_WATCH_IGNORE || '**/node_modules',
+    };
+  }
+
+  return {};
+};
+
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 module.exports = function (webpackEnv) {
@@ -790,5 +808,6 @@ module.exports = function (webpackEnv) {
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,
+    watchOptions: createWatchOptions(isEnvDevelopment),
   };
 };