Develop Reference

rails with vuejs net::ERR_ABORTED 404 (Not Found)

for the past 6 months we struggling with a issue in loading our app page in local development.
we getting blank pages with net::ERR_ABORTED 404 (Not Found) in the console logs.
after a few refresh the page loads.
this is very faustring.
our development is: Rails 5.0.7.2 + vuejs 2 with webpack webpacker#4.2.0.
can it be solved? thank you!
package.json
"engines": {
"node": "^10.#",
"yarn": "^1"
},
"resolutions": {
"vue": "2.#.#",
"vue-template-compiler": "2.#.#",
},
"scripts": {
"start": "./bin/webpack-dev-server",
},
webpacker.yml
default: &default
source_path: app/javascript
webpack_compile_output: true
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
public_root_path: public
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['app/assets']
compile: false
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: false
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: 0.0.0.0
port: 3040
public: 0.0.0.0:3040
hmr: true
# 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
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
# Compile test packs to a separate directory
public_output_path: packs
testing:
<<: *default
# Compile test packs to a separate directory
public_output_path: packs
staging:
<<: *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
app:
<<: *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: false

Use rm -rf public/packs to delete /packs, and then restart the webpack dev server bin/webpacker-dev-server. I think it would be fine.
I think it's just inconsistency of the compiles files which I ran into several times.
You can check the [project root]/public/packs. I guess it would be very possible for the files the browser requesting are not there. In more details, the entry points in [project root]/public/packs/manifest.json is not consistent with the files in the same folder.
"entrypoints": {
"desktop": {
"js": [
"/packs/desktop-7547483.....js" // it cannot find this file in the folder
],
// ...
}
Removing them all and compiling them again is the easiest way to solve that.

Rails web app: Rack app error handling request { GET /packs/js/application-682c14949987e19a8380.js }

When I load the home view (or any view) on my local version of a Rails 6 app, which I'm running with webpack-dev-server through localhost, the page will load, but but not the javascript as I continue to get the following internal server error when webpack calls for application.js in my app/javascript/packs directory:
2020-07-28 18:04:57 -0500: HTTP parse error, malformed request ():
#<Puma::HttpParserError: Invalid HTTP format, parsing fails.
---
2020-07-28 18:04:57 -0500: Rack app error handling request { GET /packs/js/application-682c14949987e19a8380.js }
#<OpenSSL::SSL::SSLError: SSL_connect returned=1 errno=0 state=error: wrong version number>
followed by some more extraneous/vague information.
When I run bin/webpack-dev-server, everything (I'm assuming) goes smoothly as so:
ℹ ｢wds｣: Project is running at https://localhost:3000/
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /home/gabe/domus/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: 6c3a88060d923134f5c3
Version: webpack 4.44.0
Time: 1399ms
Built at: 07/28/2020 5:51:22 PM
Asset Size Chunks Chunk Names
js/application-682c14949987e19a8380.js 508 KiB application [emitted] [immutable] application
js/application-682c14949987e19a8380.js.map 572 KiB application [emitted] [dev] application
manifest.json 364 bytes [emitted]
ℹ ｢wdm｣: Compiled successfully.
In my application.html.slim file I call the application.js file with javascript_pack_tag:
html
head
title Domus
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
body
= yield
And my webpacker.yml file looks like so:
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
resolved_paths: []
cache_manifest: false
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
check_yarn_integrity: true
dev_server:
https: true
host: localhost
port: 3000
public: localhost:3000
hmr: false
inline: false
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/**'
I'm not too sure what else to try. Any help would be appreciated!

I fixed this by running bin/webpack-dev-server first and then rails s

You have to run your rails server and webpack-dev-server in different ports, Rails usually runs in port 3000 while webpacker by default uses 3035, so in webpacker.yml make sure to use a different port:
port: 3035
public: localhost:3035
You might also have to disable https in webpacker.yml depending on your setup.

How to change webpacker in Rails to watch for changes outside of packs folder?

I want hot module reload to reload changes in my JavaScript/React files
I was going through webpacker development documentation
In that it says
This process will watch for changes in the app/javascript/packs/*.js
Now, I want to watch for changes outside of the packs project as well or in the entire javascript folder and also need to include .jsx file.
I am not sure how I can do it.
This is my webpacker file:
#!/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'
APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::WebpackRunner.run(ARGV)
end
And this is my webpacker dev server file
#!/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/dev_server_runner'
APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
Webpacker::DevServerRunner.run(ARGV)
end

I not sure that I completely understand you question, but I was stuck with problem that default rails webpack server rebuild each .js(x) files changes and that took long time in development. I solved it by use gem foreman
Install foreman
Create Procfile.dev in project root
web: bundle exec rails s -p 3001
webpacker: ruby ./bin/webpack-dev-server
my webpack-dev-server
#!/usr/bin/env ruby
ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"] ||= ENV["NODE_ENV"] || "development"
require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
Pathname.new(__FILE__).realpath)
require "rubygems"
require "bundler/setup"
require "webpacker"
require "webpacker/dev_server_runner"
Webpacker::DevServerRunner.run(ARGV)
And run project with foreman
foreman start -f Procfile.dev -p 3000
After that - webpack do not build each changes and take less time to reload code changes
Also you can update your 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_output_path: 'packs'
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
resolved_paths: ['app/javascript/src']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .jsx
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: 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
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
production:
<<: *default
public_path: <%= ENV['ACTION_CONTROLLER_ASSET_HOST'] %>
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true

Webpacker error when running server for new Rails app

Just created a brand new Rails app and receiving this error when I run the server:
Webpacker can't find application.js in /public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
Here's my 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_output_path: packs
cache_path: tmp/cache/webpacker
webpack_compile_output: false
# 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
extensions:
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: 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
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
# Cache manifest.json for performance
cache_manifest: true
After running ./bin/webpack, it recommended I install webpack-cli via yarn add -D.
After I did this, I got the following error:
Error: Cannot find module 'webpack-cli'
Require stack:
- ../node_modules/webpack/bin/webpack.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1030:15)
at Function.Module._load (internal/modules/cjs/loader.js:899:27)
at Module.require (internal/modules/cjs/loader.js:1090:19)
at require (internal/modules/cjs/helpers.js:75:18)
at ../node_modules/webpack/bin/webpack.js:143:5
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'../node_modules/webpack/bin/webpack.js'
]
I don't have a manifest.json - shouldn't this have been created automatically?
Any ideas?

The problem comes from the version of node on your local computer. When you created your rails app, you probably had an error like this pop up:
The JavaScript app source directory already exists
apply /Users/mconiaris/.rbenv/versions/2.6.4/lib/ruby/gems/2.6.0/gems/webpacker-4.0.7/lib/install/binstubs.rb
Copying binstubs
exist bin
create bin/webpack
create bin/webpack-dev-server
append .gitignore
Installing all JavaScript dependencies [4.0.7]
run yarn add #rails/webpacker from "."
yarn add v1.17.3
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning #rails/webpacker > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > flatten#1.0.2: I wrote this module a very long time ago; you should use something else.
[2/4] 🚚 Fetching packages...
error get-caller-file#2.0.5: The engine "node" is incompatible with this module. Expected version "6.* || 8.* || >= 10.*". Got "9.4.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
To fix the problem, first confirm your version of node to ensure that it's not 9.x.x:
node -v
Check the version again. If it's 12.10 or higher, you should be all set.
Go start another brand new rails project and it should work fine.
Good luck!

Rails 5: JS files not loading in Production

I'm using Rails 5 and Ruby 2.5, and deploying to Amazon Elastic Beanstalk.
All the stylesheets and CSS files are loading correctly in Production, however the Javascript files are not loading properly in Production. Everything works perfectly in Development.
I'm thinking that the issue is that in Production, I only see one .js file which has crammed a lot of javascript files together which is making it not load correctly.
This is how it looks on localhost:
And this is how it looks on the production server:
When I do a search through the production .js file I am missing a lot of code that is in those separate JS files loaded on localhost.
I have tried running RAILS_ENV=production bundle exec rake assets:clean assets:precompile and I can see all my assets in the /public/assets folder.
My production.rb file:
Rails.application.configure do
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.read_encrypted_secrets = true
config.public_file_server.enabled = true
config.assets.js_compressor = :uglifier
config.assets.compile = false
config.log_level = :debug
config.log_tags = [ :request_id ]
config.action_mailer.perform_caching = false
config.i18n.fallbacks = true
config.active_support.deprecation = :notify
config.log_formatter = ::Logger::Formatter.new
if ENV["RAILS_LOG_TO_STDOUT"].present?
logger = ActiveSupport::Logger.new(STDOUT)
logger.formatter = config.log_formatter
config.logger = ActiveSupport::TaggedLogging.new(logger)
end
config.active_record.dump_schema_after_migration = false
config.action_mailer.perform_deliveries = true
config.action_mailer.raise_delivery_errors = true
config.assets.digest = true
Rails.application.config.assets.precompile += %w( *.js ^[^_]*.css *.css.erb )
end
My application.js file:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require editable/bootstrap-editable
//= require editable/bootstrap2-editable
//= require editable/rails
//= require_tree .
The editable gem is x-editable and is used for In Place Editing.
UPDATE
This is how the stylesheets and javascripts are loaded in the application.html.erb file:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

Try to config.assets.compile false to true then it will be like below
config.assets.compile = true
Hope it will work

I solved this by just manually downloading each JS file that appeared in the source code in Development, then uploading them to the server, and importing them manually one by one in the code as in the locahost screenshot!