shakapacker and jquery and css working, I think

Gemfile

@@ -48,20 +48,20 @@ gem 'rake', '< 13.0'
 gem 'rack-attack'
 gem 'rack-mini-profiler'
 gem 'rails', '6.1.6.1'
+gem "react_on_rails", "= 13.0"
 gem 'record_tag_helper', '~> 1.0'
-gem 'react-rails', '~> 2.3.0'
 gem 'recap', '~> 1.0.0'
 gem 'redis-rails'
 gem 'remotipart', '~> 1.2'
 gem 'rmagick'
 gem 'sass-rails', '~> 5.0.1'
 gem 'searchkick'
+gem 'shakapacker', '6.5.0'
 gem 'sitemap_generator'
 gem 'therubyracer'
 gem 'twitter-bootstrap-rails'
 gem 'uglifier', '>= 1.3.0'
 # gem 'weather-icons-rails'
-gem 'webpacker'
 gem 'whenever'
 gem 'mimemagic', '~> 0.3.10'
 
@@ -96,3 +96,4 @@ group :production do
 end
 
 gem "aws-sdk-s3", "~> 1.103"
+

Gemfile.lock

@@ -85,10 +85,6 @@ GEM
       descendants_tracker (~> 0.0.4)
       ice_nine (~> 0.11.0)
       thread_safe (~> 0.3, >= 0.3.1)
-    babel-source (5.8.35)
-    babel-transpiler (0.7.0)
-      babel-source (>= 4.0, < 6)
-      execjs (~> 2.0)
     barometer (0.9.7)
       addressable
       choc_mool
@@ -375,17 +371,18 @@ GEM
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
+    rainbow (3.1.1)
     rake (12.3.3)
     rb-fsevent (0.11.1)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
     rdoc (4.3.0)
-    react-rails (2.3.1)
-      babel-transpiler (>= 0.7.0)
+    react_on_rails (13.0.0)
+      addressable
       connection_pool
-      execjs
-      railties (>= 3.2)
-      tilt
+      execjs (~> 2.5)
+      rails (>= 5.2)
+      rainbow (~> 3.0)
     recap (1.0.12)
       capistrano (~> 2.9)
       open4
@@ -457,6 +454,11 @@ GEM
       activemodel (>= 5.2)
       hashie
     semantic_range (3.0.0)
+    shakapacker (6.5.0)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     shellany (0.0.1)
     sitemap_generator (6.2.1)
       builder (~> 3.0)
@@ -492,11 +494,6 @@ GEM
       descendants_tracker (~> 0.0, >= 0.0.3)
     warden (1.2.9)
       rack (>= 2.0.9)
-    webpacker (5.4.3)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -569,7 +566,7 @@ DEPENDENCIES
   rails-assets-underscore!
   rails_12factor
   rake (< 13.0)
-  react-rails (~> 2.3.0)
+  react_on_rails (= 13.0)
   recap (~> 1.0.0)
   record_tag_helper (~> 1.0)
   redis-rails
@@ -579,12 +576,12 @@ DEPENDENCIES
   sass-rails (~> 5.0.1)
   sdoc (~> 0.4.0)
   searchkick
+  shakapacker (= 6.5.0)
   sitemap_generator
   terminal-notifier-guard
   therubyracer
   twitter-bootstrap-rails
   uglifier (>= 1.3.0)
-  webpacker
   whenever
 
 RUBY VERSION

app/javascript/components/TestComponent.jsx

@@ -0,0 +1,7 @@
+import { React } from "react";
+
+const TestComponent = () => {
+    return (<div>hi</div>)
+}
+
+export default TestComponent;

app/javascript/css/admin.scss

@@ -1 +1,18 @@
-@import "~bootstrap/scss/bootstrap.scss";
+@import "bootstrap/scss/bootstrap.scss";
+@import "cms/pages/shared";
+@import "cms/pages/ads";
+@import "cms/pages/articles";
+@import "cms/pages/article_display";
+@import "cms/pages/authors";
+@import "cms/pages/drafts";
+@import "cms/pages/images";
+@import "cms/pages/issues";
+
+.form-control {
+
+  width: 100%;
+  max-width: 100%;
+  min-width: 100%;
+  min-height: 34px;
+
+}

app/javascript/packs/admin.js

@@ -15,14 +15,13 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-require("jquery")
-require("@rails/ujs").start();
+// require("jquery")
+// require("@rails/ujs").start();
+import $ from "expose-loader?exposes=$,jQuery!jquery";
 require("@popperjs/core");
 
 import "../src/message_bus";
 import "../css/admin";
 import "bootstrap";
-import { React } from "react";
-import { ArticleList } from "../src/components/articles_list"
 
 console.log('Hello World from Webpacker');

app/javascript/packs/application.js

@@ -1,8 +1,8 @@
 import Rails from "@rails/ujs"
-import Turbolinks from "turbolinks"
+// import Turbolinks from "turbolinks"
 import * as ActiveStorage from "@rails/activestorage"
-import "channels"
+// import "channels"
 
 Rails.start()
-Turbolinks.start()
+// Turbolinks.start()
 ActiveStorage.start()

app/views/layouts/application.html.haml

@@ -11,6 +11,7 @@
     %meta{content: "IE=Edge,chrome=1", "http-equiv" => "X-UA-Compatible"}/
     %meta{content: "width=device-width, initial-scale=1.0", name: "viewport"}/
     =javascript_pack_tag "admin"
+    =stylesheet_pack_tag "admin"
     %title #{!@title.blank? ? "#{@title} |" : ""} TT CMS
     = csrf_meta_tags
     / Le HTML5 shim, for IE6-8 support of HTML elements
@@ -31,8 +32,8 @@
     / For all other devices
     / Size should be 32 x 32 pixels
     = favicon_link_tag 'favicon.ico', rel: 'shortcut icon'
-    = stylesheet_link_tag "admin", media: "all"
-    = javascript_include_tag "admin"
+    -# = stylesheet_link_tag "admin", media: "all"
+    -# = javascript_include_tag "admin"
     = javascript_include_tag "/ckeditor/ckeditor.js"
   %body{id: "#{params[:controller]}_#{params[:action]}", "ng-app" => ""}
     .navbar.navbar-expand-lg.navbar-static-top.bg-light

config/webpack/webpack.config.js

@@ -0,0 +1,8 @@
+const { webpackConfig, merge } = require('shakapacker');
+const customConfig = {
+  resolve: {
+    extensions: ['.jsx', '.css', '.scss', '.jsx.coffee']
+  },
+};
+
+module.exports = merge(webpackConfig, customConfig);

config/webpacker.yml

@@ -6,12 +6,11 @@ default: &default
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
   webpack_compile_output: true
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: []
+  additional_paths: []
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
@@ -33,28 +32,10 @@ default: &default
     - .woff
     - .woff2
 
-  extensions:
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
 development:
   <<: *default
   compile: true
 
-  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: true
-
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false

docker/web/Dockerfile

@@ -5,19 +5,23 @@ RUN bundle config --global frozen 1
 
 WORKDIR /usr/src/app
 
+# install node
+RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
+RUN apt-get install -y nodejs
+
 RUN set -ex \
     \
     && apt-get update \
     && apt-get install -y \
         libmagickwand-dev \
         imagemagick \
         libmariadb-dev \
-        libpq-dev \
-	nodejs \
-        npm
+        libpq-dev
+
 
 RUN gem install bundler:1.17.3
-RUN npm version
+RUN node --version
+RUN npm --version
 RUN npm install -g yarn
 RUN yarn install