From d6d59a292684dacf1903f7ff9fbaa1c3f779b884 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Justin=20L=C3=A9ger?= Date: Fri, 27 Jun 2025 01:49:02 -0400 Subject: [PATCH 1/2] 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: https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/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/) --- .../hmr-and-hot-reloading-with-the-webpack-dev-server.md | 2 +- docs/guides/rails-webpacker-react-integration-options.md | 6 +----- .../templates/base/base/config/webpack/development.js.tt | 6 +----- spec/dummy/config/webpack/development.js | 6 +----- 4 files changed, 4 insertions(+), 16 deletions(-) diff --git a/docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md b/docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md index 11a1408ad2..ebf58e2d24 100644 --- a/docs/guides/hmr-and-hot-reloading-with-the-webpack-dev-server.md +++ b/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` diff --git a/docs/guides/rails-webpacker-react-integration-options.md b/docs/guides/rails-webpacker-react-integration-options.md index d524392d0b..b2890a7b75 100644 --- a/docs/guides/rails-webpacker-react-integration-options.md +++ b/docs/guides/rails-webpacker-react-integration-options.md @@ -134,11 +134,7 @@ You can see an example commit of adding this [here](https://github.com/shakacode if (isWebpackDevServer) { environment.plugins.append( 'ReactRefreshWebpackPlugin', - new ReactRefreshWebpackPlugin({ - overlay: { - sockPort: 3035, - }, - }), + new ReactRefreshWebpackPlugin({}), ); } ``` diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt index d2c1ae4692..958a314d85 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js.tt +++ b/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({}), ); } }; diff --git a/spec/dummy/config/webpack/development.js b/spec/dummy/config/webpack/development.js index 93f5d56da4..f0780c8eea 100644 --- a/spec/dummy/config/webpack/development.js +++ b/spec/dummy/config/webpack/development.js @@ -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({}), ); } }; From 9c838ee6ed4799b76257123d802cdd7ea789e39e Mon Sep 17 00:00:00 2001 From: Judah Meek Date: Mon, 14 Jul 2025 14:23:54 -0500 Subject: [PATCH 2/2] linting --- docs/guides/rails-webpacker-react-integration-options.md | 5 +---- spec/dummy/config/webpack/development.js | 6 ++---- spec/dummy/tests/react-on-rails.import.test.js | 4 +++- spec/dummy/tests/react-on-rails.require.test.js | 4 +++- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/docs/guides/rails-webpacker-react-integration-options.md b/docs/guides/rails-webpacker-react-integration-options.md index b2890a7b75..ff9d92c050 100644 --- a/docs/guides/rails-webpacker-react-integration-options.md +++ b/docs/guides/rails-webpacker-react-integration-options.md @@ -132,10 +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({}), - ); + environment.plugins.append('ReactRefreshWebpackPlugin', new ReactRefreshWebpackPlugin({})); } ``` diff --git a/spec/dummy/config/webpack/development.js b/spec/dummy/config/webpack/development.js index f0780c8eea..a7c90e5f80 100644 --- a/spec/dummy/config/webpack/development.js +++ b/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,9 +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({}), - ); + clientWebpackConfig.plugins.push(new ReactRefreshWebpackPlugin({})); } }; diff --git a/spec/dummy/tests/react-on-rails.import.test.js b/spec/dummy/tests/react-on-rails.import.test.js index c13ef69b82..e2af3df943 100644 --- a/spec/dummy/tests/react-on-rails.import.test.js +++ b/spec/dummy/tests/react-on-rails.import.test.js @@ -1,5 +1,7 @@ import ReactOnRails from 'react-on-rails'; test('ReactOnRails', () => { - ReactOnRails.register({}); + expect(() => { + ReactOnRails.register({}); + }).not.toThrow(); }); diff --git a/spec/dummy/tests/react-on-rails.require.test.js b/spec/dummy/tests/react-on-rails.require.test.js index acac258e96..7d96d5a996 100644 --- a/spec/dummy/tests/react-on-rails.require.test.js +++ b/spec/dummy/tests/react-on-rails.require.test.js @@ -1,5 +1,7 @@ const ReactOnRails = require('react-on-rails').default; test('ReactOnRails', () => { - ReactOnRails.register({}); + expect(() => { + ReactOnRails.register({}); + }).not.toThrow(); });