Vue 3, vite vue.esm-bundler.js build breaks jQuery

Question

So I'm using vite to build my Vue 3 application for a legacy website which still uses jQuery and a few other JS frameworks.

I'm using the esm bundler as I would still like to boot it up and use it with slotted components.

<div id="app">
    <vue-component-name></vue-component-name>
</div>

And it works perfectly. But when jQuery is used on the page, no where near my components it seems the esm bundled version of Vue has set a global variable named $ which breaks jQuery.

Has anyone had this issue or know of a way to fix it?

import { defineConfig } from 'vite';
import type { UserConfig as VitestUserConfigInterface } from 'vitest/config';
import svgLoader from 'vite-svg-loader';
import vue from '@vitejs/plugin-vue';
import path from 'path';

const vitestConfig : VitestUserConfigInterface = {
  test: {
    globals: true,
    include: ['./tests/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
  },
};

export default defineConfig({
  test: vitestConfig.test,
  plugins: [vue(), svgLoader()],
  base: '/',
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js',
      '@': path.resolve(__dirname, '/src'),
    },
  },
  build: {
    outDir: '../wwwroot/dist',
    emptyOutDir: true,
    manifest: true,
    rollupOptions: {
      input: {
        main: './src/main.ts',
      },
      output: {
        entryFileNames: 'assets/js/[name].js',
        chunkFileNames: 'assets/js/[name].js',
        assetFileNames: ({ name }) => {
          if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
            return 'assets/images/[name][extname]';
          }

          if ((name ?? '').endsWith('.css')) {
            return 'assets/css/[name][extname]';
          }

          return 'assets/[name][extname]';
        },
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
  server: {
    hmr: {
      protocol: 'ws',
    },
  },
});

EDIT:

More information, I've tracked this down to using

@input="handleInput($event.target, index)"

This right here breaks existing jQuery. Still no idea how to get around it

For anyone interested, How to wrap Vite build in IIFE and still have all the dependencies bundled into a single file?

`seems the esm bundled version of Vue has set a global variable named $` - not in my experience - how are you trying to add jquery to your build anyway - there's no evidence in the code you posted that jquery is even loaded — Jaromanda X, Sep 19 '22 at 07:49
I'm not loading it In to my Vue app. It's already on the website. Essentially I'm building components to slot in where required. I load my compiled Vue app at the bottom of the page (script). Without Vue jQuery works. With the Vue script it breaks. This is even without adding my div and components. Just adding the script breaks jQuery — Michael Mano, Sep 19 '22 at 08:10
Oh, right - so what error do you get - you say vue defines `$` (it doesn't) - so, what is `$` once you add Vue? — Jaromanda X, Sep 19 '22 at 08:49
Yeah, specifically using `@input="handleInput($event.target, index)"` on an input breaks jquery on my site haha. weird. — Michael Mano, Sep 20 '22 at 00:38
that is odd - why would calling a function do that - and this is nothing like what you stated in the question, you said `Vue has set a global variable named $` - which clearly has not happened — Jaromanda X, Sep 20 '22 at 00:41
Oh wait ... https://stackoverflow.com/questions/44134147/vue-js-removes-jquery-event-handlers - though, vue still hasn't created a global variable named `$` - still don't see why you think it has — Jaromanda X, Sep 20 '22 at 00:44
there's also https://stackoverflow.com/questions/43240789/make-vuejs-and-jquery-play-nice/43255516#43255516 — Jaromanda X, Sep 20 '22 at 00:47
Yeah it is @JaromandaX, its a separate issue. I've not found anything like this online. added a pic of the errors when i use the input $event without using that `@input($event)` jquery stays the same variable. — Michael Mano, Sep 20 '22 at 00:53

Vue 3, vite vue.esm-bundler.js build breaks jQuery

0 Answers0