Remove unsupported overlay property for ReactRefreshWebpackPlugin (#1748)

* Remove unsupported overlay property for ReactRefreshWebpackPlugin

The v0.6.0 release introduced breaking changes which removed `sockPort` as a property https://github.com/pmmmwh/react-refresh-webpack-plugin/releases/tag/v0.6.0. (pr: pmmmwh/react-refresh-webpack-plugin#850). This updates the generator template for development.js to no longer pass the property. This was tested by successfully creating a new rails 8.0.2 project with ReactRefreshWebpackPlugin 0.6.1 and following the tutorial (https://www.shakacode.com/react-on-rails/docs/guides/tutorial/)

* linting

---------

Co-authored-by: Justin Léger <[email protected]>

Author: Judahmeek

docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md

@@ -85,7 +85,7 @@ To enable the HMR functionality, you have to use `./bin/shakapacker-dev-server`
    }
    ```
 
-   We added `overlay.sockPort` option in `ReactRefreshWebpackPlugin` to match the webpack-dev-server port specified in `config/shakapacker.yml`. This makes SockJS works properly and fixes this error in browser console: `GET http://localhost:[port]/sockjs-node/info?t=[xxxxxxxxxx] 404 (Not Found)`.
+   We added `overlay.sockPort` option in `ReactRefreshWebpackPlugin` to match the webpack-dev-server port specified in `config/shakapacker.yml`. This makes SockJS works properly and fixes this error in browser console: `GET http://localhost:[port]/sockjs-node/info?t=[xxxxxxxxxx] 404 (Not Found)`. When using `ReactRefreshWebpackPlugin` with `v0.6.0` and newer, `overlay.sockPort` is [no longer supported](https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/850) and should be omitted from the configurations.
 
 4. Add the react-refresh plugin in `babel.config.js`
 

docs/guides/rails-webpacker-react-integration-options.md

@@ -132,14 +132,7 @@ You can see an example commit of adding this [here](https://github.com/shakacode
 
    //plugins
    if (isWebpackDevServer) {
-     environment.plugins.append(
-       'ReactRefreshWebpackPlugin',
-       new ReactRefreshWebpackPlugin({
-         overlay: {
-           sockPort: 3035,
-         },
-       }),
-     );
+     environment.plugins.append('ReactRefreshWebpackPlugin', new ReactRefreshWebpackPlugin({}));
    }
    ```
 

lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt

@@ -13,11 +13,7 @@ const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
     // eslint-disable-next-line global-require
     const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
     clientWebpackConfig.plugins.push(
-      new ReactRefreshWebpackPlugin({
-        overlay: {
-          sockPort: devServer.port,
-        },
-      }),
+      new ReactRefreshWebpackPlugin({}),
     );
   }
 };

spec/dummy/config/webpack/development.js

@@ -1,6 +1,6 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
-const { devServer, inliningCss } = require('shakapacker');
+const { inliningCss } = require('shakapacker');
 
 const webpackConfig = require('./webpackConfig');
 
@@ -12,13 +12,7 @@ const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
 
     // eslint-disable-next-line global-require
     const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-    clientWebpackConfig.plugins.push(
-      new ReactRefreshWebpackPlugin({
-        overlay: {
-          sockPort: devServer.port,
-        },
-      }),
-    );
+    clientWebpackConfig.plugins.push(new ReactRefreshWebpackPlugin({}));
   }
 };