jQuery with vite $/jQuery is not a function

It looks like you're importing jQuery correctly, but you need to make sure it's available in the global scope so that you can use the $ or jQuery functions in your footer.

Try adding the following line to your app.js file after importing jQuery:

window.$ = window.jQuery = require('jquery');

This will make jQuery available globally, so you can use it in your footer.

Alternatively, you can use the expose option in your vite.config.js file to make jQuery available globally without having to modify your app.js file:

export default {
  // ...
  build: {
    rollupOptions: {
      output: {
        // expose jQuery as a global variable
        globals: {
          jquery: 'jQuery'
        }
      }
    }
  }
}

Then, in your app.js file, you can import jQuery like this:

import 'jquery';

And in your footer, you can use $ or jQuery without any errors.