Update to React on Rails v9 per CHANGELOG (#416)

See React on Rails Changelog for upgrade instructions.

.gitignore

@@ -28,6 +28,7 @@ vendor/ruby
 
 # Generated js bundles
 /public/webpack/
+/public/webpack-test/
 
 # Rubymine/IntelliJ
 .idea

Gemfile

@@ -1,12 +1,12 @@
 source "https://rubygems.org"
 ruby "2.4.1"
 
-gem "react_on_rails", "8.0.6.rc.1"
-gem "webpacker_lite", "2.1.0"
+gem "react_on_rails", "9.0.0.rc.0"
+gem "webpacker"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"
 gem "listen"
-gem "rails", "5.0.3"
+gem "rails", "~> 5"
 
 # Note: We're using sqllite3 for development and testing
 # gem "sqlite3", group: [:development, :test]

Gemfile.lock

@@ -1,39 +1,39 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (5.0.3)
-      actionpack (= 5.0.3)
-      nio4r (>= 1.2, < 3.0)
+    actioncable (5.1.3)
+      actionpack (= 5.1.3)
+      nio4r (~> 2.0)
       websocket-driver (~> 0.6.1)
-    actionmailer (5.0.3)
-      actionpack (= 5.0.3)
-      actionview (= 5.0.3)
-      activejob (= 5.0.3)
+    actionmailer (5.1.3)
+      actionpack (= 5.1.3)
+      actionview (= 5.1.3)
+      activejob (= 5.1.3)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (5.0.3)
-      actionview (= 5.0.3)
-      activesupport (= 5.0.3)
+    actionpack (5.1.3)
+      actionview (= 5.1.3)
+      activesupport (= 5.1.3)
       rack (~> 2.0)
       rack-test (~> 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (5.0.3)
-      activesupport (= 5.0.3)
+    actionview (5.1.3)
+      activesupport (= 5.1.3)
       builder (~> 3.1)
-      erubis (~> 2.7.0)
+      erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.3)
-    activejob (5.0.3)
-      activesupport (= 5.0.3)
+    activejob (5.1.3)
+      activesupport (= 5.1.3)
       globalid (>= 0.3.6)
-    activemodel (5.0.3)
-      activesupport (= 5.0.3)
-    activerecord (5.0.3)
-      activemodel (= 5.0.3)
-      activesupport (= 5.0.3)
-      arel (~> 7.0)
-    activesupport (5.0.3)
+    activemodel (5.1.3)
+      activesupport (= 5.1.3)
+    activerecord (5.1.3)
+      activemodel (= 5.1.3)
+      activesupport (= 5.1.3)
+      arel (~> 8.0)
+    activesupport (5.1.3)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (~> 0.7)
       minitest (~> 5.1)
@@ -42,7 +42,7 @@ GEM
       public_suffix (~> 2.0, >= 2.0.2)
     archive-zip (0.7.0)
       io-like (~> 0.3.0)
-    arel (7.1.4)
+    arel (8.0.0)
     ast (2.3.0)
     autoprefixer-rails (6.7.7.1)
       execjs
@@ -95,7 +95,7 @@ GEM
     debug_inspector (0.0.2)
     diff-lcs (1.3)
     docile (1.1.5)
-    erubis (2.7.0)
+    erubi (1.6.1)
     execjs (2.7.0)
     factory_girl (4.8.0)
       activesupport (>= 3.0.0)
@@ -135,7 +135,7 @@ GEM
     mini_portile2 (2.2.0)
     mini_racer (0.1.9)
       libv8 (~> 5.3)
-    minitest (5.10.2)
+    minitest (5.10.3)
     multi_json (1.12.1)
     nio4r (2.1.0)
     nokogiri (1.8.0)
@@ -169,28 +169,30 @@ GEM
     public_suffix (2.0.5)
     puma (3.8.2)
     rack (2.0.3)
+    rack-proxy (0.6.2)
+      rack
     rack-test (0.6.3)
       rack (>= 1.0)
-    rails (5.0.3)
-      actioncable (= 5.0.3)
-      actionmailer (= 5.0.3)
-      actionpack (= 5.0.3)
-      actionview (= 5.0.3)
-      activejob (= 5.0.3)
-      activemodel (= 5.0.3)
-      activerecord (= 5.0.3)
-      activesupport (= 5.0.3)
-      bundler (>= 1.3.0, < 2.0)
-      railties (= 5.0.3)
+    rails (5.1.3)
+      actioncable (= 5.1.3)
+      actionmailer (= 5.1.3)
+      actionpack (= 5.1.3)
+      actionview (= 5.1.3)
+      activejob (= 5.1.3)
+      activemodel (= 5.1.3)
+      activerecord (= 5.1.3)
+      activesupport (= 5.1.3)
+      bundler (>= 1.3.0)
+      railties (= 5.1.3)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.0.3)
       loofah (~> 2.0)
