react_on_rails 12.2.0 → 12.5.0

data/lib/generators/react_on_rails/base_generator.rb

@@ -33,7 +33,40 @@ module ReactOnRails
                         app/views/layouts/hello_world.html.erb
                         config/initializers/react_on_rails.rb
                         Procfile.dev
-                        Procfile.dev-hmr]
+                        Procfile.dev-static]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
+      def copy_js_bundle_files
+        base_path = "base/base/"
+        base_files = %w[app/javascript/packs/server-bundle.js
+                        app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
+                        app/javascript/bundles/HelloWorld/components/HelloWorld.module.css]
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+      end
+
+      def copy_webpack_config
+        puts "Adding Webpack config"
+        base_path = "base/base"
+        base_files = %w[babel.config.js
+                        config/webpack/clientWebpackConfig.js
+                        config/webpack/commonWebpackConfig.js
+                        config/webpack/development.js
+                        config/webpack/production.js
+                        config/webpack/serverWebpackConfig.js
+                        config/webpack/webpackConfig.js]
+        config = {
+          message: "// The source code including full typescript support is available at:"
+        }
+        base_files.each do |file|
+          template("#{base_path}/#{file}.tt", file, config)
+        end
+      end
+
+      def copy_webpacker_config
+        puts "Adding Webpacker v6 config"
+        base_path = "base/base/"
+        base_files = %w[config/webpacker.yml]
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
@@ -51,6 +84,16 @@ module ReactOnRails
           puts "Adding the lastest react-on-rails NPM module. Double check this is correct in package.json"
           run "yarn add react-on-rails --exact"
         end
+
+        puts "Adding React dependencies"
+        run "yarn add react react-dom @babel/preset-react prop-types babel-plugin-transform-react-remove-prop-types \
+            babel-plugin-macros"
+
+        puts "Adding CSS handlers"
+        run "yarn add css-loader css-minimizer-webpack-plugin mini-css-extract-plugin style-loader"
+
+        puts "Adding dev dependencies"
+        run "yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh"
       end
 
       def append_to_spec_rails_helper
@@ -111,10 +154,10 @@ module ReactOnRails
             - Alternately, you may turn off compile in config/webpacker.yml and run the foreman
               command to start the rails server and run webpack in watch mode.
 
-                foreman start -f Procfile.dev
+                foreman start -f Procfile.dev-static
 
             - To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
-              and bin/webpack-dev-server. Or use Procfile.dev-hmr.
+              and bin/webpack-dev-server. Or use Procfile.dev.
 
             - To server render, change this line app/views/hello_world/index.html.erb to
               `prerender: true` to see server rendering (right click on page and select "view source").
@@ -132,7 +175,7 @@ module ReactOnRails
       # From https://github.com/rails/rails/blob/4c940b2dbfb457f67c6250b720f63501d74a45fd/railties/lib/rails/generators/rails/app/app_generator.rb
       def app_name
         @app_name ||= (defined_app_const_base? ? defined_app_name : File.basename(destination_root))
-                      .tr('\\', "").tr(". ", "_")
+                      .tr("\\", "").tr(". ", "_")
       end
 
       def defined_app_name

data/lib/generators/react_on_rails/generator_helper.rb

@@ -52,4 +52,8 @@ module GeneratorHelper
     empty_directory(parent_directories) unless dest_dir_exists?(parent_directories)
     copy_file source_file, destination_file
   end
+
+  def add_documentation_reference(message, source)
+    "#{message} \n#{source}"
+  end
 end

data/lib/generators/react_on_rails/templates/.eslintrc

@@ -1,5 +1,7 @@
 ---
-extends: eslint-config-shakacode
+extends: 
+  - eslint-config-shakacode
+  - prettier
 
 plugins:
   - react

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev

@@ -1,9 +1,5 @@
+# Procfile for development using HMR
 # You can run these commands in separate shells
