0

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!

1 Answer 1

0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.