How to import jquery for global #3744

youseries · 2021-06-10T07:21:25Z

youseries
Jun 10, 2021

In webpack,We can use ProviderPlugin to import jquery in webpackage.config file. Like this:

new webpack.ProvidePlugin({
            $:'jquery',
            jQuery:'jquery'
        })

Now use vite2,how to do that.(I don't want to import jquery file in html,i want build all file in a single js file);

sadeghbarati · 2021-06-28T05:17:25Z

sadeghbarati
Jun 28, 2021

Vanilla js and HTML example

define an entry named jquery.js on top of every scripts

jquery.js file:

// import $ from 'jquery/dist/jquery'
import $ from 'jquery'
window.jQuery = window.$ = $

or with rollupOptions which I don't know it's works or not

build: {
    rollupOptions: {
        output: {
            globals: {
               jquery: 'window.jQuery',
               jquery: 'window.$'
            }
        }
    }
}

1 reply

brendon Jul 13, 2022

import $ from 'jquery/dist/jquery'

jquery resolves to jquery/dist/jquery per it's package.json file: "main": "dist/jquery.js", so you can just use:

import $ from 'jquery'

biao86 · 2021-08-24T03:51:17Z

biao86
Aug 24, 2021

I have the same problem.

0 replies

sadeghbarati · 2022-01-08T07:11:22Z

sadeghbarati
Jan 8, 2022

Vanilla js and HTML example

External jQuery (umd):

https://code.jquery.com/jquery-3.6.0.min.js (umd) no need to wait for page load to access $ variable

build: {
    rollupOptions: {
        external: ['jquery'],
        .
        .
        output: {
            jquery: "$"
        }
    }
}

Module jQuery (esm)

jquery.js:

import jQuery from "jquery";
Object.assign(window, { $: jQuery, jQuery })
//or
window.jQuery = window.$ = $

<html>
    <head>
    </head>
    <body>
 
        <script type="module" src="/@vite/client"></script>
        <script type="module" src="/src/jquery.js"></script>
        <!-- normal script inside html file -->
        <script>
            console.log($) // Uncaught ReferenceError: $ is not defined
            
            window.addEventListener("load", function() {
                console.log($) // works
            })
        </script>
    </body>
</html>

2 replies

t0byman Aug 10, 2022

"External jQuery (umd)" gives me this error: "Cannot use import statement outside a module"

I use Vite 3 and followed this guide: https://www.mapledesign.co.uk/tech-blog/vite-bootstrap-4-jquery/
Also had to add jQuery: 'jquery'

Works for me! :)

sadeghbarati Aug 10, 2022

I meant this for umd part which is not best option 🤭

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
</html>

beckZgh · 2022-05-13T03:48:11Z

beckZgh
May 13, 2022

使用 @rollup/plugin-inject @rollup/plugin-node-resolve 两个 rollup 插件完成依赖注入的功能

// vite.config.ts
import { defineConfig } from 'vite'

import uni     from '@dcloudio/vite-plugin-uni'
import inject  from '@rollup/plugin-inject'
import resolve from '@rollup/plugin-node-resolve'
import path    from 'path'

export default defineConfig({
    resolve: {
        alias: {
            '@'   : path.resolve(__dirname, 'src'),
            '#'   : path.resolve(__dirname, 'typings'),
            '@com': path.resolve(__dirname, 'src/components'),
            '@use': path.resolve(__dirname, 'src/hooks'),
        }
    },
    plugins: [
        uni(),
        resolve(),
        inject({ 
            $api  : path.resolve('./src/apis/index.ts' ),
            $utils: path.resolve('./src/utils/index.ts'),
        })
    ],
})

0 replies

magicLaLa · 2022-05-24T03:36:27Z

magicLaLa
May 24, 2022

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

run vite dev is error Vite Error, /node_modules/.vite/deps/jquery.js?v=295d3aa0 optimized info should be defined

config: optimizeDeps.exclude: ['jquery'] is run up -> does not provide an export named 'default' vite

1 reply

sadeghbarati May 24, 2022

// with exclude you have to include code without name
import 'jquery'

//with include vite transfer code to export default 
import $ from ' jquery'
import jQuery from 'jquery'
import anyNameButRelatedTojQuery from 'jquery'

optimizeDeps.exclude will force vite to include original code of jquery,

with optimizeDeps.include will force vite to convert code to esm for named export

baboon-king · 2022-07-12T03:37:05Z

baboon-king
Jul 12, 2022

optimizeDeps: {
  include: ["jquery"],
},

it's work

2 replies

bohanyang Nov 8, 2022

This solution works for me. Final working config:

import inject from '@rollup/plugin-inject'

        plugins: [
            inject({
                jQuery: 'jquery',
            }),
        ],
        optimizeDeps: {
            include: ["jquery"],
        },

