Update generators to add fallback: { stream: false } to webpack configs

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

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

@@ -6,6 +6,17 @@ 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.
+  //
+  // 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) {
     envSpecific(clientConfig, serverConfig);

spec/dummy/config/webpack/alias.js

@@ -4,7 +4,6 @@ module.exports = {
   resolve: {
     alias: {
       Assets: resolve(__dirname, '..', '..', 'client', 'app', 'assets'),
-      stream: 'stream-browserify',
     },
   },
 };

spec/dummy/config/webpack/webpackConfig.js

@@ -4,7 +4,17 @@ const serverWebpackConfig = require('./serverWebpackConfig');
 const webpackConfig = (envSpecific) => {
   const clientConfig = clientWebpackConfig();
   const serverConfig = serverWebpackConfig();
-  clientConfig.resolve.fallback = { stream: require.resolve('stream-browserify') };
+  // 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.
+  //
+  // 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) {
     envSpecific(clientConfig, serverConfig);

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",