Revert changes to initializer, webpack files, and rspec config for minimal PR

Author: justin808

babel.config.js

@@ -1,36 +1,32 @@
-// The source code including full typescript support is available at: 
-// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/babel.config.js
-
 module.exports = function (api) {
- const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
- const resultConfig = defaultConfigFunc(api)
- const isProductionEnv = api.env('production')
+ const defaultConfigFunc = require('shakapacker/package/babel/preset.js');
+ const resultConfig = defaultConfigFunc(api);
+ const isProductionEnv = api.env('production');
 
  const changesOnDefault = {
  presets: [
  [
  '@babel/preset-react',
  {
+ runtime: 'automatic',
  development: !isProductionEnv,
  useBuiltIns: true,
- runtime: 'automatic'
- }
- ]
+ },
+ ],
  ].filter(Boolean),
  plugins: [
- // Enable React Refresh (Fast Refresh) only when webpack-dev-server is running (HMR mode)
- // This prevents React Refresh from trying to connect when using static compilation
- !isProductionEnv && process.env.WEBPACK_SERVE && 'react-refresh/babel',
- isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
+ process.env.WEBPACK_SERVE && 'react-refresh/babel',
+ isProductionEnv && [
+ 'babel-plugin-transform-react-remove-prop-types',
  {
- removeImport: true
- }
- ]
+ removeImport: true,
+ },
+ ],
  ].filter(Boolean),
- }
+ };
 
- resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
- resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
+ resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets];
+ resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins];
 
- return resultConfig
-}
+ return resultConfig;
+};

config/initializers/react_on_rails.rb

@@ -1,67 +1,84 @@
 # frozen_string_literal: true
 
-# See https://github.com/shakacode/react_on_rails/blob/master/docs/guides/configuration.md
-# for many more options.
-
+# Shown below are the defaults for configuration
 ReactOnRails.configure do |config|
- # 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.
- # If nil, then the standard shakacode/shakapacker assets:precompile will run
- # config.build_production_command = nil
+ # Define the files for we need to check for webpack compilation when running tests
+ config.webpack_generated_files = %w[client-bundle.js server-bundle.js]
 
- ################################################################################
- ################################################################################
- # TEST CONFIGURATION OPTIONS
- # Below options are used with the use of this test helper:
- # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
- ################################################################################
+ config.build_test_command = "RAILS_ENV=test bin/shakapacker"
+ config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/shakapacker"
 
- # If you are using this in your spec_helper.rb (or rails_helper.rb):
- #
- # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+ # This is the file used for server rendering of React when using `(prerender: true)`
+ # If you are never using server rendering, you may set this to "".
+ # If you are using the same file for client and server rendering, having this set probably does
+ # not affect performance.
+ config.server_bundle_js_file = "server-bundle.js"
+
+ # React on Rails 16 compatibility: Workaround for removed error handling
  #
- # with rspec then this controls what npm command is run
- # to automatically refresh your webpack assets on every test run.
+ # BREAKING CHANGE in v16: React on Rails 14.2.1 had robust error handling that would
+ # fallback to the Shakapacker output path when bundle lookup failed. This was removed
+ # in v16.0.1.rc.2, causing it to look in the wrong directory during tests.
  #
- # Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
- # and set the config/shakapacker.yml option for test to true.
- config.build_test_command = "RAILS_ENV=test bin/shakapacker"
+ # This configuration tells React on Rails where to find bundles in test environment.
+ # Without this, it defaults to public/webpack/test/ instead of public/packs/
+ config.generated_assets_dir = Rails.public_path.join("packs").to_s if Rails.env.test?
 
  ################################################################################
+ # CLIENT RENDERING OPTIONS
+ # Below options can be overriden by passing options to the react_on_rails
+ # `render_component` view helper method.
+ ################################################################################
+
+ # Default is false. Can be overriden at the component level.
+ # Set to false for debugging issues before turning on to true.
+ config.prerender = true
+
+ # default is true for development, off otherwise
+ config.trace = Rails.env.development?
+
  ################################################################################
  # SERVER RENDERING OPTIONS
+ # Applicable options can be overriden by passing options to the react_on_rails
+ # `render_component` view helper method.
  ################################################################################
- # This is the file used for server rendering of React when using `(prerender: true)`
- # If you are never using server rendering, you should set this to "".
- # Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
- # of the JS sent to the client. For the server rendering, React on Rails creates a pool of
- # JavaScript execution instances which should handle any component requested.
- #
- # While you may configure this to be the same as your client bundle file, this file is typically
- # different. You should have ONE server bundle which can create all of your server rendered
- # React components.
- #
- config.server_bundle_js_file = "server-bundle.js"
 
