diff --git a/app/javascript/application.js b/app/javascript/application.js
index 4a435c29..2a62ea78 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -17,6 +17,7 @@
 require.context('./assets', true)
 require.context('./images', true)
 
+import "./webpack-dev-server-fix.js"
 import "jquery-ui/ui/widgets/draggable";
 import "jquery-ui/ui/widgets/sortable";
 import 'bootstrap';
diff --git a/app/javascript/webpack-dev-server-fix.js b/app/javascript/webpack-dev-server-fix.js
new file mode 100644
index 00000000..8892384a
--- /dev/null
+++ b/app/javascript/webpack-dev-server-fix.js
@@ -0,0 +1,4 @@
+// This fixes a "$RefreshReg$ is not defined" error that comes up when running the webpack dev server.
+// See: https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176
+window.$RefreshReg$ = () => { };
+window.$RefreshSig$ = () => () => { };