Enable CSS Modules and Hot Reloading

Update to include:
rails/webpacker#3031

Check if inlining CSS before doing hot refresh

We can only use the ReactRefreshWebpackPlugin if the server is running
and doing HMR, which is what the inliningCss does.

Gemfile

@@ -22,7 +22,7 @@ gem 'jbuilder', '~> 2.7'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', '>= 1.4.2', require: false
 
-group :development, :test do
+group :development, :test, :production do
   # Call 'byebug' anywhere in the code to stop execution and get a debugger console
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
 end
@@ -47,8 +47,7 @@ end
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
 
-gem "webpacker", "6.0.0.beta.7"
-
+gem "webpacker", github: "rails/webpacker"
 gem "react_on_rails", "12.2.0"
 
 gem 'mini_racer', platforms: :ruby

Gemfile.lock

@@ -1,3 +1,13 @@
+GIT
+  remote: https://github.com/rails/webpacker.git
+  revision: 032c2d11a3758035305fe34e6795ab133128ee32
+  specs:
+    webpacker (6.0.0.beta.7)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -72,7 +82,7 @@ GEM
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
     childprocess (3.0.0)
-    concurrent-ruby (1.1.8)
+    concurrent-ruby (1.1.9)
     connection_pool (2.2.5)
     crass (1.0.6)
     erubi (1.10.0)
@@ -88,29 +98,29 @@ GEM
     listen (3.5.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.9.1)
+    loofah (2.10.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
     marcel (1.0.1)
     method_source (1.0.0)
     mini_mime (1.1.0)
-    mini_portile2 (2.5.0)
+    mini_portile2 (2.5.3)
     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)
+    nokogiri (1.11.7)
       mini_portile2 (~> 2.5.0)
       racc (~> 1.4)
     public_suffix (4.0.6)
     puma (4.3.7)
       nio4r (~> 2.0)
     racc (1.5.2)
     rack (2.2.3)
-    rack-proxy (0.6.5)
+    rack-proxy (0.7.0)
       rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
@@ -183,11 +193,6 @@ GEM
       nokogiri (~> 1.6)
       rubyzip (>= 1.3.0)
       selenium-webdriver (>= 3.0, < 4.0)
-    webpacker (6.0.0.beta.7)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.3)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -215,7 +220,7 @@ DEPENDENCIES
   tzinfo-data
   web-console (>= 3.3.0)
   webdrivers
-  webpacker (= 6.0.0.beta.7)
+  webpacker!
 
 RUBY VERSION
    ruby 2.7.3p183

config/webpack/development.js

@@ -2,7 +2,7 @@ process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const path = require('path')
-const { devServer } = require('@rails/webpacker')
+const { devServer, inliningCss } = require('@rails/webpacker')
 
 const webpackConfig = require('./webpackConfig')
 
@@ -11,13 +11,13 @@ const developmentEnvOnly = (clientWebpackConfig, serverWebpackConfig) => {
   const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER
 
   //plugins
-  if (isWebpackDevServer) {
+  if (inliningCss ) {
     // Note, when this is run, we're building the server and client bundles in separate processes.
     // Thus, this plugin is not applied.
     const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
     clientWebpackConfig.plugins.push(
       new ReactRefreshWebpackPlugin({
-        overlay: {
+        overlay:{
           sockPort: devServer.port
         }
       })

config/webpacker.yml

@@ -27,8 +27,6 @@ development:
     public: localhost:3035
     # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: true
-    # Inline should be set to true if using HMR; it inserts a script to take care of live reloading
-    inline: true
     # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
     overlay: true
     # Should we use gzip compression?
@@ -40,7 +38,7 @@ development:
     # When enabled, nothing except the initial startup information will be written to the console.
     # This also means that errors or warnings from webpack are not visible.
     quiet: false
-    pretty: false
+    pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:

package.json

@@ -2,7 +2,7 @@
   "dependencies": {
     "@babel/preset-react": "^7.12.5",
     "@babel/preset-typescript": "^7.12.1",
-    "@rails/webpacker": "6.0.0-beta.7",
+    "@rails/webpacker": "rails/webpacker",
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",