Upgrade to rails/webpacker v6 (#9)

* Upgrade to rails/webpacker v6 * Refactored code to use new merge capabilities of webpacker v6 * Updated to webpacker v6.beta.7 and React on Rails 12.2.0 Co-authored-by: Judah Meek <[email protected]>
shakacode · May 11, 2021 · 04b3c7f · 04b3c7f
1 parent 1f99714
commit 04b3c7f
Show file tree

Hide file tree

Showing 17 changed files with 1,466 additions and 3,598 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby '2.7.2'
+ruby '2.7.3'
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '~> 6.0.3', '>= 6.0.3.1'
@@ -47,8 +47,8 @@ end
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
-gem "webpacker", "~> 5.2"
+gem "webpacker", "6.0.0.beta.7"
 
-gem "react_on_rails", "12.0.3"
+gem "react_on_rails", "12.2.0"
 
 gem 'mini_racer', platforms: :ruby
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,56 +1,56 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (6.0.3.4)
-      actionpack (= 6.0.3.4)
+    actioncable (6.0.3.6)
+      actionpack (= 6.0.3.6)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.0.3.4)
-      actionpack (= 6.0.3.4)
-      activejob (= 6.0.3.4)
-      activerecord (= 6.0.3.4)
-      activestorage (= 6.0.3.4)
-      activesupport (= 6.0.3.4)
+    actionmailbox (6.0.3.6)
+      actionpack (= 6.0.3.6)
+      activejob (= 6.0.3.6)
+      activerecord (= 6.0.3.6)
+      activestorage (= 6.0.3.6)
+      activesupport (= 6.0.3.6)
       mail (>= 2.7.1)
-    actionmailer (6.0.3.4)
-      actionpack (= 6.0.3.4)
-      actionview (= 6.0.3.4)
-      activejob (= 6.0.3.4)
+    actionmailer (6.0.3.6)
+      actionpack (= 6.0.3.6)
+      actionview (= 6.0.3.6)
+      activejob (= 6.0.3.6)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (6.0.3.4)
-      actionview (= 6.0.3.4)
-      activesupport (= 6.0.3.4)
+    actionpack (6.0.3.6)
+      actionview (= 6.0.3.6)
+      activesupport (= 6.0.3.6)
       rack (~> 2.0, >= 2.0.8)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.0.3.4)
-      actionpack (= 6.0.3.4)
-      activerecord (= 6.0.3.4)
-      activestorage (= 6.0.3.4)
-      activesupport (= 6.0.3.4)
+    actiontext (6.0.3.6)
+      actionpack (= 6.0.3.6)
+      activerecord (= 6.0.3.6)
+      activestorage (= 6.0.3.6)
+      activesupport (= 6.0.3.6)
       nokogiri (>= 1.8.5)
-    actionview (6.0.3.4)
-      activesupport (= 6.0.3.4)
+    actionview (6.0.3.6)
+      activesupport (= 6.0.3.6)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (6.0.3.4)
-      activesupport (= 6.0.3.4)
+    activejob (6.0.3.6)
+      activesupport (= 6.0.3.6)
       globalid (>= 0.3.6)
-    activemodel (6.0.3.4)
-      activesupport (= 6.0.3.4)
-    activerecord (6.0.3.4)
-      activemodel (= 6.0.3.4)
-      activesupport (= 6.0.3.4)
-    activestorage (6.0.3.4)
-      actionpack (= 6.0.3.4)
-      activejob (= 6.0.3.4)
-      activerecord (= 6.0.3.4)
-      marcel (~> 0.3.1)
-    activesupport (6.0.3.4)
+    activemodel (6.0.3.6)
+      activesupport (= 6.0.3.6)
+    activerecord (6.0.3.6)
+      activemodel (= 6.0.3.6)
+      activesupport (= 6.0.3.6)
+    activestorage (6.0.3.6)
+      actionpack (= 6.0.3.6)
+      activejob (= 6.0.3.6)
+      activerecord (= 6.0.3.6)
+      marcel (~> 1.0.0)
+    activesupport (6.0.3.6)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
@@ -59,105 +59,105 @@ GEM
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
     bindex (0.8.1)
-    bootsnap (1.5.1)
+    bootsnap (1.7.4)
       msgpack (~> 1.0)
     builder (3.2.4)
     byebug (11.1.3)
-    capybara (3.33.0)
+    capybara (3.35.3)
       addressable
       mini_mime (>= 0.1.3)
       nokogiri (~> 1.8)
       rack (>= 1.6.0)
       rack-test (>= 0.6.3)
-      regexp_parser (~> 1.5)
+      regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
     childprocess (3.0.0)
-    concurrent-ruby (1.1.7)
-    connection_pool (2.2.3)
+    concurrent-ruby (1.1.8)
+    connection_pool (2.2.5)
     crass (1.0.6)
-    erubi (1.9.0)
+    erubi (1.10.0)
     execjs (2.7.0)
-    ffi (1.13.1)
+    ffi (1.15.0)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
-    i18n (1.8.5)
+    i18n (1.8.10)
       concurrent-ruby (~> 1.0)
-    jbuilder (2.10.1)
+    jbuilder (2.11.2)
       activesupport (>= 5.0.0)