-web: rails s -p 3000
-
-# Next line runs a watch process with webpack to compile the changed files.
-# When making frequent changes to client side assets, you will prefer building webpack assets
-# upon saving rather than when you refresh your browser page.
-# Note, if using React on Rails localization you will need to run
-# `bundle exec rake react_on_rails:locale` before you run bin/webpack
-client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'
+rails: bundle exec rails s -p 3000
+wp-client: HMR=true bin/webpack-dev-server
+wp-server: HMR=true SERVER_BUNDLE_ONLY=yes bin/webpack --watch

data/lib/generators/react_on_rails/templates/base/base/Procfile.dev-static

@@ -0,0 +1,9 @@
+# You can run these commands in separate shells
+web: rails s -p 3000
+
+# Next line runs a watch process with webpack to compile the changed files.
+# When making frequent changes to client side assets, you will prefer building webpack assets
+# upon saving rather than when you refresh your browser page.
+# Note, if using React on Rails localization you will need to run
+# `bundle exec rake react_on_rails:locale` before you run bin/webpack
+webpack: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
+import style from './HelloWorld.module.css';
 
 const HelloWorld = (props) => {
   const [name, setName] = useState(props.name);
@@ -9,7 +10,7 @@ const HelloWorld = (props) => {
       <h3>Hello, {name}!</h3>
       <hr />
       <form>
-        <label htmlFor="name">
+        <label className={style.bright} htmlFor="name">
           Say hello to:
           <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} />
         </label>

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css

@@ -0,0 +1,4 @@
+.bright {
+    color: green;
+    font-weight: bold;
+}

data/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js

@@ -0,0 +1,5 @@
+import HelloWorld from './HelloWorld';
+// This could be specialized for server rendering
+// For example, if using React-Router, we'd have the SSR setup here.
+
+export default HelloWorld;

data/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js

@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  HelloWorld,
+});

data/lib/generators/react_on_rails/templates/base/base/app/views/layouts/hello_world.html.erb

@@ -4,6 +4,7 @@
     <title>ReactOnRailsWithWebpacker</title>
     <%= csrf_meta_tags %>
     <%= javascript_pack_tag 'hello-world-bundle' %>
+    <%= stylesheet_pack_tag 'hello-world-bundle' %>
   </head>
 
   <body>

data/lib/generators/react_on_rails/templates/base/base/babel.config.js.tt

@@ -0,0 +1,15 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/babel.config.js") %>
+
+const defaultConfigFunc = require('@rails/webpacker/package/babel/preset.js');
+
+module.exports = function (api) {
+  const resultConfig = defaultConfigFunc(api);
+
+  const changesOnDefault = {
+    plugins: [process.env.WEBPACK_SERVE && 'react-refresh/babel'].filter(Boolean),
+  };
+
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins];
+
+  return resultConfig;
+};

data/lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb

@@ -41,5 +41,5 @@ ReactOnRails.configure do |config|
   # different. You should have ONE server bundle which can create all of your server rendered
   # React components.
   #
-  config.server_bundle_js_file = "hello-world-bundle.js"
+  config.server_bundle_js_file = "server-bundle.js"
 end

data/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js.tt

@@ -0,0 +1,17 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/clientWebpackConfig.js") %>
+
+const commonWebpackConfig = require('./commonWebpackConfig');
+
+const configureClient = () => {
+  const clientConfig = commonWebpackConfig();
+
+  // 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
+  // client config is going to try to load chunks.
+  delete clientConfig.entry['server-bundle'];
+
+  return clientConfig;
+};
+
+module.exports = configureClient;

data/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js.tt

@@ -0,0 +1,15 @@
+<%= add_documentation_reference(config[:message], "// 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 { webpackConfig: baseClientWebpackConfig, merge } = require('@rails/webpacker');
+
+const commonOptions = {
+  resolve: {
+    extensions: ['.css', '.ts', '.tsx'],
+  },
+};
+
+// Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals
+const commonWebpackConfig = () => merge({}, baseClientWebpackConfig, commonOptions);
+
+module.exports = commonWebpackConfig;

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

@@ -0,0 +1,27 @@
+<%= add_documentation_reference(config[:message], "// 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('@rails/webpacker');
+
+const webpackConfig = require('./webpackConfig');
+
+const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => {
+  // 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({
+        overlay: {
+          sockPort: devServer.port,
+        },
+      }),
+    );
+  }
+};
+
+module.exports = webpackConfig(developmentEnvOnly);

