Rails cannot fetch application-xxxxxx.js webpack bundle - 404 error - ruby-on-rails

Question

I recently updated webpacker, babel, and many other packages on my Rails project so that node-sass would work on the heroku-20 stack, and after enough fiddling webpacker is able to compile and start but when attempting to load any of the pages, Rails attempts to fetch /packs/js/application-44959decf6e2f6f8700f.js when Webpacker shows me it is bundled at /packs/application-17d61f0126c1ef6152fd.js. None of my React JS loads, only the Rails-rendered part shows.
My project is Ruby on Rails 5.2.8 (Ruby 2.7) with #rails/webpacker updated to 5.3.0, Webpack updated to 5.1.0, Node updated to 14.18.1. React version is 16.4.1.
Things I have tried:
npx webpack init
bundle exec rails webpacker:install
copying config files from another app with the same Node/webpack versions and resetting them after getting the same errors
Completely stuck on this, any help is appreciated.
package.json:
{
"name": "xxxxxxxx",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.5",
"#rails/webpacker": "5.3.0",
"axios": "^0.17.1",
"babel-loader": "8.1.0",
"#babel/preset-react": "^7.18.6",
"babel-plugin-syntax-dynamic-import": "7.0.0-beta.3",
"babel-plugin-transform-object-rest-spread": "7.0.0-beta.3",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"compression-webpack-plugin": "^1.1.6",
"css-loader": "^5.1.1",
"file-loader": "^6.1.0",
"immutability-helper": "^2.8.1",
"lodash.groupby": "^4.6.0",
"lodash.snakecase": "^4.1.1",
"nanoid": "^2.1.1",
"sass": "^1.56",
"postcss-loader": "^7.0.1",
"prop-types": "^15.6.0",
"react": "^16.4.1",
"react-animate-height": "^2.0.7",
"react-copy-to-clipboard": "^5.0.1",
"react-datepicker": "^2.8.0",
"react-dom": "^16.2.0",
"react-geosuggest": "^2.9.0",
"react-inlinesvg": "^1.1.7",
"react-select": "^2.4.2",
"react-tagsinput": "^3.19.0",
"react-transition-group": "^2.2.1",
"reactstrap": "^6.5.0",
"sass-loader": "^12.6.0",
"uglifyjs-webpack-plugin": "^1.1.8",
"webpack": "^5.1.0",
"webpack-cli": "^4.10.0",
"webpacker-react": "^0.3.2"
},
"devDependencies": {
"babel-plugin-transform-class-properties": "6.24.1",
"#webpack-cli/serve": "^2.0.0",
"eslint": "4.19.1",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1",
"webpack-dev-server": "~3"
},
"scripts": {
"eslint": "./node_modules/.bin/eslint --ext .js,.jsx ./app/javascript"
},
"engines": {
"node": "14.18.x"
}
}
webpack.config.js
const path = require("path");
const isProduction = process.env.NODE_ENV == "production";
const config = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
},
devServer: {
open: true,
host: "localhost",
port: 3035
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
} else {
config.mode = "development";
}
return config;
};
config/webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
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: []
# 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:
- .jsx
- .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
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"syntax-dynamic-import",
"transform-object-rest-spread",
"#babel/plugin-proposal-object-rest-spread",
[
"transform-class-properties",
{
"spec": true
}
]
]
}
Gemfile
source 'https://rubygems.org'
ruby '~> 2.7.6'
git_source(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.8'
# Use postgresql as the database for Active Record
gem 'pg', '~> 1.2.3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
gem 'letter_opener', '>= 1.8.1'
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
gem 'activerecord-import'
gem 'active_model_serializers'
gem 'geocoder'
gem 'searchkick', '~> 5.0.3'
gem 'devise'
gem 'addressable'
gem 'parallel'
gem 'oj'
gem 'webpacker', '~> 4.3.0'
gem 'webpacker-react', '~> 0.3.2'
gem 'bootstrap', '~> 4.0.0'
gem 'kaminari'
gem 'paranoia', '~> 2.2'
gem 'cocoon'
gem 'jquery-rails'
gem 'select2-rails'
# gem 'select2-rails-latest' # update select2 to make dropdowns case-insensitive
gem 'attribute_normalizer'
gem 'aws-sdk-s3', '~> 1'
gem 'aasm'
gem 'bunny'
gem 'kt-paperclip', '~> 6.4.2'
gem 'font-awesome-rails'
gem 'lograge'
gem 'rollbar'
gem 'httparty'
gem 'restforce'
gem 'sidekiq'
gem 'postmark-rails'
gem "mimemagic", path: 'vendor/gems/mimemagic-0.3.2'
gem 'paper_trail'
gem 'pry'
gem 'elasticsearch'
group :test do
gem 'timecop'
gem 'climate_control'
end
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
gem 'rspec-rails'
gem 'foreman'
gem "factory_bot_rails"
gem 'faker'
gem 'capybara'
gem 'database_cleaner-active_record'
gem 'selenium-webdriver', '~> 3.14'
gem 'capybara-screenshot'
gem 'rubocop', '~> 1.29', require: false
gem 'figaro'
gem 'listen', '>= 3.0.5', '< 3.2'
gem 'pry-rails'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console', '>= 3.3.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
gem 'rspec_junit_formatter'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
Procfile.dev
web: bin/rails server -p 3002
webpack: yarn run webpack serve --mode=development
worker: bundle exec sidekiq -C config/sidekiq.yml
es: bin/elasticsearch-8.2.3/bin/elasticsearch

Answer 1

Solved by switching to bin/webpack-dev-server instead of yarn run webpack serve in Procfile.dev. I then had to copy some intricate configuration files in config/webpack/ from another project with the same setup, then configure all of the loaders.