-    libv8 (8.4.255.0)
-    listen (3.3.0)
+    libv8-node (15.14.0.0)
+    listen (3.5.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.7.0)
+    loofah (2.9.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
-    marcel (0.3.3)
-      mimemagic (~> 0.3.2)
+    marcel (1.0.1)
     method_source (1.0.0)
-    mimemagic (0.3.5)
-    mini_mime (1.0.2)
-    mini_portile2 (2.4.0)
-    mini_racer (0.3.1)
-      libv8 (~> 8.4.255)
-    minitest (5.14.2)
-    msgpack (1.3.3)
-    nio4r (2.5.4)
-    nokogiri (1.10.10)
-      mini_portile2 (~> 2.4.0)
+    mini_mime (1.1.0)
+    mini_portile2 (2.5.0)
+    mini_racer (0.4.0)
+      libv8-node (~> 15.14.0.0)
+    minitest (5.14.4)
+    msgpack (1.4.2)
+    nio4r (2.5.7)
+    nokogiri (1.11.3)
+      mini_portile2 (~> 2.5.0)
+      racc (~> 1.4)
     public_suffix (4.0.6)
-    puma (4.3.6)
+    puma (4.3.7)
       nio4r (~> 2.0)
+    racc (1.5.2)
     rack (2.2.3)
     rack-proxy (0.6.5)
       rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
-    rails (6.0.3.4)
-      actioncable (= 6.0.3.4)
-      actionmailbox (= 6.0.3.4)
-      actionmailer (= 6.0.3.4)
-      actionpack (= 6.0.3.4)
-      actiontext (= 6.0.3.4)
-      actionview (= 6.0.3.4)
-      activejob (= 6.0.3.4)
-      activemodel (= 6.0.3.4)
-      activerecord (= 6.0.3.4)
-      activestorage (= 6.0.3.4)
-      activesupport (= 6.0.3.4)
+    rails (6.0.3.6)
+      actioncable (= 6.0.3.6)
+      actionmailbox (= 6.0.3.6)
+      actionmailer (= 6.0.3.6)
+      actionpack (= 6.0.3.6)
+      actiontext (= 6.0.3.6)
+      actionview (= 6.0.3.6)
+      activejob (= 6.0.3.6)
+      activemodel (= 6.0.3.6)
+      activerecord (= 6.0.3.6)
+      activestorage (= 6.0.3.6)
+      activesupport (= 6.0.3.6)
       bundler (>= 1.3.0)
-      railties (= 6.0.3.4)
+      railties (= 6.0.3.6)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.3.0)
       loofah (~> 2.3)
-    railties (6.0.3.4)
-      actionpack (= 6.0.3.4)
-      activesupport (= 6.0.3.4)
+    railties (6.0.3.6)
+      actionpack (= 6.0.3.6)
+      activesupport (= 6.0.3.6)
       method_source
       rake (>= 0.8.7)
       thor (>= 0.20.3, < 2.0)
     rainbow (3.0.0)
-    rake (13.0.1)
+    rake (13.0.3)
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    react_on_rails (12.0.3)
+    react_on_rails (12.2.0)
       addressable
       connection_pool
       execjs (~> 2.5)
       rails (>= 3.2)
       rainbow (~> 3.0)
       webpacker (>= 4.0)
-    regexp_parser (1.8.2)
+    regexp_parser (2.1.1)
     rubyzip (2.3.0)
     selenium-webdriver (3.142.7)
       childprocess (>= 0.5, < 4.0)
       rubyzip (>= 1.2.2)
-    semantic_range (2.3.0)
+    semantic_range (3.0.0)
     spring (2.1.1)
     spring-watcher-listen (2.0.1)
       listen (>= 2.7, < 4.0)
@@ -170,20 +170,20 @@ GEM
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
     sqlite3 (1.4.2)
-    thor (1.0.1)
+    thor (1.1.0)
     thread_safe (0.3.6)
-    tzinfo (1.2.8)
+    tzinfo (1.2.9)
       thread_safe (~> 0.1)
     web-console (4.1.0)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    webdrivers (4.4.1)
+    webdrivers (4.6.0)
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (>= 3.0, < 4.0)
-    webpacker (5.2.1)
+    webpacker (6.0.0.beta.7)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -193,7 +193,7 @@ GEM
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.4.1)
+    zeitwerk (2.4.2)
 
 PLATFORMS
   ruby
@@ -207,18 +207,18 @@ DEPENDENCIES
   mini_racer
   puma (~> 4.1)
   rails (~> 6.0.3, >= 6.0.3.1)
-  react_on_rails (= 12.0.3)
+  react_on_rails (= 12.2.0)
   selenium-webdriver
   spring
   spring-watcher-listen (~> 2.0.0)
   sqlite3 (~> 1.4)
   tzinfo-data
   web-console (>= 3.3.0)
   webdrivers
-  webpacker (~> 5.2)
+  webpacker (= 6.0.0.beta.7)
 
 RUBY VERSION
-   ruby 2.7.2p137
+   ruby 2.7.3p183
 
 BUNDLED WITH
-   2.1.4
+   2.2.14
diff --git a/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css b/app/javascript/bundles/HelloWorld/components/HelloWorld.module.css
@@ -0,0 +1,3 @@
+.bold {
+    color: green;
+}
diff --git a/app/javascript/bundles/HelloWorld/components/HelloWorld.tsx b/app/javascript/bundles/HelloWorld/components/HelloWorld.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react'
 import { useState, FunctionComponent } from 'react'
+// @ts-ignore
+import style from './HelloWorld.module.css'
 
 export interface Props {
   name: string
@@ -15,7 +17,7 @@ const HelloWorld: FunctionComponent<Props> = (props: Props) => {
       <h3>Hello, {name}!</h3>
       <hr />
       <form>
-        <label htmlFor="name">
+        <label className={style.bold} htmlFor="name">
           Say hello to:
           <input
             id="name"

diff --git a/app/views/layouts/hello_world.html.erb b/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>

diff --git a/config/webpack/clientWebpackConfig.js b/config/webpack/clientWebpackConfig.js
@@ -0,0 +1,15 @@
+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
diff --git a/config/webpack/clientWebpackConfiguration.js b/config/webpack/clientWebpackConfiguration.js