data/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js.tt

@@ -0,0 +1,11 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/production.js") %>
+
+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 = webpackConfig(productionEnvOnly);

data/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js.tt

@@ -0,0 +1,117 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/serverWebpackConfig.js") %>
+
+const { merge, config } = require('@rails/webpacker');
+const commonWebpackConfig = require('./commonWebpackConfig');
+
+const webpack = require('webpack');
+
+const configureServer = () => {
+  // We need to use "merge" because the clientConfigObject, EVEN after running
+  // toWebpackConfig() is a mutable GLOBAL. Thus any changes, like modifying the
+  // entry value will result in changing the client config!
+  // Using webpack-merge into an empty object avoids this issue.
+  const serverWebpackConfig = commonWebpackConfig();
+
+  // We just want the single server bundle entry
+  const serverEntry = {
+    'server-bundle': serverWebpackConfig.entry['server-bundle'],
+  };
+
+  if (!serverEntry['server-bundle']) {
+    throw new Error(
+      "Create a pack with the file name 'server-bundle.js' containing all the server rendering files",
+    );
+  }
+
+  serverWebpackConfig.entry = serverEntry;
+
+  // Remove the mini-css-extract-plugin from the style loaders because
+  // the client build will handle exporting CSS.
+  // replace file-loader with null-loader
+  serverWebpackConfig.module.rules.forEach((loader) => {
+    if (loader.use && loader.use.filter) {
+      loader.use = loader.use.filter(
+        (item) => !(typeof item === 'string' && item.match(/mini-css-extract-plugin/)),
+      );
+    }
+  });
+
+  // No splitting of chunks for a server bundle
+  serverWebpackConfig.optimization = {
+    minimize: false,
+  };
+  serverWebpackConfig.plugins.unshift(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }));
+
+  // Custom output for the server-bundle that matches the config in
+  // config/initializers/react_on_rails.rb
+  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: config.outputPath,
+    publicPath: config.publicPath,
+    // https://webpack.js.org/configuration/output/#outputglobalobject
+  };
+
+  // Don't hash the server bundle b/c would conflict with the client manifest
+  // And no need for the MiniCssExtractPlugin
+  serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter(
+    (plugin) =>
+      plugin.constructor.name !== 'WebpackAssetsManifest' &&
+      plugin.constructor.name !== 'MiniCssExtractPlugin' &&
+      plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin',
+  );
+
+  // Configure loader rules for SSR
+  // Remove the mini-css-extract-plugin from the style loaders because
+  // the client build will handle exporting CSS.
+  // replace file-loader with null-loader
+  const rules = serverWebpackConfig.module.rules;
+  rules.forEach((rule) => {
+    if (Array.isArray(rule.use)) {
+      // remove the mini-css-extract-plugin and style-loader
+      rule.use = rule.use.filter((item) => {
+        let testValue;
+        if (typeof item === 'string') {
+          testValue = item;
+        } else if (typeof item.loader === 'string') {
+          testValue = item.loader;
+        }
+        return !(testValue.match(/mini-css-extract-plugin/) || testValue === 'style-loader');
+      });
+      const cssLoader = rule.use.find((item) => {
+        let testValue;
+
+        if (typeof item === 'string') {
+          testValue = item;
+        } else if (typeof item.loader === 'string') {
+          testValue = item.loader;
+        }
+
+        return testValue.includes('css-loader');
+      });
+      if (cssLoader && cssLoader.options) {
+        cssLoader.options.modules = { exportOnlyLocals: true };
+      }
+
+      // Skip writing image files during SSR by setting emitFile to false
+    } else if (rule.use && (rule.use.loader === 'url-loader' || rule.use.loader === 'file-loader')) {
+      rule.use.options.emitFile = false;
+    }
+  });
+
+  // eval works well for the SSR bundle because it's the fastest and shows
+  // lines in the server bundle which is good for debugging SSR
+  // The default of cheap-module-source-map is slow and provides poor info.
+  serverWebpackConfig.devtool = 'eval';
+
+  // If using the default 'web', then libraries like Emotion and loadable-components
+  // break with SSR. The fix is to use a node renderer and change the target.
+  // If using the React on Rails Pro node server renderer, uncomment the next line
+  // serverWebpackConfig.target = 'node'
+
+  return serverWebpackConfig;
+};
+
+module.exports = configureServer;

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

