kinda-sorta-working

.gitignore

@@ -66,3 +66,10 @@ yarn-*.log*
 # the recommendation of the gem. We also don't ignore .env since that's where default values for
 # configurations will go.
 .env*.local
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

.nvmrc

@@ -1 +1 @@
-16.13.0
+18.20.4

Gemfile

@@ -42,7 +42,7 @@ gem "react-rails", "~> 2.4"
 gem "select2-rails", "~> 4.0"
 gem "spinjs-rails", "~> 1.3.0" # Breaking changes in v1.4 (spin.js v2.0).
 gem "uglifier", "~> 4.2"
-gem "webpacker", "~> 5.4"
+gem "webpacker", "6.0.0.rc.6"
 
 # Authz and Authn
 gem "authlogic", "~> 6.1"

Gemfile.lock

@@ -637,7 +637,7 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
+    webpacker (6.0.0.rc.6)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -775,7 +775,7 @@ DEPENDENCIES
   versionist (~> 2.0)
   warning (~> 1.3)
   webmock (~> 3.10)
-  webpacker (~> 5.4)
+  webpacker (= 6.0.0.rc.6)
   whenever (~> 1.0)
   will_paginate (~> 3.1)
   will_paginate-bootstrap4 (~> 0.2.2)

app/controllers/responses_controller.rb

@@ -353,7 +353,7 @@ def odk_awaiting_media?
   # Renders an Enketo form instead of a NEMO form.
   def enketo
     # Fail fast if we're on the wrong node version (this happens most often in development).
-    raise "Error: Unexpected Node version #{`node -v`}" unless `node -v`.match?("v16")
+    raise "Error: Unexpected Node version #{`node -v`}" unless `node -v`.match?("v18")
 
     # Enketo can't render anything if we haven't rendered it to XML (e.g. unpublished draft).
     if @response.form.odk_xml.blank?

bin/patches/exists.rb

@@ -0,0 +1,11 @@
+unless Dir.respond_to?(:exists?)
+  class << Dir
+    alias_method :exists?, :exist?
+  end
+end
+
+unless File.respond_to?(:exists?)
+  class << File
+    alias_method :exists?, :exist?
+  end
+end

bin/rails

@@ -1,4 +1,5 @@
 #!/usr/bin/env ruby
 APP_PATH = File.expand_path("../config/application", __dir__)
+require_relative "patches/exists"
 require_relative "../config/boot"
 require "rails/commands"

bin/setup

@@ -17,6 +17,9 @@ FileUtils.chdir APP_ROOT do
   system! "gem install bundler --conservative"
   system("bundle check") || system!("bundle install")
 
+  # Install JavaScript dependencies
+  system! "bin/yarn"
+
   # puts "\n== Copying sample files =="
   # unless File.exist?("config/database.yml")
   #   FileUtils.cp "config/database.yml.sample", "config/database.yml"

bin/webpack

@@ -1,17 +1,14 @@
 #!/usr/bin/env ruby
 
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
 require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
 require "bundler/setup"
-
 require "webpacker"
 require "webpacker/webpack_runner"
 
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
+
 APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
   Webpacker::WebpackRunner.run(ARGV)

bin/yarn

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
+    select { |dir| File.expand_path(dir) != __dir__ }.
+    product(["yarn", "yarnpkg", "yarn.cmd", "yarn.ps1"]).
+    map { |dir, file| File.expand_path(file, dir) }.
+    find { |file| File.executable?(file) }
+
+  if yarn
+    exec yarn, *ARGV
+  else
+    $stderr.puts "Yarn executable was not detected in the system."
+    $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
+    exit 1
+  end
+end

config/initializers/assets.rb

@@ -21,3 +21,6 @@
 ])
 
 Rails.application.config.assets.precompile << "disable_bootstrap_modal_transitions.css" if Rails.env.test?
+
+# Add node_modules folder to the asset load path.
+Rails.application.config.assets.paths << Rails.root.join("node_modules")

config/webpack/base.js

@@ -0,0 +1,30 @@
+const { webpackConfig, merge } = require('@rails/webpacker')
+
+// webpackConfig.loaders.append('ignore', {
+//   test: /\.test\.js$/,
+//   loader: 'ignore-loader',
+// });
+
+module.exports = merge(
+  webpackConfig,
+  {
+    rules: [
+      {
+        test: /\.test\.js$/,
+        use: ['ignore-loader']
+      },
+      {
+        test: /node_modules\/(enketo-core|openrosa-xpath-evaluator)\//,
+        use: ['babel-loader']
+      }
+    ]
+  }
+)
+
+// Transpile Enketo files.
+// webpackConfig.loaders.append('enketo', {
+//   test: /node_modules\/(enketo-core|openrosa-xpath-evaluator)\//,
+//   loader: 'babel-loader',
+// });
+
+module.exports = webpackConfig

