setting up rails 6 with foundation, client-side validations under webpacker, not breaking UJS

gistfile1.txt

Notes:

1 - Not going the full 9 yards here - I prefer to see the CSS structures and thus have them available, so not handing them off to webpacker.
2 - Autocomplete is often required.  js-autocomplete  has no dependencies and has a small footprint. So what's wrong with going the old route and only calling the scripts on the pages that require it?

      yarn add jquery 
      yarn add foundation-sites

** application.js **
  comment out rails generated initial and close bits, replace with single start call:  
  Notes. 
1 - from DavyJonesLocker:
    If you are using Turbolinks 5.2, use the require syntax and make sure that @client-side-validations/client-side-validations is required afterTurbolinks.start(), so ClientSideValidations can properly attach its event handlers.
    Turbolinks 5.3 automatically calls start(), so you can use the import syntax. 
2 - Helpful template for loading turbolinks and initialising Foundation:
    https://railsbytes.com/public/templates/X6ksRW
3 - Oh yeah, about not breaking UJS
    https://stackoverflow.com/questions/67773546/rails-devise-destroy-session-routing-incorrectly/67777301#67777301
    
```
// import Rails from "@rails/ujs"
// import Turbolinks from "turbolinks"
// import * as ActiveStorage from "@rails/activestorage"
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()

import "channels"

require('@client-side-validations/client-side-validations')
require("jquery")
require("easy-autocomplete")
require("@zxing/library")
require("foundation-sites")
require("grapheme-splitter")

 import("../src/foundation-datepicker")
 import("../src/promotion_datespan")

 import("../src/sms_counter")
 import("../src/touch_table_highlight")

 import { Foundation } from 'foundation-sites'
 import $ from 'jquery'

 document.addEventListener('turbolinks:load', () => $(document).foundation())

// Rails.start()
// Turbolinks.start()
// ActiveStorage.start()
```

config/webpack/environments.js.  
Good: (ref: https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker)
```
const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment
```

Seen somewhere. not so good - at least Foundation does not fire up, in my experience

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

var webpack = require('webpack');environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
  })
)

module.exports = environment
```