Vite bundled JS not receiving custom jQuery trigger() outside of bundle

I currently have a WordPress installation where I use Vite as SCSS and JavaScript bundler. In my JavaScript I am trying to call an .on() to check for a custom WooCommerce .trigger(), see the following code:

jQuery(document).on('found_variation', function(event, variation) {
   console.log(variation);
});

When I add this snippet as either inline script, referred script or referred module script it works perfectly fine. However, when I add this code to my app.js, which is bundled with Vite, it is not working (no console output). I have added a console.log() before the statement to check if it is actually reached, which it is.

The code below is my vite.config.js.

import liveReload from 'vite-plugin-live-reload';
import mkcert from 'vite-plugin-mkcert';
import inject from '@rollup/plugin-inject';
import { defineConfig } from 'vite';
import sassGlobImports from 'vite-plugin-sass-glob-import';

const { resolve } = require('path');
const ospath = require('ospath');

const fs = require('fs');

// https://vitejs.dev/config
export default defineConfig({
  plugins: [
    sassGlobImports(),
    liveReload(__dirname + '/**/*.(php|twig)'),
    mkcert(),
    inject({ $: 'jquery', jQuery: 'jquery', }),
  ],

  // Basic configuration
  root: '',
  base: process.env.NODE_ENV === 'development' ? '/content/themes/theme-child/' : '/content/themes/theme-child/dist/',

  build: {
    // Output directory for the production build
    outDir: resolve(__dirname, './dist'),
    emptyOutDir: true,

    // Emit manifest so PHP can find the hashed files
    manifest: true,

    // Target for esbuild
    target: 'es2018',

    // Entrypoints for assets
    rollupOptions: {
      input: {
        app: resolve(__dirname + '/assets/js/app.js'),
        app_admin: resolve(__dirname + '/assets/js/app-admin.js'),
        print: resolve(__dirname + '/assets/js/print.js'),
      },
    },
    minify: 'terser',
    write: true,
    sourcemap: 'inline',
  },

  // Vite server settings
  server: {
    cors: true,
    strictPort: true,
    port: 3000,
    https: true,
    hmr: {
      host: 'localhost',
    },
  },

  // Required for in-browser template compilation
  // https://v3.vuejs.org/guide/installation.html#with-a-bundler
  resolve: {
    alias: {
      '@img': resolve(__dirname, './assets/img'),
      '@icons': resolve(__dirname, './assets/icons'),
      '@fonts': resolve(__dirname, './assets/fonts'),
      '@node_modules': resolve(__dirname, './node_modules'),
    },
  },

  css: {
    devSourcemap: true,
  },
});

Why is this not working? Why can I not receive the custom .trigger() sent by WooCommerce in the bundled JavaScript file?

I hope someone can help me, thanks in advance!

It turns out the problem exists due to the fact that Rollup (@rollup/plugin-inject) injected a different version of jQuery than the version WooCommerce was using (WordPress' bundled jQuery). To solve this problem I removed the injecting of jQuery in my Vite config by removing the following line:

inject({ $: 'jquery', jQuery: 'jquery', })

and marking jQuery as externally loaded script by adding the following line to the rollupOptions:

external: ['jquery']

resulting in the following rollupOptions:

rollupOptions: {
  input: {
    app: resolve(__dirname + '/assets/js/app.js'),
    app_admin: resolve(__dirname + '/assets/js/app-admin.js'),
    print: resolve(__dirname + '/assets/js/print.js'),
  },
  external: ['jquery']
}

Hope this helps someone!