config/webpack/development.js

@@ -1,5 +1,5 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment');
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig();
+module.exports = webpackConfig

config/webpack/production.js

@@ -1,5 +1,5 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'production';
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
-const environment = require('./environment');
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig();
+module.exports = webpackConfig

config/webpack/test.js

@@ -1,5 +1,5 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment');
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig();
+module.exports = webpackConfig

config/webpacker.yml

@@ -5,77 +5,48 @@ default: &default
   source_entry_path: packs
   public_root_path: public
   public_output_path: packs
-  cache_path: tmp/cache/webpacker
   check_yarn_integrity: false
+  cache_path: tmp/webpacker
   webpack_compile_output: true
 
-  # Additional paths webpack should lookup modules
+  # Additional paths webpack should look up 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
 
-  # Extract and emit a css file
-  extract_css: false
-
-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .gif
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .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.
-  # However, it uses a buggy deprecated utility and needs to be fixed before we can use it reliably.
-  # https://github.com/rails/webpacker/issues/2354
-  # check_yarn_integrity: true
-
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
     host: localhost
     port: 3035
-    public: localhost:3035
+    # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
-    # Inline should be set to true if using HMR
-    inline: true
-    overlay: true
+    # Defaults to the inverse of hmr. Uncomment to manually set this.
+    # live_reload: true
+    client:
+      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
+      overlay: true
+      # May also be a string
+      # webSocketURL:
+      #  hostname: "0.0.0.0"
+      #  pathname: "/ws"
+      #  port: 8080
+    # Should we use gzip compression?
     compress: true
-    disable_host_check: true
-    use_local_ip: false
-    quiet: false
-    pretty: false
+    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
+    allowed_hosts: "all"
+    pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'
-    watch_options:
-      ignored: '**/node_modules/**'
+    static:
+      watch:
+        ignored: '**/node_modules/**'
 
 test:
   <<: *default

package.json

@@ -32,26 +32,33 @@
   "resolutions": {
     "@xmldom/xmldom": "0.7.6"
   },
+  "babel": {
+    "presets": [
+      "./node_modules/@rails/webpacker/package/babel/preset.js",
+      "@babel/preset-react"
+    ]
+  },
   "dependencies": {
-    "@babel/core": "7.19.0",
+    "@babel/core": "^7.24.9",
     "@babel/helper-string-parser": "7.18.10",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-decorators": "7.19.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "7.18.9",
     "@babel/plugin-proposal-optional-chaining": "7.18.9",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-runtime": "7.18.10",
-    "@babel/preset-env": "7.19.0",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "7.18.6",
-    "@babel/runtime": "7.19.0",
-    "@rails/webpacker": "5.4.3",
+    "@babel/runtime": "^7.24.8",
+    "@rails/webpacker": "^6.0.0-rc.6",
     "@sentry/react": "6.16.1",
     "@sentry/tracing": "6.16.1",
-    "babel-loader": "8.2.5",
+    "babel-loader": "^9.1.3",
+    "compression-webpack-plugin": "^11.1.0",
     "core-js": "3.25.1",
     "css-loader": "4.2.2",
-    "enketo-core": "6.1.2",
+    "enketo-core": "^8.0.0",
     "ignore-loader": "0.1.2",
     "jquery": "3.6.0",
     "lodash": "4.17.21",
@@ -67,13 +74,14 @@
     "react_ujs": "2.6.1",
     "regenerator-runtime": "0.13.9",
     "style-loader": "1.2.1",
-    "webpack": "4.*",
-    "webpack-cli": "4.10.0"
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.53.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.18.9",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
     "@sentry/cli": "1.71.0",
+    "@webpack-cli/serve": "^2.0.5",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "27.4.5",
     "caniuse-lite": "1.0.30001582",
@@ -89,10 +97,12 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "i18n-js": "3.8.0",
     "jest": "27.4.5",
+    "mini-css-extract-plugin": "^2.9.0",
     "react-dom": "16.13.0",
     "react-refresh": "0.14.0",
     "stylelint": "15.10.1",
     "stylelint-config-sass-guidelines": "7.0.0",
-    "webpack-dev-server": "4.11.0"
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^5.0.4"
   }
 }