@@ -0,0 +1,36 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/webpackConfig.js") %>
+
+const clientWebpackConfig = require('./clientWebpackConfig');
+const serverWebpackConfig = require('./serverWebpackConfig');
+
+const webpackConfig = (envSpecific) => {
+  const clientConfig = clientWebpackConfig();
+  const serverConfig = serverWebpackConfig();
+
+  if (envSpecific) {
+    envSpecific(clientConfig, serverConfig);
+  }
+
+  let result;
+  // For HMR, need to separate the the client and server webpack configurations
+  if (process.env.WEBPACK_SERVE || process.env.CLIENT_BUNDLE_ONLY) {
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating only the client bundles.');
+    result = clientConfig;
+  } else if (process.env.SERVER_BUNDLE_ONLY) {
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating only the server bundle.');
+    result = serverConfig;
+  } else {
+    // default is the standard client and server build
+    // eslint-disable-next-line no-console
+    console.log('[React on Rails] Creating both client and server bundles.');
+    result = [clientConfig, serverConfig];
+  }
+
+  // To debug, uncomment next line and inspect "result"
+  // debugger
+  return result;
+};
+
+module.exports = webpackConfig;

data/lib/generators/react_on_rails/templates/base/base/config/webpacker.yml

@@ -0,0 +1,62 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_root_path: public
+  public_output_path: packs
+  cache_path: tmp/webpacker
+  webpack_compile_output: true
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  additional_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+development:
+  <<: *default
+  # This is false since we're running `bin/webpack -w` in Procfile.dev-setic
+  compile: false
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
+    hmr: true
+    client:
+      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
+      overlay: true
+      # May also be a string
+      # webSocketURL:
+      #  hostname: "0.0.0.0"
+      #  pathname: "/ws"
+      #  port: 8080
+    compress: true
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
+    allowed_hosts: [ 'localhost' ]
+    pretty: true
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    static:
+      watch:
+        ignored: '**/node_modules/**'
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true

