react_on_rails 12.4.0 → 13.0.0

data/docs/guides/tutorial.md

@@ -4,7 +4,7 @@
 
 -----
 
-*Updated for Ruby 2.7.1, Rails 6.0.3.1, and React on Rails v12.0.0*
+*Updated for Ruby 2.7.1, Rails 6.0.3.1, React on Rails v12.5.0, and Shakapacker v6*
 
 This tutorial guides you through setting up a new or existing Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
 
@@ -21,18 +21,16 @@ By the time you read this, the latest may have changed. Be sure to check the ver
 * https://rubygems.org/gems/react_on_rails
 * https://www.npmjs.com/package/react-on-rails
 
-_Note: some of the screen images below show the "npm" command. react_on_rails 6.6.0 and greater uses `yarn`._
-
 ## Setting up your environment
 
-Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 13+. I recommend `rvm` and `nvm` to install Ruby and Node, and [brew](https://brew.sh/) to install [yarn](https://yarnpkg.com/en/docs/install#mac-tab). Rails can be installed as an ordinary gem.
+Trying out **React on Rails** is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 6.x and node version 14+. I recommend `rvm` or `rbevn` and `nvm` to install Ruby and Node. Rails can be installed as an ordinary gem.
 
 ```
 nvm install node                # download and install latest stable Node
 nvm alias default node          # make it default version
 nvm list                        # check
 
-brew install yarn               # you can use other installer if desired
+brew install yarn               # you can use other installer if desired, such as yvm
 rvm install 2.7                 # download and install latest stable Ruby (update to exact version)
 rvm use 2.7 --default           # use it and make it default
 rvm list                        # check
@@ -42,46 +40,41 @@ gem install foreman             # download and install Foreman
 ```
 
 ## Create a new Ruby on Rails App
-Then we need to create a fresh Rails application with webpacker react support as following.
+Then we need to create a fresh Rails application as following.
 
 First be sure to run `rails -v` and check you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with react per the instructions [here](https://github.com/rails/webpacker).
 
-```
+```bash
 cd <directory where you want to create your new Rails app>
 
 # Any name you like for the rails app
 # Skip javascript so will add that next and get the current version
-rails new --skip-sprockets -J --skip-turbolinks test-react-on-rails-v12-no-sprockets
+rails new --skip-turbolinks --skip-javascript test-react-on-rails
 
 cd test-react-on-rails
-bundle
 ```
 
-## Add the webpacker and react_on_rails gems
+## Add the shakapacker and react_on_rails gems
 To avoid issues regarding inconsistent gem and npm versions, you should specify the exact versions
 of both the gem and npm package. In other words, don't use the `^` or `~` in the version specifications.
-_Use the latest version for react_on_rails._
+_Use the latest version for `react_on_rails` and `shakapacker`._
 
 ```
-gem 'react_on_rails', '12.0.4'         # prefer exact gem version to match npm version
+gem 'react_on_rails', '13.0.0'         # prefer exact gem version to match npm version
+gem 'shakapacker', '6.1.1'             # prefer exact gem version to match npm version
+
 ```
 
 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.
 
-```bash
-bundle add webpacker                 
-bundle add react_on_rails --version=12.0.4 --strict
-```
+## Run the webpacker (shakapacker) generator
 
-## Run the webpacker generator
-
-```
+```terminal
 bundle exec rails webpacker:install
-bundle exec rails webpacker:install:react
 ```
 
-Let's commit everything before installing React on Rails.
+**Let's commit everything before installing React on Rails.**
 
 ```
 # Here are git commands to make a new git repo and commit everything.
@@ -97,20 +90,25 @@ Install React on Rails: `rails generate react_on_rails:install`. You need to fir
 Note, using `redux` is no longer recommended as the basic installer uses React Hooks.
 If you want the redux install: `rails generate react_on_rails:install --redux`
 
+The generator will add `mini_racer`'s latest version. If you're using linux & encounter issues installing `libv8`, here's [a common solution](https://github.com/rubyjs/mini_racer/issues/218).
+
 ```
-rails generate react_on_rails:install
+bundle exec rails generate react_on_rails:install
 ```
 
-Then run server with a static client bundle. Static means that the bundle is saved in your
-public/webpack/packs directory.
+Enter `a` to replace all configuration files required by the project. You can check the diffs
+before you commit to see what changed.
 
+Then run the server with one of the following options:
+
+## Running with HMR
 ```
 foreman start -f Procfile.dev
 ```
 
-## To run with the webpack-dev-server:
+## Running without HMR, statically creating the bundles
 ```
-foreman start -f Procfile.dev-hmr
+foreman start -f Procfile.dev-static
 ```
 
 Visit [http://localhost:3000/hello_world](http://localhost:3000/hello_world) and see your **React On Rails** app running!
@@ -250,6 +248,8 @@ heroku open
 
 and you will see your live app and you can share this URL with your friends. Congrats!
 
+A deployed version of the project `spec/dummy` which demonstrates several uses of `react_on_rails` is available on heroku [through this link](https://ror-spec-dummy.herokuapp.com/)
+
 ## Turning on Server Rendering
 
 You can turn on server rendering by simply changing the `prerender` option to `true`:
@@ -312,7 +312,7 @@ mv app/javascript client
 
 ## Using HMR with the rails/webpacker setup
 
-Start the app using `foreman start -f Procfile.dev-hmr`.
+Start the app using `foreman start -f Procfile.dev`.
 
 When you change a JSX file and save, the browser will automatically refresh!
 

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

@@ -5,6 +5,21 @@ If you would like help in migrating between React on Rails versions or help with
 
 We specialize in helping companies to quickly and efficiently upgrade. The older versions use the Rails asset pipeline to package client assets. The current and recommended way is to use Webpack 4+ for asset preparation. You may also need help migrating from the `rails/webpacker`'s Webpack configuration to a better setup ready for Server Side Rendering.
 
+## Upgrading to v13
+
+### Breaking Change
+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)
+
+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.
+
 ## Upgrading to v12
 ### Recent versions
 Make sure that you are on a relatively more recent version of rails and webpacker. Yes, the [rails/webpacker](https://github.com/rails/webpacker) gem is required!

data/docs/guides/webpack-configuration.md

@@ -33,7 +33,7 @@ Until version 9, all React on Rails apps used the `/client` directory for config
 You can access values in the `config/webpacker.yml`
 
 ```js
-const { config, devServer } = require('@rails/webpacker');
+const { config, devServer } = require('shakapacker');
 ```
 
 You will want consider using some of the same values set in these files:

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

@@ -4,7 +4,7 @@
   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/webpack` and make sure there are zero errors
+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/webpack and bin/webpacker match the latest on
+5. Make sure that your bin/webpacker and bin/webpacker match the latest on
 https://github.com/rails/webpacker/tree/master/lib/install/bin

data/lib/generators/react_on_rails/base_generator.rb

@@ -33,7 +33,42 @@ 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/test.js
+                        config/webpack/development.js
+                        config/webpack/production.js
+                        config/webpack/serverWebpackConfig.js
+                        config/webpack/webpack.config.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 +86,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
@@ -93,28 +138,28 @@ module ReactOnRails
 
           What to do next:
 
-            - See the documentation on https://github.com/rails/webpacker/blob/master/docs/webpack.md
+            - 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' %>
 
-            - Run `rails s` to start the Rails server and use Webpacker's default lazy compilation.
+            - Run `rails s` to start the Rails server.
 
-            - Visit http://localhost:3000/hello_world and see your React On Rails app running!
-
-            - Run bin/webpack-dev-server to start the Webpack dev server for compilation of Webpack
+            - 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
 
-            - 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.
+            - Visit http://localhost:3000/hello_world and see your React On Rails app running!
+
+            - Alternately, 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/webpacker-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").

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/webpacker-dev-server
+wp-server: HMR=true SERVER_BUNDLE_ONLY=yes bin/webpacker --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/webpacker
+webpack: sh -c 'rm -rf public/packs/* || true && bin/webpacker -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,32 @@
+<%= add_documentation_reference(config[:message], "// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/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 changesOnDefault = {
+    presets: [
+      [
+        '@babel/preset-react',
+        {
+          development: !isProductionEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      process.env.WEBPACK_SERVE && 'react-refresh/babel',
+      isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean),
+  }
+
+  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
+
+  return resultConfig
+}

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

@@ -6,7 +6,7 @@
 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 rails/webpacker assets:precompile will run
+  # If nil, then the standard shakacode/shakapacker assets:precompile will run
   # config.build_production_command = nil
 
   ################################################################################
@@ -25,7 +25,7 @@ ReactOnRails.configure do |config|
   #
   # 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/webpack"
+  config.build_test_command = "RAILS_ENV=test bin/webpacker"
 
   ################################################################################
   ################################################################################
@@ -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('shakapacker');
+
+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,25 @@
+<%= 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") %>
+
+const { devServer, inliningCss } = require('shakapacker');
+
+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,9 @@
+<%= 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") %>
+
+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('shakapacker');
+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/test.js.tt

@@ -0,0 +1,6 @@
+<%= 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") %>
+
+// Use dev
+const config = require('./development');
+
+module.exports = config;

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

@@ -0,0 +1,15 @@
+const { env } = require('shakapacker')
+const { existsSync } = require('fs')
+const { resolve } = require('path')
+
+const envSpecificConfig = () => {
+  const path = resolve(__dirname, `${env.nodeEnv}.js`)
+  if (existsSync(path)) {
+    console.log(`Loading ENV specific webpack configuration file ${path}`)
+    return require(path)
+  } else {
+    throw new Error(`Could not find file to load ${path}, based on NODE_ENV`)
+  }
+}
+
+module.exports = envSpecificConfig()