ghiscoding Jan 24, 2023

I ended up going away from this approach since I use SASS (.scss) and the inject was causing a bunch of warnings like

Consider restricting the plugin to particular files via options.include

and the cause seems to be that I need both jQuery and $ to be available but the latter caused the warnings from the inject, it seems that it wasn't smart enough to detect that SASS variables aren't related at all to jQuery ($)

this is what I had causing the problem

export default defineConfig({
  plugins: [
    inject({
      $: 'jquery', // this caused warnings for all my scss files that had $variable
      jQuery: 'jquery',
    }),
  ],
})

I simply turned to the solution provided above

import jQuery from "jquery";

// define & and jQuery on the global window object
Object.assign(window, { $: jQuery, jQuery });

// main.ts
import './jQuery';

no more warnings

brendon · 2022-07-17T10:12:01Z

brendon
Jul 17, 2022

I'm having issues with some jQuery code that's in the header already (after the entrypoint script tag) but because jQuery is being imported as a seperate request, $ isn't available by the time the head script code is evaluated. Is there a way to force jQuery into the initial application entrypoint response?

1 reply

brendon Nov 8, 2022

I'm having issues with some jQuery code that's in the header already (after the entrypoint script tag) but because jQuery is being imported as a seperate request, $ isn't available by the time the head script code is evaluated. Is there a way to force jQuery into the initial application entrypoint response?

I ended up bringing in jQuery via the cloud flare CDN externally so that it's available immediately (i.e. not a module import) for the other legacy scripts in the head of the document.

javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
integrity: "sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==",
crossorigin: "anonymous", referrerpolicy: "no-referrer"

I'm then using the following to convert requires of jQuery into default exports that just expose window.jQuery:

import { globalExternals } from '@fal-works/esbuild-plugin-global-externals'

export default defineConfig({

...

  optimizeDeps: {
    disabled: false,
    esbuildOptions: {
      plugins: [globalExternals({ jquery: { type: "cjs", varName: "jQuery" } })]
    }
  },
  build: {
    commonjsOptions: { include: [] }
  }
})

This also forces production to use esbuild instead of rollup and I think this will be the default for Vite 4. Makes dev much easier as the environments are then the same.

alih70442 · 2023-04-11T18:07:35Z

alih70442
Apr 11, 2023

https://dev.to/chmich/setup-jquery-on-vite-598k

5 replies

adueck May 2, 2023

Thanks for sharing this. I followed this but I am still having trouble getting plugins to work. Any advice on how to use the rollup-inject to add a jQuery plugin as well?

damirbogdanov May 2, 2023

I've also been having the same issue with getting plugins (other jquery deps) to work, despite following these steps. Has anyone found a solution or workaround for this problem?
I also think that jquery in haml :javascript filter wasn't working as well.

brendon May 2, 2023

Have you tried my solution? #3744 (reply in thread)

damirbogdanov May 2, 2023

will try that and check if that works in my case, thank you

adueck May 3, 2023

Actually it works fine for me, I realized I had spelled the plugin function wrong. 🤦‍♂️

What I did was follow that guide above to inject jquery, and then in a React component file I simply imported the plugin like this:

// App.tsx

import "my-plugin/jquery.my-myplugin.js";

Sinarab · 2023-07-28T16:54:42Z

Sinarab
Jul 28, 2023

I had some trouble setting up vitest to correctly inject jQuery. I was facing the error __vi_esm_17__.default is not a function
After some time I ended up with the following working config.

import inject from '@rollup/plugin-inject';

export default defineConfig({

  test: { ... },

  plugins: [
    inject({
      $: [ 'jquery', '*' ],
      jQuery: 'jquery',
    }),
    ....
  ],
});

0 replies

ulf-frostypaw · 2023-08-05T19:14:11Z

ulf-frostypaw
Aug 5, 2023

im getting this error now. but im using react-owl-carousel

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import jQuery from "jquery";
import inject from '@rollup/plugin-inject'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),
  	inject({
      $: 'jquery', // this caused warnings for all my scss files that had $variable
      jQuery: 'jquery',
    }),
  ],
})

.w.

0 replies

makbeta · 2023-11-15T16:36:49Z

makbeta
Nov 15, 2023

This thread was helpful in resolving my issue. This is what worked for me with Vite 4.5

In vite.config.js I have the following:

plugins: [
    inject({
      jQuery: 'jquery',
    }),
  ],
  optimizeDeps: {
    include: ['jquery'],
  },

In the main index.js

import jQuery from 'jquery';
Object.assign(window, { $: jQuery, jQuery });
// or if you don't want to pollute the entire window scope you can use the following to set $ as a global variable in your script
globalThis.$ = jQuery;
// As of 2023-11-27 using syntax Object.assign(globalThis, { $: jQuery, jQuery }); will export the variable into window scope with Vite 5.0, the globalThis.$ will set it only to the module/file scope.

