Integrating Turbolinks into rails 5 app

Turbolinks has been giving me a world of trouble and there is a lot of randomness with it depending on where I put it in the application.js file. Right now I have this:

//= require jquery3
//= require jquery
//= require jquery.turbolinks
//= require best_in_place
//= require jquery_ujs
//= require jquery.remotipart
//= require jquery-ui
//= require tether
//= require popper
//= require bootstrap
//= require selectize
//= require dropzone
//= require jquery.infinite-pages
//= require jquery.raty
//= require jquery.validate
//= require social-share-button
//= require init
//= require turbolinks
//= require turbolinks-compatibility
//= require_tree .

My javascript here works with this code:

$(document).on('turbolinks:load', function(){
    /* Activating Best In Place */
    jQuery(".best_in_place").best_in_place();
});

But I get errors in some of my code for my page coffee scripts..this code here works:

$(document).on 'ready page:load', ->
    Dropzone.options.recipeImageDropzone = 
        init: ->
            myDropzone = this
            @on 'addedfile', (file) ->
                options =
                    extension: file.name.match(/(\.\w+)?$/)[0]
                    _: Date.now()
                $.getJSON '/images/cache/presign', options, (result) ->
                    file.additionalData = result['fields']
                    myDropzone.options.url = result['url']
                    myDropzone.processQueue()
                    return
                return
            @on 'sending', (file, xhr, formData) ->
                $.each file.additionalData, (k, v) ->
                    formData.append k,v
                    return
                return
            @on 'success', (file) ->
                image = 
                    id: file.additionalData.key.match(/cache\/(.+)/)[1]
                    storage: 'cache'
                    metadata:
                        size: file.size
                        filename: file.name.match(/[^\/\\]+$/)
                        mime_type: file.type
                $('#recipe_image').val(JSON.stringify(image))
                $('.dz-image').css
                    'width': '100%'
                    'height': 'auto'
            @on 'removedfile', (file) ->
                $('#recipe_image').val("")
            @on 'thumbnail', (file, dataUrl) ->
                $('.dz-image').last().find('img').attr
                    width: '100%'
                    height: '100%'
            return
        paramName: 'file'
        maxFiles: 1
        autoProcessQueue: false
        addRemoveLinks: true
        acceptedFiles: 'image/*'

But if I change the first line to be turbolinks:load most things work but that dropzone code throws an error now and I get a Invalid JSON response from server and the console shows

POST http://localhost:8000/images 404 (Not Found)

Weird that 1 thing breaks and not sure why...also noticed that all of my elements in the body tag have this added to every html tag:
data-original-title title
This goes away if I move the //= require turbolinks to the bottom of the application.js file but then I cant use the turbolinks:load in any of the other coffeescript files. Been searching for a guide on how to implement turbolinks correctly but nothing I find shows all the steps