-    railties (5.0.3)
-      actionpack (= 5.0.3)
-      activesupport (= 5.0.3)
+    railties (5.1.3)
+      actionpack (= 5.1.3)
+      activesupport (= 5.1.3)
       method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
@@ -201,7 +203,7 @@ GEM
     rb-inotify (0.9.8)
       ffi (>= 0.5.0)
     rdoc (4.3.0)
-    react_on_rails (8.0.6.rc.1)
+    react_on_rails (9.0.0.rc.0)
       addressable
       connection_pool
       execjs (~> 2.5)
@@ -269,7 +271,7 @@ GEM
     sprockets (3.7.1)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    sprockets-rails (3.2.0)
+    sprockets-rails (3.2.1)
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
@@ -289,9 +291,9 @@ GEM
       activemodel (>= 5.0)
       bindex (>= 0.4.0)
       railties (>= 5.0)
-    webpacker_lite (2.1.0)
+    webpacker (3.0.1)
       activesupport (>= 4.2)
-      multi_json (~> 1.2)
+      rack-proxy (>= 0.6.1)
       railties (>= 4.2)
     websocket (1.2.4)
     websocket-driver (0.6.5)
@@ -332,10 +334,10 @@ DEPENDENCIES
   pry-rescue
   pry-stack_explorer
   puma
-  rails (= 5.0.3)
+  rails (~> 5)
   rails-html-sanitizer
   rainbow
-  react_on_rails (= 8.0.6.rc.1)
+  react_on_rails (= 9.0.0.rc.0)
   redis
   rspec-rails (~> 3.6)
   rspec-retry
@@ -349,10 +351,10 @@ DEPENDENCIES
   spring-commands-rspec
   uglifier
   web-console
-  webpacker_lite (= 2.1.0)
+  webpacker
 
 RUBY VERSION
    ruby 2.4.1p111
 
 BUNDLED WITH
-   1.15.1
+   1.15.4

client/package.json

@@ -83,7 +83,7 @@
     "react-bootstrap": "^0.31.2",
     "react-dom": "^15.6.1",
     "react-intl": "^2.3.0",
-    "react-on-rails": "^8.0.6-rc.1",
+    "react-on-rails": "^9.0.0-rc.0",
     "react-redux": "^5.0.5",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",

client/server-rails-hot.js

@@ -11,7 +11,11 @@ const { resolve } = require('path');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
 
 const configPath = resolve('..', 'config');
-const { hotReloadingUrl, hotReloadingPort, hotReloadingHostname } = webpackConfigLoader(configPath);
+const { output, settings } = webpackConfigLoader(configPath);
+
+const hotReloadingUrl = output.publicPathWithHost;
+const hotReloadingPort = settings.dev_server.port;
+const hotReloadingHostname = settings.dev_server.host;
 
 const compiler = webpack(webpackConfig);
 

client/webpack.client.base.config.js

@@ -8,7 +8,7 @@ const { resolve } = require('path');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
 
 const configPath = resolve('..', 'config');
-const { manifest } = webpackConfigLoader(configPath);
+const { output } = webpackConfigLoader(configPath);
 
 const devBuild = process.env.NODE_ENV !== 'production';
 
@@ -68,7 +68,7 @@ module.exports = {
       },
     }),
     new ManifestPlugin({
-      fileName: manifest,
+      publicPath: output.publicPath,
       writeToFileEmit: true
     }),
   ],

client/webpack.client.rails.build.config.js

@@ -12,7 +12,7 @@ const { resolve } = require('path');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
 
 const configPath = resolve('..', 'config');
-const { webpackOutputPath, webpackPublicOutputDir } = webpackConfigLoader(configPath);
+const { output } = webpackConfigLoader(configPath);
 
 const devBuild = process.env.NODE_ENV !== 'production';
 
