SOLVED: Rails 6, Webpacker, Bootstrap 5, Coffee on Heroku is not working

Question

Problem with coffee script on heroku.

At local machine (Ubuntu Linux) all working perfectly, but after deploying changes to Heroku, coffee script stop working, and I can't understand why.

Tried to "reconfigure" webpacker: And tried to: rails assets:clobber, bin/webpack --verbose --profile, RAILS_ENV=production bundle exec rake assets:precompile

• no luck.

Tried to precompile locally: rake assets:precompile and then push changes to Heroku: git push heroku master

• no luck.

Tried to precompile remotely on Heroku: heroku run rake assets:clean assets:precompile

• no luck.

And there is no any errors about coffee in logs via heroku logs --tail...

• nothing.

When I insert: alert('Some test'); into my app/javascript/packs/application.js it's worked.

P.S. Rails 6 with Webpacker is some kind of quest... I spend a lot of time to understand and trying to enable usual things which earlier worked fine out from the box in Rails 4 or 5... But now it's seems ok.

UPD1: I inserted alert 'test coffee 1' into first string of my init_coffee.coffee and it's worked now, but if I insert some alert after '$(document).on 'turbolinks:load', ->' then nothing happens.

alert 'test coffee 1' # worked
$(document).on 'turbolinks:load', ->
  alert 'test coffee 2' # not worked

UPD2: The coffeescript is not a problem, problem with turbolinks init and any scripts inside that...

Here is my config/webpacker.yml http://pastie.org/p/1RqDZ4haTA4yl6k7EV6b4j

# 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']
  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:
    - .coffee
    - .coffee.erb
    - .mjs
    - .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
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

#
check_yarn_integrity: true

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: true

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

And here is my app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "stylesheets/application.sass"
import "bootstrap-icons/font/bootstrap-icons.css"

import * as bootstrap from 'bootstrap'
document.addEventListener("DOMContentLoaded", function(event) {
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })

  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl, {
      animation: false
    })
  })
})

And here is config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const customConfig = require('./custom')

// coffee
const coffee = require('./loaders/coffee')
environment.loaders.prepend('coffee', coffee)

// jquery
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)

// init
environment.config.merge(customConfig)
module.exports = environment

Here is part of config/environments/production.rb

  config.assets.initialize_on_precompile = true
  config.assets.compile = true
  config.assets.js_compressor = :uglifier
  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?

Answer 1

Ok, when I understand that Coffee Script is not a problem and Turbolinks not working properly, I found the solution here: turbolinks:load event works on local machine not on Heroku

The problem was in the Rocket Loader from Cloudflare, I disable it and all working now perfectly.