- # Configure where server bundles are output. Defaults to "ssr-generated".
- # This should match your webpack configuration for server bundles.
- config.server_bundle_output_path = "ssr-generated"
+ # If set to true, this forces Rails to reload the server bundle if it is modified
+ config.development_mode = Rails.env.development?
+
+ # For server rendering. This can be set to false so that server side messages are discarded.
+ # Default is true. Be cautious about turning this off.
+ config.replay_console = true
 
- # Enforce that server bundles are only loaded from private (non-public) directories.
- # When true, server bundles will only be loaded from the configured server_bundle_output_path.
- # This is recommended for production to prevent server-side code from being exposed.
- config.enforce_private_server_bundles = true
+ # Default is true. Logs server rendering messages to Rails.logger.info
+ config.logging_on_server = true
 
+ # Change to true to raise exception on server if the JS code throws. Let's do this only if not
+ # in production, as the JS code might still work on the client and we don't want to blow up the
+ # whole Rails page.
+ config.raise_on_prerender_error = !Rails.env.production?
+
+ # Server rendering only (not for render_component helper)
+ # You can configure your pool of JS virtual machines and specify where it should load code:
+ # On MRI, use `therubyracer` for the best performance
+ # (see [discussion](https://github.com/reactjs/react-rails/pull/290))
+ # On MRI, you'll get a deadlock with `pool_size` > 1
+ # If you're using JRuby, you can increase `pool_size` to have real multi-threaded rendering.
+ config.server_renderer_pool_size = 1 # increase if you're on JRuby
+ config.server_renderer_timeout = 20 # seconds
+
+ ################################################################################
+ # I18N OPTIONS
  ################################################################################
+ # Replace the following line to the location where you keep translation.js & default.js.
+ config.i18n_dir = Rails.root.join("client/app/libs/i18n")
+
  ################################################################################
- # FILE SYSTEM BASED COMPONENT REGISTRY
+ # MISCELLANEOUS OPTIONS
  ################################################################################
- # `components_subdirectory` is the name of the matching directories that contain automatically registered components
- # for use in the Rails views. The default is nil, you can enable the feature by updating it in the next line.
- config.components_subdirectory = "ror_components"
- #
- # For automated component registry, `render_component` view helper method tries to load bundle for component from
- # generated directory. default is false, you can pass option at the time of individual usage or update the default
- # in the following line
- config.auto_load_bundle = true
+
+ # This allows you to add additional values to the Rails Context. Implement one static method
+ # called `custom_context(view_context)` and return a Hash.
+ config.rendering_extension = nil
+ config.i18n_output_format = "js"
 end

config/webpack/clientWebpackConfig.js

@@ -1,11 +1,20 @@
-// The source code including full typescript support is available at: 
-// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/clientWebpackConfig.js
+// The source code including full typescript support is available at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/clientWebpackConfig.js
 
+const webpack = require('webpack');
 const commonWebpackConfig = require('./commonWebpackConfig');
 
 const configureClient = () => {
  const clientConfig = commonWebpackConfig();
 
+ clientConfig.plugins.push(
+ new webpack.ProvidePlugin({
+ $: 'jquery',
+ jQuery: 'jquery',
+ ActionCable: '@rails/actioncable',
+ }),
+ );
+
  // server-bundle is special and should ONLY be built by the serverConfig
  // In case this entry is not deleted, a very strange "window" not found
  // error shows referring to window["webpackJsonp"]. That is because the

config/webpack/commonWebpackConfig.js

@@ -1,18 +1,35 @@
-// The source code including full typescript support is available at: 
-// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/commonWebpackConfig.js
+// The source code including full typescript support is available at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/commonWebpackConfig.js
 
 // Common configuration applying to client and server configuration
 const { generateWebpackConfig, merge } = require('shakapacker');
 
 const baseClientWebpackConfig = generateWebpackConfig();
-
 const commonOptions = {
  resolve: {
  extensions: ['.css', '.ts', '.tsx'],
  },
 };
 
+// add sass resource loader
+const sassLoaderConfig = {
+ loader: 'sass-resources-loader',
+ options: {
+ resources: './client/app/assets/styles/app-variables.scss',
+ },
+};
+
+const ignoreWarningsConfig = {
+ ignoreWarnings: [/Module not found: Error: Can't resolve 'react-dom\/client'/],
+};
+
+const scssConfigIndex = baseClientWebpackConfig.module.rules.findIndex((config) =>
+ '.scss'.match(config.test),
+);
+
+baseClientWebpackConfig.module.rules[scssConfigIndex].use.push(sassLoaderConfig);
+
 // Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
-const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions);
+const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions, ignoreWarningsConfig);
 
