build(dev): fix webpacker config (#2280)

- rm erb from shakapacker.yml as it appears to not be interpreted when
starting skakapacker dev server

- rm devServer config from webpack/development.js as the whole block take
  precedence over the one in shakapacker.yml

- add watchOptions to ensure  node_modules are ignored

config/shakapacker.yml

@@ -65,9 +65,10 @@ development:
   dev_server:
     # For running dev server with https, set `server: https`.
     # server: https
-
-    host: <%= ENV['SHAPACKER_DEV_SERVER_HOST'] || 'localhost' %>
-    port: <%= ENV['SHAPACKER_DEV_SERVER_PORT'] || 3035 %>
+    ## ERB does not seem to work
+    # host: <%= ENV['SHAPACKER_DEV_SERVER_HOST'] || 'localhost' %>
+    host: localhost
+    port: 3035
     # Hot Module Replacement updates modules while the application is running without a full reload
     # Used instead of the `hot` key in https://webpack.js.org/configuration/dev-server/#devserverhot
     hmr: true
@@ -85,10 +86,10 @@ development:
       # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
       overlay: true
       # May also be a string
-      webSocketURL:
-       hostname: 'localhost'
-       pathname: '/ws'
-       port: 3035
+      webSocketURL: 'ws://localhost:3035/ws'
+        # hostname: 'localhost'
+        # pathname: '/ws'
+        # port: 3035
     # Should we use gzip compression?
     compress: true
     # Note that apps that do not check the host are vulnerable to DNS rebinding attacks

config/webpack/development.js

@@ -4,19 +4,26 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
 const { merge } = require('shakapacker');
 const webpackConfig = require('./base');
 const developmentConfig = {
-  devServer: {
+  /*
+    devServer: {
     port: '3035',
-    host: '0.0.0.0',
+    host: 'localhost',
     compress: true,
     hot: true,
+    allowedHosts: 'all',
     headers: {
       'Access-Control-Allow-Origin': '*',
     }
   },
+  */
   target: 'web',
   plugins: [
     new ReactRefreshWebpackPlugin()
   ],
+  watchOptions: {
+    ignored: /node_modules/, // Ignore node_modules directory
+    poll: 1000, // Optional: Use polling with a delay of 1 second
+  },
   module: {
     rules: [
       {
@@ -37,4 +44,4 @@ const developmentConfig = {
   }
 };
 
-module.exports = merge(webpackConfig, developmentConfig)
+module.exports = merge(webpackConfig, developmentConfig);