From e20058e15b2888d4919523d4fa7d7d33a9c1e5a8 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 15 Jan 2025 14:49:26 +0200 Subject: [PATCH 1/5] Update Webpack configuration to remove stream-browserify dependency - Set fallback for 'stream' to false in both client and server Webpack configurations. - Cleaned up package.json by removing unnecessary stream-browserify alias. - Update generators to add the fallback statement to webpackConfig.js These changes enhance compatibility and streamline the build process. --- .../templates/base/base/config/webpack/webpackConfig.js.tt | 3 +++ spec/dummy/config/webpack/alias.js | 1 - spec/dummy/config/webpack/webpackConfig.js | 4 +++- spec/dummy/package.json | 2 +- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt b/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt index 8c1a94004..a912d603e 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt @@ -6,6 +6,9 @@ const serverWebpackConfig = require('./serverWebpackConfig'); const webpackConfig = (envSpecific) => { const clientConfig = clientWebpackConfig(); const serverConfig = serverWebpackConfig(); + clientConfig.resolve.fallback = { stream: false }; + // Remove the next line if you used "node" target in serverWebpackConfig.js + serverConfig.resolve.fallback = { stream: false }; if (envSpecific) { envSpecific(clientConfig, serverConfig); diff --git a/spec/dummy/config/webpack/alias.js b/spec/dummy/config/webpack/alias.js index 3dd27b046..5645c184a 100644 --- a/spec/dummy/config/webpack/alias.js +++ b/spec/dummy/config/webpack/alias.js @@ -4,7 +4,6 @@ module.exports = { resolve: { alias: { Assets: resolve(__dirname, '..', '..', 'client', 'app', 'assets'), - stream: 'stream-browserify', }, }, }; diff --git a/spec/dummy/config/webpack/webpackConfig.js b/spec/dummy/config/webpack/webpackConfig.js index 3f99331fe..668f951dd 100644 --- a/spec/dummy/config/webpack/webpackConfig.js +++ b/spec/dummy/config/webpack/webpackConfig.js @@ -4,7 +4,9 @@ const serverWebpackConfig = require('./serverWebpackConfig'); const webpackConfig = (envSpecific) => { const clientConfig = clientWebpackConfig(); const serverConfig = serverWebpackConfig(); - clientConfig.resolve.fallback = { stream: require.resolve('stream-browserify') }; + clientConfig.resolve.fallback = { stream: false }; + // Remove the next line if you used "node" target in serverWebpackConfig.js + serverConfig.resolve.fallback = { stream: false }; if (envSpecific) { envSpecific(clientConfig, serverConfig); diff --git a/spec/dummy/package.json b/spec/dummy/package.json index 44a437380..42515922d 100644 --- a/spec/dummy/package.json +++ b/spec/dummy/package.json @@ -77,7 +77,7 @@ "format": "cd ../.. && yarn start format", "test": "yarn run build:test && yarn run lint && rspec", "build:test": "rm -rf public/webpack/test && yarn build:rescript && RAILS_ENV=test NODE_ENV=test bin/shakapacker", - "build:dev": "rm -rf public/webpack/development && yarn build:rescript && RAILS_ENV=development NODE_ENV=development bin/shakapacker --watch", + "build:dev": "rm -rf public/webpack/development && yarn build:rescript && RAILS_ENV=development NODE_ENV=development bin/shakapacker", "build:dev:server": "rm -rf public/webpack/development && yarn build:rescript && RAILS_ENV=development NODE_ENV=development bin/shakapacker --watch", "build:dev:watch": "rescript build -w && RAILS_ENV=development NODE_ENV=development bin/shakapacker --watch", "build:clean": "yarn build:rescript && rm -rf public/webpack || true", From 2d8c409fb208a5a59d335c0716e644dcc8095446 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 15 Jan 2025 15:03:57 +0200 Subject: [PATCH 2/5] Update CHANGELOG.md to document Webpack configuration fix --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 184bcebd6..8e7e70796 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,9 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac ### [Unreleased] Changes since the last non-beta release. +#### Fixed +- Updated webpack configuration template to set `stream: false` in fallback configuration for both client and server webpack configs. [PR 1676](https://github.com/shakacode/react_on_rails/pull/1676) by [abanoubghadban](https://github.com/abanoubghadban). + ### [14.1.0] - 2025-01-06 #### Fixed @@ -864,7 +867,7 @@ No changes. - See [shakacode/react-webpack-rails-tutorial #287](https://github.com/shakacode/react-webpack-rails-tutorial/pull/287/files) for an upgrade example. The PR has a few comments on the upgrade. Here is the addition to the generated config file: -```ruby +``` # This configures the script to run to build the production assets by webpack. Set this to nil # if you don't want react_on_rails building this file for you. config.build_production_command = "npm run build:production" From 0e16e0b8d054affa1e7fee28d76200d99947e130 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 15 Jan 2025 15:42:01 +0200 Subject: [PATCH 3/5] revert a change made by mistake --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e7e70796..c560b4d30 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -867,7 +867,7 @@ No changes. - See [shakacode/react-webpack-rails-tutorial #287](https://github.com/shakacode/react-webpack-rails-tutorial/pull/287/files) for an upgrade example. The PR has a few comments on the upgrade. Here is the addition to the generated config file: -``` +```ruby # This configures the script to run to build the production assets by webpack. Set this to nil # if you don't want react_on_rails building this file for you. config.build_production_command = "npm run build:production" From e8aeb57f977221cdb7d77c74e408e505433a997d Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 15 Jan 2025 15:49:48 +0200 Subject: [PATCH 4/5] add comment that explains when stream-browserify is needed --- .../base/base/config/webpack/webpackConfig.js.tt | 10 +++++++++- spec/dummy/config/webpack/webpackConfig.js | 8 +++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt b/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt index a912d603e..e50da9014 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js.tt @@ -6,8 +6,16 @@ const serverWebpackConfig = require('./serverWebpackConfig'); const webpackConfig = (envSpecific) => { const clientConfig = clientWebpackConfig(); const serverConfig = serverWebpackConfig(); + // The stream module is used on the server side for streaming server side rendering. + // It's not needed on the client side, so we can remove it. clientConfig.resolve.fallback = { stream: false }; - // Remove the next line if you used "node" target in serverWebpackConfig.js + // If you are using "node" target in serverWebpackConfig.js, you can remove the fallback configuration below + // since Node.js has built-in stream support. + // + // If you are using "web" target in serverWebpackConfig.js and need server-side rendering streaming using RORP: + // 1. Install the stream-browserify package: npm install stream-browserify + // 2. Replace the line below with: + // serverConfig.resolve.fallback = { stream: require.resolve('stream-browserify') }; serverConfig.resolve.fallback = { stream: false }; if (envSpecific) { diff --git a/spec/dummy/config/webpack/webpackConfig.js b/spec/dummy/config/webpack/webpackConfig.js index 668f951dd..8d069cb3f 100644 --- a/spec/dummy/config/webpack/webpackConfig.js +++ b/spec/dummy/config/webpack/webpackConfig.js @@ -5,7 +5,13 @@ const webpackConfig = (envSpecific) => { const clientConfig = clientWebpackConfig(); const serverConfig = serverWebpackConfig(); clientConfig.resolve.fallback = { stream: false }; - // Remove the next line if you used "node" target in serverWebpackConfig.js + // If you are using "node" target in serverWebpackConfig.js, you can remove the fallback configuration below + // since Node.js has built-in stream support. + // + // If you are using "web" target in serverWebpackConfig.js and need server-side rendering streaming using RORP: + // 1. Install the stream-browserify package: npm install stream-browserify + // 2. Replace the line below with: + // serverConfig.resolve.fallback = { stream: require.resolve('stream-browserify') }; serverConfig.resolve.fallback = { stream: false }; if (envSpecific) { From 2432b864699e938201d136e772e3d78e10a71c96 Mon Sep 17 00:00:00 2001 From: Abanoub Ghadban Date: Wed, 15 Jan 2025 15:52:40 +0200 Subject: [PATCH 5/5] add another comment --- spec/dummy/config/webpack/webpackConfig.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/spec/dummy/config/webpack/webpackConfig.js b/spec/dummy/config/webpack/webpackConfig.js index 8d069cb3f..8d80a9d53 100644 --- a/spec/dummy/config/webpack/webpackConfig.js +++ b/spec/dummy/config/webpack/webpackConfig.js @@ -4,6 +4,8 @@ const serverWebpackConfig = require('./serverWebpackConfig'); const webpackConfig = (envSpecific) => { const clientConfig = clientWebpackConfig(); const serverConfig = serverWebpackConfig(); + // The stream module is used on the server side for streaming server side rendering. + // It's not needed on the client side, so we can remove it. clientConfig.resolve.fallback = { stream: false }; // If you are using "node" target in serverWebpackConfig.js, you can remove the fallback configuration below // since Node.js has built-in stream support.