-module.exports = commonWebpackConfig;
+module.exports = commonWebpackConfig;

config/webpack/development.js

@@ -1,22 +1,28 @@
-// The source code including full typescript support is available at: 
-// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/development.js
+// The source code including full typescript support is available at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js
+
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
 const { devServer, inliningCss } = require('shakapacker');
 
-const generateWebpackConfigs = require('./generateWebpackConfigs');
+const webpackConfig = require('./webpackConfig');
 
 const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
- // React Refresh (Fast Refresh) setup - only when webpack-dev-server is running (HMR mode)
- // This matches the condition in generateWebpackConfigs.js and babel.config.js
- if (process.env.WEBPACK_SERVE) {
+ // plugins
+ if (inliningCss) {
+ // Note, when this is run, we're building the server and client bundles in separate processes.
+ // Thus, this plugin is not applied to the server bundle.
+
  // eslint-disable-next-line global-require
  const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
  clientWebpackConfig.plugins.push(
  new ReactRefreshWebpackPlugin({
- // Use default overlay configuration for better compatibility
+ overlay: {
+ sockPort: devServer.port,
+ },
  }),
  );
  }
 };
 
-module.exports = generateWebpackConfigs(developmentEnvOnly);
+module.exports = webpackConfig(developmentEnvOnly);

config/webpack/generateWebpackConfigs.js

@@ -1,10 +1,12 @@
-// The source code including full typescript support is available at: 
-// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/production.js
+// The source code including full typescript support is available at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/production.js
 
-const generateWebpackConfigs = require('./generateWebpackConfigs');
+process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+
+const webpackConfig = require('./webpackConfig');
 
 const productionEnvOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
  // place any code here that is for production only
 };
 
-module.exports = generateWebpackConfigs(productionEnvOnly);
+module.exports = webpackConfig(productionEnvOnly);

config/webpack/production.js

@@ -1,7 +1,7 @@
-// The source code including full typescript support is available at: 
-// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/serverWebpackConfig.js
+// The source code including full typescript support is available at:
+// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/serverWebpackConfig.js
 
-const { merge, config } = require('shakapacker');
+const { config } = require('shakapacker');
 const commonWebpackConfig = require('./commonWebpackConfig');
 
 const webpack = require('webpack');
@@ -45,14 +45,13 @@ const configureServer = () => {
 
  // Custom output for the server-bundle that matches the config in
  // config/initializers/react_on_rails.rb
- // Server bundles are output to a private directory (not public) for security
  serverWebpackConfig.output = {
  filename: 'server-bundle.js',
  globalObject: 'this',
  // If using the React on Rails Pro node server renderer, uncomment the next line
  // libraryTarget: 'commonjs2',
- path: require('path').resolve(__dirname, '../../ssr-generated'),
- // No publicPath needed since server bundles are not served via web
+ path: config.outputPath,
+ publicPath: config.publicPath,
  // https://webpack.js.org/configuration/output/#outputglobalobject
  };
 

config/webpack/serverWebpackConfig.js

@@ -1,10 +1,7 @@
-// The source code including full typescript support is available at: 
-// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/test.js
-
-const generateWebpackConfigs = require('./generateWebpackConfigs')
+const webpackConfig = require('./webpackConfig');
 
 const testOnly = (_clientWebpackConfig, _serverWebpackConfig) => {
  // place any code here that is for test only
-}
+};
 
-module.exports = generateWebpackConfigs(testOnly)
+module.exports = webpackConfig(testOnly);

config/webpack/test.js

@@ -38,11 +38,6 @@
 Rails.root.glob("spec/support/**/*.rb").sort.each { |f| require f }
 
 RSpec.configure do |config|
- # Ensure that if we are running js tests, we are using latest webpack assets
- # This will use the defaults of :js and :server_rendering meta tags
- ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
-end
-
  config.include FactoryBot::Syntax::Methods
  # Ensure that if we are running js tests, we are using latest webpack assets
  # This will use the defaults of :js and :server_rendering meta tags