react_on_rails 13.3.4 → 13.4.0

data/docs/guides/tutorial.md

@@ -4,7 +4,7 @@ _Also see the example repo of [React on Rails Tutorial With SSR, HMR fast refres
 
 -----
 
-*Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v6*
+*Updated for Ruby 2.7, Rails 7, React on Rails v13, and Shakapacker v7*
 
 This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
 
@@ -25,8 +25,8 @@ By the time you read this, the latest may have changed. Be sure to check the ver
 - [Installation](#installation)
   - [Setting up your environment](#setting-up-your-environment)
   - [Create a new Ruby on Rails App](#create-a-new-ruby-on-rails-app)
-  - [Add the shakapacker and react_on_rails gems](#add-the-shakapacker-and-react_on_rails-gems)
-  - [Run the shakapacker (webpacker) generator](#run-the-shakapacker-webpacker-generator)
+  - [Add the Shakapacker and react_on_rails gems](#add-the-shakapacker-and-react_on_rails-gems)
+  - [Run the Shakapacker generator](#run-the-shakapacker-generator)
   - [Run the React on Rails Generator](#run-the-react-on-rails-generator)
   - [Setting up your environment variables](#setting-up-your-environment-variables)
   - [Running the app](#running-the-app)
@@ -37,7 +37,7 @@ By the time you read this, the latest may have changed. Be sure to check the ver
 - [Other features](#other-features)
   - [Turning on Server Rendering](#turning-on-server-rendering)
   - [Moving from the Rails default `/app/javascript` to the recommended `/client` structure](#moving-from-the-rails-default-appjavascript-to-the-recommended-client-structure)
-  - [Using HMR with the shakapacker setup](#using-hmr-with-the-railswebpacker-setup)
+  - [Using HMR with the shakapacker setup](#using-hmr-with-the-shakapacker-setup)
   - [Custom IP & PORT setup (Cloud9 example)](#custom-ip--port-setup-cloud9-example)
   - [RubyMine performance tip](#rubymine-performance-tip)
 - [Conclusion](#conclusion)
@@ -68,7 +68,7 @@ cd test-react-on-rails
 ```
 Note: You can use `--database=postgresql` option to use Postgresql for the database.
 
-## Add the shakapacker and react_on_rails gems
+## Add the Shakapacker and react_on_rails gems
 We recommend using the latest version of these gems. Otherwise, specify the
 exact versions of both the gem and npm packages. In other words, don't use
 the `^` or `~` in the version specifications.
@@ -81,10 +81,10 @@ bundle add shakapacker --strict
 Note: The latest released React On Rails version is considered stable. Please use the latest
 version to ensure you get all the security patches and the best support.
 
-## Run the shakapacker (webpacker) generator
+## Run the Shakapacker generator
 
 ```bash
-bundle exec rails webpacker:install
+bundle exec rails shakapacker:install
 ```
 
 Commit all the changes so far to avoid getting errors in the next step.
@@ -134,7 +134,7 @@ Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and
 
 # HMR vs. React Hot Reloading
 
-First, check that the `hmr` and the `inline` options are `true` in your `config/webpacker.yml` file.
+First, check that the `hmr` and the `inline` options are `true` in your `config/shakapacker.yml` file.
 
 The basic setup will have HMR working with the default Shakapacker setup. The basic
 [HMR](https://webpack.js.org/concepts/hot-module-replacement/), without a special
@@ -294,7 +294,7 @@ If you want to test this out with HMR, then you also need to add this line to yo
 ```
 
 More likely, you will create a different build file for server rendering. However, if you want to
-use the same file from the webpack-dev-server, you'll need to add that line.
+use the same file from the shakapack-dev-server, you'll need to add that line.
 
 When you look at the source code for the page (right click, view source in Chrome), you can see the difference between non-server rendering, where your DIV containing your React looks like this:
 
@@ -324,7 +324,7 @@ ShakaCode recommends that you use `/client` for your client side app. This way a
 mv app/javascript client
 ```
 
-2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
+2. Edit your `/config/shakapacker.yml` file. Change the `default/source_path`:
 
 ```yml
 source_path: client
@@ -359,12 +359,9 @@ Then visit https://your-shared-addr.c9users.io:8080/hello_world
 
 It's super important to exclude certain directories from RubyMine or else it will slow to a crawl as it tries to parse all the npm files.
 
-* Generated files, per the settings in your `config/webpacker.yml`, which default to `public/packs` and `public/packs-test`
+* Generated files, per the settings in your `config/shakapacker.yml`, which default to `public/packs` and `public/packs-test`
 * `node_modules`
 
-
-
-
 # Conclusion
 
 * Browse the docs on [our documentation website](https://www.shakacode.com/react-on-rails/docs/)

data/docs/guides/upgrading-react-on-rails.md

@@ -12,13 +12,13 @@ Previously, the gem `webpacker` was a Gem dependency.
 
 v13 has changed slightly to switch to `shakapacker`.
 
-For details, see see the [Shakapacker guide to upgrading](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md)
+For details, see the Shakapacker guide to upgrading to [version 6](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md) and [version 7](https://github.com/shakacode/shakapacker/blob/master/docs/v7_upgrade.md)
 
 In summary:
 
 1. Change the gem reference from 'webpacker' to 'shakapacker'
 2. Change the npm reference from '@rails/webpacker' to 'shakapacker'
-3. Other updates, depending on what version of rails/webpacker that you had.
+3. Other updates, depending on what version of `rails/webpacker` that you had.
 
 ## Upgrading to v12
 ### Recent versions

data/docs/guides/webpack-configuration.md

@@ -1,36 +1,36 @@
-# Webpack Configuration: custom setup for Webpack or rails/webpacker?
+# Webpack Configuration: custom setup for Webpack or Shakapacker?
 
-## Webpack vs. rails/webpacker
+## Webpack vs. Shakapacker
 
 [Webpack](https://webpack.js.org) is the JavaScript npm package that prepares all your client-side assets. The Rails asset pipeline used to be the preferable way to prepare client-side assets.
 
-[rails/webpacker](https://github.com/rails/webpacker) is the Ruby gem that mainly gives us 2 things:
+[Shakapacker](https://github.com/shakcode/shakapacker) (the official successor of [rails/webpacker](https://github.com/rails/webpacker)) is the Ruby gem that mainly gives us 2 things:
 
 1. View helpers for placing the webpack bundles on your Rails views. React on Rails depends on these view helpers.
 2. A layer of abstraction on top of Webpack customization. The base setup works great for the client side webpack configuration.
 
-To get a deeper understanding of `rails/webpacker`, watch [RailsConf 2020 CE - Webpacker, It-Just-Works, But How? by Justin Gordon](https://youtu.be/sJLoOpc5LD8)
+To get a deeper understanding of Shakapacker, watch [RailsConf 2020 CE - Webpacker, It-Just-Works, But How? by Justin Gordon](https://youtu.be/sJLoOpc5LD8).
 
 Per the example repo [shakacode/react_on_rails_demo_ssr_hmr](https://github.com/shakacode/react_on_rails_demo_ssr_hmr),
-you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker).
+you should consider keeping your codebase mostly consistent with the defaults for [Shakapacker](https://github.com/shakacode/shakapacker).
 
 # React on Rails
 
-Version 9 of React on Rails added support for the rails/webpacker view helpers so that Webpack produced assets would no longer pass through the Rails asset pipeline. As part of this change, React on Rails added a configuration option to support customization of the node_modules directory. This allowed React on Rails to support the rails/webpacker configuration of the Webpack configuration.
+Version 9 of React on Rails added support for the Shakapacker (`rails/webpacker` of that time) view helpers so that Webpack produced assets would no longer pass through the Rails asset pipeline. As part of this change, React on Rails added a configuration option to support customization of the node_modules directory. This allowed React on Rails to support the Shakapacker configuration of the Webpack configuration.
 
-A key decision in your use React on Rails is whether you go with the rails/webpacker default setup or the traditional React on Rails setup of putting all your client side files under the `/client` directory. While there are technically 2 independent choices involved, the directory structure and the mechanism of Webpack configuration, for simplicity sake we'll assume that these choices go together.
+A key decision in your use React on Rails is whether you go with the Shakapacker default setup or the traditional React on Rails setup of putting all your client side files under the `/client` directory. While there are technically 2 independent choices involved, the directory structure and the mechanism of Webpack configuration, for simplicity sake we'll assume that these choices go together.
 
-## Option 1: Default Generator Setup: rails/webpacker app/javascript
+## Option 1: Default Generator Setup: Shakapacker app/javascript
 
-Typical rails/webpacker apps have a standard directory structure as documented [here](https://github.com/rails/webpacker/blob/5-x-stable/docs/recommended-project-structure.md). If you follow the steps in the the [basic tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [rails/webpacker Webpack configuration](https://www.shakacode.com/react-on-rails/docs/javascript/webpack/).
+Typical Shakapacker apps have a standard directory structure as documented [here](https://github.com/shakacode/shakapacker/blob/master/README.md#configuration-and-code). If you follow the steps in the the [basic tutorial](https://www.shakacode.com/react-on-rails/docs/guides/tutorial/), you will see this pattern in action. In order to customize the Webpack configuration, you need to consult with the [webpack configuration](https://www.shakacode.com/react-on-rails/docs/javascript/webpack/).
 
-The *advantage* of using rails/webpacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about Webpack customization.
+The *advantage* of using Shakapacker to configure Webpack is that there is very little code needed to get started and you don't need to understand really anything about webpack customization.
 
 ## Option 2: Traditional React on Rails using the /client directory
 
-Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and Webpack files, including the node_modules directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`.
+Until version 9, all React on Rails apps used the `/client` directory for configuring React on Rails in terms of the configuration of Webpack and location of your JavaScript and webpack files, including the `node_modules` directory. Version 9 changed the default to `/` for the `node_modules` location using this value in `config/initializers/react_on_rails.rb`: `config.node_modules_location`.
 
-You can access values in the `config/webpacker.yml`
+You can access values in the `config/shakapacker.yml`
 
 ```js
 const { config, devServer } = require('shakapacker');
@@ -38,5 +38,5 @@ const { config, devServer } = require('shakapacker');
 
 You will want consider using some of the same values set in these files:
 
-* https://github.com/rails/webpacker/blob/master/package/environments/base.js
-* https://github.com/rails/webpacker/blob/master/package/environments/development.js
+* https://github.com/shakacode/shakapacker/blob/master/package/environments/base.js
+* https://github.com/shakacode/shakapacker/blob/master/package/environments/development.js

data/docs/home.md

@@ -14,10 +14,10 @@
 2. [Upgrading React on Rails](https://www.shakacode.com/react-on-rails/docs/guides/upgrading-react-on-rails/#upgrading-to-v12).
 
 ## Example Apps
-1. [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) example repo for a simple configuration of webpack via the rails/webpacker gem
+1. [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) example repo for a simple configuration of webpack via the `shakacode/shakapacker` gem
 that supports SSR.
-2. Example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) for a new way to setup the creation of your SSR bundle with `rails/webpacker`.
+2. Example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) for a new way to setup the creation of your SSR bundle with `shakacode/shakapacker`.
 3. Live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [reactrails.com](http://reactrails.com).
 
 # Other Resources
-1. RailsConf 2020 talk: [Webpacker, It-Just-Works, But How?](http://railsconf.com/2020/video/justin-gordon-webpacker-it-just-works-but-how)
+1. RailsConf 2020 talk: [Webpacker, It-Just-Works, But How?](https://www.shakacode.com/blog/railsconf-2020-webpacker-it-just-works-but-how/)

data/docs/javascript/asset-pipeline.md

@@ -1,12 +1,12 @@
 # Asset Pipeline with React on Rails
 
-In general, you should not be mixing the asset pipeline with rails/webpacker and React on Rails.
+In general, you should not be mixing the asset pipeline with Shakapacker and React on Rails.
 
-If you're using React, then all of your CSS and images should be under either `/client` or
-`/app/javascript` or wherever you want your client side application.
+If you're using React, then all of your CSS and images should be under either `/app/javascript` or
+`/client` or wherever you want your client-side application.
 
 If you are incrementally migrating a large application, your main concern will be how to minimize
 duplication of styles and images between your old application and the new one.
 
-Please email [justin@shakacode.com](mailto:justin@shakacode.com) if you would be interested in help
+Please email [justin@shakacode.com](mailto:justin@shakacode.com) if you would be interested in helping
 to migrate a larger application.

data/docs/javascript/converting-from-custom-webpack-config-to-rails-webpacker-config.md

@@ -1,10 +1,10 @@
-# Converting from Custom Webpack Config to Rails Webpacker Config
+# Converting from Custom Webpack Config to Rails Shakapacker Config
 
-1. Compare your package.json and the dependencies in https://github.com/rails/webpacker/blob/master/package.json
+1. Compare your package.json and the dependencies in https://github.com/shakacode/shakapacker/blob/master/package.json
   and avoid any duplicates. We don't want different versions of the same packages.
-  We want the versions from rails/webpacker unless we specifically want to override them.
-2. Search the rails/webpacker repo for anything you're not sure about in terms of package names.
-3. run `bin/webpacker` and make sure there are zero errors
-4. update webpack plugins and loaders to current or close to current
-5. Make sure that your bin/webpacker and bin/webpacker match the latest on
-https://github.com/rails/webpacker/tree/master/lib/install/bin
+  We want the versions from `shakacode/shakapacker` unless we specifically want to override them.
+2. Search the `shakacode/shakapacker` repo for anything you're not sure about in terms of package names.
+3. Run `bin/shakapacker` and make sure there are zero errors
+4. Update webpack plugins and loaders to current or close to current
+5. Make sure that your `bin/shakapacker` and `bin/shakapacker` match the latest on
+https://github.com/shakacode/shakapacker/tree/master/lib/install/bin

data/docs/javascript/server-rendering-tips.md

@@ -17,7 +17,7 @@ For the best performance with Server Rendering, consider using [React on Rails P
 ## Troubleshooting Server Rendering
 
 1. First be sure your code works with server rendering disabled (`prerender: false`)
-2. Be sure that `config.trace` is true. You will get the server invocation code that renders your component. If you're not using Webpacker, you will also get the whole file used to setup the JavaScript context.
+2. Be sure that `config.trace` is true. You will get the server invocation code that renders your component. If you're not using Shakapacker, you will also get the whole file used to setup the JavaScript context.
 
 ## CSS
 Server bundles must always have CSS Extracted

data/docs/javascript/troubleshooting-when-using-shakapacker.md

@@ -0,0 +1,77 @@
+# Client rendering crashes when configuring `optimization.runtimeChunk` to `multiple`
+
+## Context
+
+1. Ruby version: 3.1
+2. Rails version: 7.0.6
+3. Shakapacker version: 6.6.0
+4. React on Rails version: 13.3.5
+
+## The failure
+
+Configuring Webpack to embed the runtime in each chunk and calling `react_component` twice in a rails view/partial causes the client render to crash with the following error:
+
+```
+Could not find component registered with name XXX. Registered component names include [ YYY ]. Maybe you forgot to register the component?
+```
+
+```
+VM4859 clientStartup.js:132 Uncaught Error: ReactOnRails encountered an error while rendering component: XXX. See above error message.
+    at Object.get (ComponentRegistry.js:40:15)
+    at Object.getComponent (ReactOnRails.js:211:44)
+    at render (VM4859 clientStartup.js:103:53)
+    at forEachReactOnRailsComponentRender (VM4859 clientStartup.js:138:9)
+    at reactOnRailsPageLoaded (VM4859 clientStartup.js:164:5)
+    at renderInit (VM4859 clientStartup.js:205:9)
+    at onPageReady (VM4859 clientStartup.js:234:9)
+    at HTMLDocument.onReadyStateChange (VM4859 clientStartup.js:238:13)
+```
+
+## Configs
+
+### Webpack configuration
+
+```js
+optimization: {
+  runtimeChunk: 'multiple'
+},
+```
+
+### Rails view
+
+```haml
+= react_component("XXX", props: @props)
+= yield
+= react_component("YYY", props: @props)
+```
+
+## The problem
+
+Configuring Webpack to embed the runtime in each chunk and calling `react_component` twice in a rails view/partial causes the client render to crash.
+
+Read more at https://github.com/shakacode/react_on_rails/issues/1558.
+
+## Solution
+
+To overcome this issue, we could use [shakapacker](https://github.com/shakacode/shakapacker)'s default optimization configuration (pseudo-code):
+
+```js
+const { webpackConfig: baseClientWebpackConfig } = require('shakapacker');
+
+// ...
+
+config.optimization = baseClientWebpackConfig.optimization;
+```
+As it set the `optimization.runtimeChunk` to `single`. See its source:
+
+`package/environments/base.js:115`
+```js
+  optimization: {
+    splitChunks: { chunks: 'all' },
+
+    runtimeChunk: 'single'
+  },
+```
+https://github.com/shakacode/shakapacker/blob/cdf32835d3e0949952b8b4b53063807f714f9b24/package/environments/base.js#L115-L119
+
+Or set `optimization.runtimeChunk` to `single` directly.

data/docs/outdated/rails-assets-relative-paths.md

@@ -1,4 +1,4 @@
-*Note: this doc reflects using Sprockets for assets and has not been updated for rails/webpacker*
+*Note: this doc reflects using Sprockets for assets and has not been updated for Shakapacker or rails/webpacker*
 
 # Using Webpack bundled assets with the Rails Asset Pipeline
 

data/docs/outdated/rails-assets.md

@@ -1,6 +1,6 @@
 # Rails assets and the Extract Text Plugin
 
-*This doc needs updating for the use of rails/webpacker with React on Rails*
+*This doc needs updating for the use of  Shakapacker or rails/webpacker with React on Rails*
 
 The [Webpack file loader](https://github.com/webpack/file-loader) copies referenced files to
 the destination output directory, with an MD5 hash. The other term for this is a "digest".

data/docs/react-on-rails-pro/react-on-rails-pro.md

@@ -3,7 +3,7 @@
 Support React on Rails development [by becoming a Github sponsor](https://github.com/sponsors/shakacode) and get these benefits:
 
 1. 1-hour per month of support via Slack, PR reviews, and Zoom for React on Rails,
-   React-Rails, rails/webpacker, ReScript (ReasonML), TypeScript, Rust, etc.
+   React-Rails, Shakapacker, rails/webpacker, ReScript (ReasonML), TypeScript, Rust, etc.
 2. React on Rails Pro Software that extends React on Rails with Node server rendering,
    fragment caching, code-splitting, and other performance enhancements for React on Rails.
 

data/lib/generators/react_on_rails/adapt_for_older_shakapacker_generator.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+require_relative "generator_helper"
+
+module ReactOnRails
+  module Generators
+    class AdaptForOlderShakapackerGenerator < Rails::Generators::Base
+      include GeneratorHelper
+      Rails::Generators.hide_namespace(namespace)
+
+      def change_spelling_to_webpacker
+        puts "Change spelling to webpacker v7"
+        files = %w[
+          Procfile.dev
+          Procfile.dev-static
+          config/shakapacker.yml
+          config/initializers/react_on_rails.rb
+        ]
+        files.each { |file| gsub_file(file, "shakapacker", "webpacker") }
+      end
+
+      def rename_config_file
+        puts "Rename to config/webpacker.yml"
+        puts "Renaming shakapacker.yml into webpacker.yml"
+        FileUtils.mv("config/shakapacker.yml", "config/webpacker.yml")
+      end
+
+      def modify_requiring_webpack_config_in_js
+        puts "Update commonWebpackConfig.js to follow the Shakapacker v6 interface"
+        file = "config/webpack/commonWebpackConfig.js"
+        gsub_file(file, "const baseClientWebpackConfig = generateWebpackConfig();\n\n", "")
+        gsub_file(
+          file,
+          "const { generateWebpackConfig, merge } = require('shakapacker');",
+          "const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');"
+        )
+      end
+    end
+  end
+end

data/lib/generators/react_on_rails/base_generator.rb

@@ -65,10 +65,10 @@ module ReactOnRails
         end
       end
 
-      def copy_webpacker_config
-        puts "Adding Webpacker v6 config"
+      def copy_shakapacker_config
+        puts "Adding Shakapacker v7 config file"
         base_path = "base/base/"
-        base_files = %w[config/webpacker.yml]
+        base_files = %w[config/shakapacker.yml]
         base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
@@ -132,50 +132,6 @@ module ReactOnRails
           ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
       STR
 
-      def self.helpful_message
-        <<-MSG.strip_heredoc
-
-          What to do next:
-
-            - See the documentation on https://github.com/shakacode/shakapacker#webpack-configuration
-              for how to customize the default webpack configuration.
-
-            - Include your webpack assets to your application layout.
-
-                <%= javascript_pack_tag 'hello-world-bundle' %>
-
-            - To start Rails server run:
-
-                ./bin/dev # Running with HMR
-
-              or
-
-                ./bin/dev-static # Running with statically created bundles, without HMR
-
-            - 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").
-
-                <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
-
-          Alternative steps to run the app:
-
-            - Run `rails s` to start the Rails server.
-
-            - Run bin/webpacker-dev-server to start the Webpack dev server for compilation of Webpack
-              assets as soon as you save. This default setup with the dev server does not work
-              for server rendering
-
-            - Visit http://localhost:3000/hello_world and see your React On Rails app running!
-
-            - To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
-              and bin/webpacker-dev-server. Or use Procfile.dev.
-        MSG
-      end
-
-      def print_helpful_message
-        GeneratorMessages.add_info(self.class.helpful_message)
-      end
-
       private
 
       # From https://github.com/rails/rails/blob/4c940b2dbfb457f67c6250b720f63501d74a45fd/railties/lib/rails/generators/rails/app/app_generator.rb

data/lib/generators/react_on_rails/generator_messages.rb

@@ -37,5 +37,45 @@ module GeneratorMessages
     def clear
       @output = []
     end
+
+    def helpful_message_after_installation
+      <<~MSG
+
+        What to do next:
+
+          - See the documentation on https://github.com/shakacode/shakapacker#webpack-configuration
+            for how to customize the default webpack configuration.
+
+          - Include your webpack assets to your application layout.
+
+              <%= javascript_pack_tag 'hello-world-bundle' %>
+
+          - To start Rails server run:
+
+              ./bin/dev # Running with HMR
+
+            or
+
+              ./bin/dev-static # Running with statically created bundles, without HMR
+
+          - 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").
+
+              <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
+
+        Alternative steps to run the app:
+
+          - Run `rails s` to start the Rails server.
+
+          - Run bin/shakapacker-dev-server to start the Webpack dev server for compilation of Webpack
+            assets as soon as you save. This default setup with the dev server does not work
+            for server rendering
+
+          - Visit http://localhost:3000/hello_world and see your React On Rails app running!
+
+          - To turn on HMR, edit config/shakapacker.yml and set HMR to true. Restart the rails server
+            and bin/shakapacker-dev-server. Or use Procfile.dev.
+      MSG
+    end
   end
 end

data/lib/generators/react_on_rails/install_generator.rb

@@ -29,6 +29,7 @@ module ReactOnRails
         if installation_prerequisites_met? || options.ignore_warnings?
           invoke_generators
           add_bin_scripts
+          add_post_install_message
         else
           error = "react_on_rails generator prerequisites not met!"
           GeneratorMessages.add_error(error)
@@ -52,6 +53,8 @@ module ReactOnRails
         else
           invoke "react_on_rails:react_no_redux"
         end
+
+        invoke "react_on_rails:adapt_for_older_shakapacker" unless using_shakapacker_7?
       end
 
       # NOTE: other requirements for existing files such as .gitignore or application.
@@ -89,6 +92,24 @@ module ReactOnRails
 
         File.chmod(0o755, *files_to_become_excutable)
       end
+
+      def add_post_install_message
+        message = GeneratorMessages.helpful_message_after_installation
+        unless using_shakapacker_7?
+          message = message.gsub("config/shakapacker", "config/webpacker")
+          message = message.gsub("bin/shakapacker", "bin/webpacker")
+        end
+
+        GeneratorMessages.add_info(message)
+      end
+
+      def using_shakapacker_7?
+        shakapacker_gem = Gem::Specification.find_by_name("shakapacker")
+        shakapacker_gem.version.segments.first == 7
+      rescue Gem::MissingSpecError
+        # In case using Webpacker
+        false
+      end
     end
   end
 end

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

@@ -1,5 +1,5 @@
 # Procfile for development using HMR
 # You can run these commands in separate shells
 rails: bundle exec rails s -p 3000
-wp-client: bin/webpacker-dev-server
-wp-server: SERVER_BUNDLE_ONLY=yes bin/webpacker --watch
+wp-client: bin/shakapacker-dev-server
+wp-server: SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

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

@@ -5,5 +5,5 @@ web: rails s -p 3000
 # 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/webpacker
-webpack: sh -c 'rm -rf public/packs/* || true && bin/webpacker -w'
+# `bundle exec rake react_on_rails:locale` before you run bin/shakapacker
+webpack: sh -c 'rm -rf public/packs/* || true && bin/shakapacker -w'

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

@@ -24,8 +24,8 @@ ReactOnRails.configure do |config|
   # to automatically refresh your webpack assets on every test run.
   #
   # Alternately, you can remove the `ReactOnRails::TestHelper.configure_rspec_to_compile_assets`
-  # and set the config/webpacker.yml option for test to true.
-  config.build_test_command = "RAILS_ENV=test bin/webpacker"
+  # and set the config/shakapacker.yml option for test to true.
+  config.build_test_command = "RAILS_ENV=test bin/shakapacker"
 
   ################################################################################
   ################################################################################

data/lib/generators/react_on_rails/templates/base/base/config/{webpacker.yml → shakapacker.yml}

@@ -1,11 +1,11 @@
-# Note: You must restart bin/webpacker-dev-server for changes to take effect
+# Note: You must restart bin/shakapacker-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
+  cache_path: tmp/shakapacker
   webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
@@ -17,7 +17,7 @@ default: &default
 
 development:
   <<: *default
-  # This is false since we're running `bin/webpacker -w` in Procfile.dev-setic
+  # This is false since we're running `bin/shakapacker -w` in Procfile.dev-setic
   compile: false
 
   # Reference: https://webpack.js.org/configuration/dev-server/

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

@@ -1,7 +1,9 @@
 <%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/config/webpack/commonWebpackConfig.js") %>
 
 // Common configuration applying to client and server configuration
-const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');
+const { generateWebpackConfig, merge } = require('shakapacker');
+
+const baseClientWebpackConfig = generateWebpackConfig();
 
 const commonOptions = {
   resolve: {