Webpacker React.js Setup Issue Assets not Compiling on Heroku Deploy - reactjs

Question

I keep getting the below error code and I have no idea how to fix this. I really don't know how I'm supposed to configure webpack to run react on my website, it is EXTREMELY confusing to set up. I tried using the guide on https://github.com/shakacode/react_on_rails but I didn't find it very helpful for resolving this issue.
/bin/webpack.rb
#!/usr/bin/env ruby
$stdout.sync = true
require "shellwords"
require "yaml"
ENV["RAILS_ENV"] ||= "development"
RAILS_ENV = ENV["RAILS_ENV"]
ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV = ENV["NODE_ENV"]
APP_PATH = File.expand_path("../", __dir__)
CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
begin
paths = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
NODE_MODULES_PATH = File.join(APP_PATH.shellescape, paths["node_modules"])
WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
rescue Errno::ENOENT, NoMethodError
puts "Configuration not found in config/webpack/paths.yml"
puts "Please run bundle exec rails webpacker:install to install webpacker"
exit!
end
WEBPACK_BIN = "#{NODE_MODULES_PATH}/.bin/webpack"
WEBPACK_CONFIG = "#{WEBPACK_CONFIG_PATH}/#{NODE_ENV}.js"
newenv = { "NODE_PATH" => NODE_MODULES_PATH }
cmdline = [WEBPACK_BIN, "--config", WEBPACK_CONFIG] + ARGV
Dir.chdir(APP_PATH) do
exec newenv, *cmdline
end
Error Message
remote: Compiling webpacker assets 🎉
remote: ./bin/webpack:34:in `exec': No such file or directory - /tmp/build_5db4fafc0f5caa97d269dc06d8db2330/node_modules/.bin/webpack (Errno::ENOENT)
remote: from ./bin/webpack:34:in `block in <main>'
remote: from ./bin/webpack:33:in `chdir'
remote: from ./bin/webpack:33:in `<main>'
remote: rake aborted!
remote: JSON::ParserError: A JSON text must at least contain two octets!
remote: /tmp/build_5db4fafc0f5caa97d269dc06d8db2330/vendor/bundle/ruby/2.2.0/gems/json-1.8.6/lib/json/common.rb:155:in `initialize'
remote: /tmp/build_5db4fafc0f5caa97d269dc06d8db2330/vendor/bundle/ruby/2.2.0/gems/json-1.8.6/lib/json/common.rb:155:in `new'
remote: /tmp/build_5db4fafc0f5caa97d269dc06d8db2330/vendor/bundle/ruby/2.2.0/gems/json-1.8.6/lib/json/common.rb:155:in `parse'
remote: /tmp/build_5db4fafc0f5caa97d269dc06d8db2330/vendor/bundle/ruby/2.2.0/bundler/gems/webpacker-42db6f7806f2/lib/tasks/webpacker/compile.rake:14:in `block (2 levels) in <top (required)>'
remote: /tmp/build_5db4fafc0f5caa97d269dc06d8db2330/vendor/bundle/ruby/2.2.0/bundler/gems/webpacker-42db6f7806f2/lib/tasks/webpacker/compile.rake:30:in `block in <top (required)>'
remote: /tmp/build_5db4fafc0f5caa97d269dc06d8db2330/vendor/bundle/ruby/2.2.0/gems/rake-12.0.0/exe/rake:27:in `<top (required)>'
remote: Tasks: TOP => webpacker:compile
remote: (See full trace by running task with --trace)
remote: !
remote: ! Precompiling assets failed.
remote: !

Answer 1

If you are using rails 5.1.0 then this guide may be more appropriate.
https://github.com/rails/webpacker#heroku
The reason is that react_on_rails uses their own fork of webpacker called webpacker-lite which treats many assets differently.
Here's mine:
#!/usr/bin/env ruby
$stdout.sync = true
require "shellwords"
require "yaml"
ENV["RAILS_ENV"] ||= "development"
RAILS_ENV = ENV["RAILS_ENV"]
ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV = ENV["NODE_ENV"]
APP_PATH = File.expand_path("../", __dir__)
NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
WEBPACK_CONFIG = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
unless File.exist?(WEBPACK_CONFIG)
puts "Webpack configuration not found."
puts "Please run bundle exec rails webpacker:install to install webpacker"
exit!
end
newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
Dir.chdir(APP_PATH) do
exec newenv, *cmdline
end