Update shakapacker (#493)

* Add and install shakapacker
* Update Babel and Webpack config to use Shakapacker
* Update Procfile commands
* Update bin/webpack occurences into bin/webpacker

Author: gscarv13

.ruby-version

@@ -1 +1 @@
-ruby-2.7.1
+2.7.5

Gemfile

@@ -3,10 +3,10 @@
 source "https://rubygems.org"
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby "2.7.3"
+ruby "2.7.5"
 
 gem "react_on_rails", "12.5.2"
-gem "webpacker", "6.0.0.rc.6"
+gem "shakapacker", "6.0.2"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails"
 gem "listen"

Gemfile.lock

@@ -299,6 +299,11 @@ GEM
       rubyzip (>= 1.2.2)
     semantic_range (3.0.0)
     sexp_processor (4.16.0)
+    shakapacker (6.0.2)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     simplecov (0.16.1)
       docile (~> 1.1)
       json (>= 1.8, < 3)
@@ -392,15 +397,15 @@ DEPENDENCIES
   scss_lint
   sdoc
   selenium-webdriver
+  shakapacker (= 6.0.2)
   spring
   spring-commands-rspec
   uglifier
   web-console
   webdrivers (= 3.9.4)
-  webpacker (= 6.0.0.rc.6)
 
 RUBY VERSION
-   ruby 2.7.3p183
+   ruby 2.7.5p203
 
 BUNDLED WITH
    2.1.4

Procfile.dev

@@ -2,5 +2,5 @@
 # You can run these commands in separate shells
 redis: redis-server
 rails: bundle exec rails s -p 3000
-wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/webpack-dev-server
-wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/webpack --watch
+wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/webpacker-dev-server
+wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/webpacker --watch

Procfile.dev-static

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

babel.config.js

@@ -1,16 +1,30 @@
-// The source code including full typescript support is available at: 
-// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/babel.config.js
-
-const defaultConfigFunc = require('@rails/webpacker/package/babel/preset.js');
-
 module.exports = function (api) {
-  const resultConfig = defaultConfigFunc(api);
+  const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
+  const resultConfig = defaultConfigFunc(api)
+  const isProductionEnv = api.env('production')
 
   const changesOnDefault = {
-    plugins: [process.env.WEBPACK_SERVE && 'react-refresh/babel'].filter(Boolean),
-  };
+    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.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins];
+  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
 
-  return resultConfig;
-};
+  return resultConfig
+}

bin/webpack bin/webpackerbin/webpack renamed to bin/webpacker

@@ -6,7 +6,7 @@ require "webpacker"
 require "webpacker/webpack_runner"
 
 ENV["RAILS_ENV"] ||= "development"
-ENV["NODE_ENV"]  ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
 
 APP_ROOT = File.expand_path("..", __dir__)

bin/webpack-dev-server bin/webpacker-dev-serverbin/webpack-dev-server renamed to bin/webpacker-dev-server

@@ -1,7 +1,7 @@
 #!/usr/bin/env ruby
 
 ENV["RAILS_ENV"] ||= "development"
-ENV["NODE_ENV"]  ||= "development"
+ENV["NODE_ENV"]  ||= ENV["RAILS_ENV"]
 
 require "pathname"
 ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",

config/webpack/DEBUGGING.md

@@ -3,7 +3,7 @@
 # https://github.com/rails/webpacker/pull/2018
 
 To debug:
-bin/webpack --debug
+bin/webpacker --debug-webpakcer
 
 And put a debugger statement in the file you're editing.
 

config/webpack/commonWebpackConfig.js

@@ -2,7 +2,7 @@
 // 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('@rails/webpacker');
+const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');
 
 const commonOptions = {
   resolve: {