@@ -34,11 +34,10 @@ module.exports = merge(config, {
   },
 
   output: {
-    filename: '[name]-[hash].js',
-
-    // Leading and trailing slashes ARE necessary.
-    publicPath: `/${webpackPublicOutputDir}/`,
-    path: webpackOutputPath,
+    filename: '[name]-[chunkhash].js',
+    chunkFilename: '[name]-[chunkhash].chunk.js',
+    publicPath: output.publicPath,
+    path: output.path,
   },
 
   // See webpack.client.base.config for adding modules common to both webpack dev server and rails

client/webpack.client.rails.hot.config.js

@@ -13,7 +13,8 @@ const config = require('./webpack.client.base.config');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
 
 const configPath = resolve('..', 'config');
-const { hotReloadingUrl, webpackOutputPath } = webpackConfigLoader(configPath);
+const { output } = webpackConfigLoader(configPath);
+const hotReloadingUrl = output.publicPathWithHost;
 
 module.exports = merge(config, {
   devtool: 'eval-source-map',
@@ -32,8 +33,10 @@ module.exports = merge(config, {
   },
 
   output: {
-    filename: '[name].js',
-    path: webpackOutputPath,
+    filename: '[name]-[hash].js',
+    chunkFilename: '[name]-[chunkhash].chunk.js',
+    publicPath: output.publicPath,
+    path: output.path,
   },
 
   module: {

client/webpack.server.rails.build.config.js

@@ -10,7 +10,7 @@ const webpack = require('webpack');
 const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
 
 const configPath = resolve('..', 'config');
-const { webpackOutputPath, webpackPublicOutputDir } = webpackConfigLoader(configPath);
+const { output } = webpackConfigLoader(configPath);
 
 const devBuild = process.env.NODE_ENV !== 'production';
 
@@ -29,9 +29,8 @@ module.exports = {
     // since it's not cached by the browsers.
     filename: 'server-bundle.js',
 
-    // Leading and trailing slashes ARE necessary.
-    publicPath: `/${webpackPublicOutputDir}/`,
-    path: webpackOutputPath,
+    publicPath: output.publicPath,
+    path: output.path,
   },
   resolve: {
     extensions: ['.js', '.jsx'],

client/yarn.lock

@@ -2680,6 +2680,10 @@ hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
 
+hoist-non-react-statics@^2.2.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -4680,9 +4684,12 @@ react-intl@^2.3.0:
     intl-relativeformat "^1.3.0"
     invariant "^2.1.1"
 
-react-on-rails@^8.0.6-rc.1:
-  version "8.0.6-rc.1"
-  resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-8.0.6-rc.1.tgz#6326e2b431351f9a9976bbf6a59b5e5b2fabd91d"
+react-on-rails@^9.0.0-beta.12, react-on-rails@^9.0.0-rc.0:
+  version "9.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-9.0.0-rc.0.tgz#5b62bfe1f5cf99c428b0daa02de492a66c33c58e"
+  dependencies:
+    react-on-rails "^9.0.0-beta.12"
+    react-redux "^5.0.6"
 
 react-overlays@^0.7.0:
   version "0.7.0"
@@ -4719,6 +4726,17 @@ react-redux@^5.0.5:
     loose-envify "^1.1.0"
     prop-types "^15.5.10"
 
+react-redux@^5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946"
+  dependencies:
+    hoist-non-react-statics "^2.2.1"
+    invariant "^2.0.0"
+    lodash "^4.2.0"
+    lodash-es "^4.2.0"
+    loose-envify "^1.1.0"
+    prop-types "^15.5.10"
+
 react-router-dom@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.2.tgz#7f8a7ca868d32acadd19ca09543b40d26df8ec37"

config/initializers/react_on_rails.rb

@@ -1,5 +1,7 @@
 # Shown below are the defaults for configuration
 ReactOnRails.configure do |config|
+  config.node_modules_location = "client"
+
   # Directory where your generated assets go. All generated assets must go to the same directory.
   # Configure this in your webpack config files. This relative to your Rails root directory.
   config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
@@ -17,11 +19,11 @@
   # If you are using the ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
   # with rspec then this controls what npm command is run
   # to automatically refresh your webpack assets on every test run.
-  config.npm_build_test_command = "yarn run build:test"
+  config.build_test_command = "yarn run build:test"
 
   # 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.
-  config.npm_build_production_command = "yarn run build:production"
+  config.build_production_command = "yarn run build:production"
 
   ################################################################################
   # CLIENT RENDERING OPTIONS