0 replies

asolopovas · 2024-05-28T13:51:07Z

asolopovas
May 28, 2024

Bellow is the only way I got any luck in making vite use external window.jQuery, it just works god knows why, tried everyting above but was unable to get anything to work either because I am stupid, or because of bad weather. Funny thing as soon as I add jquery package into my package.json file, vite automatically opts in to import local jquery instead of global from window object.

I use [email protected]

bootstrap.ts

import * as jQuery from 'jquery';
declare global {
    interface Window {
        jQuery: typeof jQuery;
        $: typeof jQuery;
    }
}

window.$ = window.jQuery
window.jQuery = window.jQuery

nothing special in my config just some boilerplate

vite.config.ts:

import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"
import tsconfigPaths from 'vite-tsconfig-paths'
import path from "path"
export default defineConfig({
    plugins: [
        laravel({
            input: [
                "src/ts/entry.ts",
            ],
            publicDirectory: "./static/build",
        }),
        tsconfigPaths()
    ],
    resolve: {
        alias: {
            "~": path.resolve("."),
        },
    },
    build: {
        outDir: "./static/build",
    },
    server: {
        https: {
            key: "./ssl/localhost.key",
            cert: "./ssl/localhost.crt",
        },
        hmr: { host: "localhost" },
    },
})

package.json

"devDependencies": {
    "@types/jquery": "^3.5.29",
}

than in my entry file.

import "./bootstrap"

$(async function () {
    console.log("Hello World");
});

Sometimes its sad that such basic features are not available out of the box.

1 reply

babyginger Sep 17, 2024

I concur, it would at the very least be nice to have a concise example of guide a "how to" for addressing this issue, atm its all a bit magic box

jakenuts · 2024-09-23T22:02:46Z

jakenuts
Sep 23, 2024

My complicated use case, problem and o1-preview's recommended solution

Hybrid MPA that bundles a vite/typescript front end for use in aspnet core 8.0 pages, but the pages also have inline scripts that need $() etc right away. Including jquery from a static lib folder (not installed in node_modules) and marking it as external worked for everything both sides as long as I didn't import Jquery explicitly anywhere (it was there though). Until I wanted to import 'datatables.net-dt' into a new entry point and use it conditionally. Since that app uses import JQuery from 'JQuery' it immediately failed with Uncaught TypeError: Failed to resolve module specifier "jquery".

Solution:

Keeping the externally loaded jquery out of my client side packages/bundles by loading it early in my layout page
Keeping an array of external libs that I don't want to bundle and passing it to rollupOptions.externals. (see below)
Adding it to optimizeDeps.exclude to keep vite from trying to optimize them.
Adding those to output.globals (see below)
Using the vite-plugin-externals plugin to satisfy any code that does try to import jquery like datatables

Works perfectly.

Configuration


// ==============================
// -- vite.config.ts
// ==============================

import { UserConfig, defineConfig, ConfigEnv, PluginOption } from 'vite';
import vue from '@vitejs/plugin-vue'
import { viteExternalsPlugin } from 'vite-plugin-externals';

// External libs used by both aspnet views and other bundled components
const externalLibs = ['jquery', 'jquery-validation', 'jquery-validation-unobtrusive'];
const externalGlobals = {
    jquery: 'jQuery',
    'jquery-validation': 'jQuery',
    'jquery-validation-unobtrusive': 'jQuery',
};

export default defineConfig(async (cfg: ConfigEnv) => {

  console.log(`🔨 Building for ${cfg.mode} mode`);

  let plugins: PluginOption[] = [
    vue({
      features:{
        prodDevtools: true
      }
    }),
    //...
  ];


  //
  // Tells dependencies about externals
  //
  plugins.push( viteExternalsPlugin(externalGlobals) );

  const config: UserConfig = {
    plugins: plugins,
    appType: 'mpa',
    build: {
      rollupOptions: {
    
        // Entry Points
        input: {
          'main': 'ClientApp/main.ts',                        
          'datatables': 'ClientApp/libs/datatables-lib.ts',                  
        },

        external: externalLibs,    
        output: {          
          globals: externalGlobals,    
        },
      },
    },
    optimizeDeps: {      
      exclude:externalLibs
    }
  }

  return config;
});


// ==============================
// -- _Layout.cshtml before any scripts
// ==============================

<script src="~/lib/jquery/dist/jquery.min.js" asp-append-version="true"></script>

0 replies

How to import jquery for global #3744

Replies: 13 comments · 13 replies

Vanilla js and HTML example

Vanilla js and HTML example

bootstrap.ts

vite.config.ts:

package.json

My complicated use case, problem and o1-preview's recommended solution

Solution:

Configuration

Replies: 13 comments 13 replies