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!