data/lib/generators/react_on_rails/templates/redux/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import style from './HelloWorld.module.css';
 
 const HelloWorld = ({ name, updateName }) => (
   <div>
@@ -9,7 +10,7 @@ const HelloWorld = ({ name, updateName }) => (
     </h3>
     <hr />
     <form>
-      <label htmlFor="name">
+      <label className={style.bright} htmlFor="name">
         Say hello to:
         <input id="name" type="text" value={name} onChange={(e) => updateName(e.target.value)} />
       </label>

data/lib/react_on_rails/helper.rb

@@ -536,6 +536,12 @@ module ReactOnRails
 
       controller.is_a?(ActionMailer::Base)
     end
+
+    if defined?(ScoutApm)
+      include ScoutApm::Tracer
+      instrument_method :react_component, type: "ReactOnRails", name: "react_component"
+      instrument_method :react_component_hash, type: "ReactOnRails", name: "react_component_hash"
+    end
   end
 end
 # rubocop:enable Metrics/ModuleLength

data/lib/react_on_rails/locales/base.rb

@@ -54,15 +54,13 @@ module ReactOnRails
       end
 
       def locale_files
-        @locale_files ||= begin
-          if i18n_yml_dir.present?
-            Dir["#{i18n_yml_dir}/**/*.yml"]
-          else
-            ReactOnRails::Utils.truthy_presence(
-              Rails.application && Rails.application.config.i18n.load_path
-            ).presence
-          end
-        end
+        @locale_files ||= if i18n_yml_dir.present?
+                            Dir["#{i18n_yml_dir}/**/*.yml"]
+                          else
+                            ReactOnRails::Utils.truthy_presence(
+                              Rails.application && Rails.application.config.i18n.load_path
+                            ).presence
+                          end
       end
 
       def i18n_dir

data/lib/react_on_rails/server_rendering_js_code.rb

@@ -18,6 +18,19 @@ module ReactOnRails
         react_component_name: nil,
         render_options: nil
       )
+
+        config_server_bundle_js = ReactOnRails.configuration.server_bundle_js_file
+
+        if render_options.prerender == true && config_server_bundle_js.blank?
+          msg = <<~MSG
+            The `prerender` option to allow Server Side Rendering is marked as true but the ReactOnRails configuration
+            for `server_bundle_js_file` is nil or not present in `config/initializers/react_on_rails.rb`.
+            Set `config.server_bundle_js_file` to your javascript bundle to allow server side rendering.
+            Read more at https://www.shakacode.com/react-on-rails/docs/guides/react-server-rendering/
+          MSG
+          raise ReactOnRails::Error, msg
+        end
+
         js_code_renderer.render(props_string, rails_context, redux_stores, react_component_name, render_options)
       end
 

data/lib/react_on_rails/server_rendering_pool/ruby_embedded_java_script.rb

@@ -150,6 +150,10 @@ module ReactOnRails
         end
 
         def execjs_timer_polyfills
+          if ReactOnRails::Utils.react_on_rails_pro? && ReactOnRailsPro.configuration.include_execjs_polyfills == false
+            return ""
+          end
+
           <<~JS
             function getStackTrace () {
               var stack;
@@ -204,6 +208,11 @@ module ReactOnRails
           JS
         end
 
+        if defined?(ScoutApm)
+          include ScoutApm::Tracer
+          instrument_method :exec_server_render_js, type: "ReactOnRails", name: "ExecJs React Server Rendering"
+        end
+
         private
 
         def file_url_to_string(url)

data/lib/react_on_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReactOnRails
-  VERSION = "12.2.0"
+  VERSION = "12.5.0"
 end

data/lib/tasks/assets.rake

@@ -7,7 +7,9 @@ require "active_support"
 
 ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
 
-unless ReactOnRails::WebpackerUtils.webpacker_webpack_production_config_exists?
+skip_react_on_rails_precompile = %w[no false n f].include?(ENV["REACT_ON_RAILS_PRECOMPILE"])
+
+if !skip_react_on_rails_precompile && ReactOnRails.configuration.build_production_command.present?
   # Ensure that rails/webpacker does not call bin/webpack if we're providing
   # the build command.
   ENV["WEBPACKER_PRECOMPILE"] = "false"
@@ -38,12 +40,10 @@ end
 # rubocop:disable Metrics/BlockLength
 namespace :react_on_rails do
   namespace :assets do
-    desc <<-DESC.strip_heredoc
-      Compile assets with webpack
-      Uses command defined with ReactOnRails.configuration.build_production_command
-      sh "#{ReactOnRails::Utils.prepend_cd_node_modules_directory('<ReactOnRails.configuration.build_production_command>')}"
-      Note: This command is not automatically added to assets:precompile if the rails/webpacker
-      configuration file config/webpack/production.js exists.
+    desc <<~DESC.strip_heredoc
+      If config.build_production_command is defined, this command is automatically
+      added to task assets:precompile and the regular webpacker compile will not run.
+      The defined command is either a script or a module with a method `call`.
     DESC
     task webpack: :locale do
       build_production_command = ReactOnRails.configuration.build_production_command
@@ -61,6 +61,7 @@ namespace :react_on_rails do
           exit!(1)
         end
       else
+        # Left in this warning message in case this rake task is run directly
         msg = <<~MSG
           React on Rails is aborting webpack compilation from task react_on_rails:assets:webpack
           because you do not have the `config.build_production_command` defined.

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "12.2.0",
+  "version": "12.5.0",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {