How to import jquery using ES6 syntax?

Question

I'm writing a new app using (JavaScript) ES6 syntax through babel transpiler and the preset-es2015 plugins, as well as semantic-ui for the style.

index.js

import * as stylesheet from '../assets/styles/app.scss';
import * as jquery2 from '../dist/scripts/jquery.min';
import * as jquery3 from '../node_modules/jquery/dist/jquery.min';

console.log($('my-app'));

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
<body>
<script src="dist/app.js"></script>
</body>
</html>

Project structure

.
├── app/
│   ├── index.js
├── assets/
├── dist/
│   ├── scripts/
│   │   ├── jquery.min.js
├── index.html
├── node_modules/
│   ├── jquery/
│   │   ├── dist/
│   │   │   ├── jquery.min.js
├── package.json
└── tests/

package.json

  …
  "scripts": {
    "build:app": "browserify -e ./app/index.js -o ./dist/app.js",
    "copy:jquery": "cpy 'node_modules/jquery/dist/jquery.min.js' ./dist/scripts/",
    …
  },
  "devDependencies": {
    "babel-core": "6.3.x",
    "babel-preset-es2015": "6.3.x",
    "babelify": "7.2.x",
    "cpy": "3.4.x",
    "npm-run-all": "1.4.x",
    "sassify": "0.9.x",
    "semantic-ui": "2.1.x",
    …
  },
  "browserify": {
    "transform": [
      [ "babelify", { "presets": [ "es2015"]}],
      [ "sassify", { "auto-inject": true}]
    ]
  }

Question

Using classic <script> tag to import jquery works fine, but I'm trying to use the ES6 syntax.

How do I import jquery to satisfy semantic-ui using ES6 import syntax?
Should I import from the node_modules/ directory or my dist/ (where I copy everything)?

Well, importing from dist doesn't make sense since that is your distribution folder with production ready app. Building your app should take what's inside node modules and add it to the dist folder, jQuery included. — nem035
– nem035, Commented Dec 17, 2015 at 15:42
Nor does importing from an scss file. Unless there's some awesome plugin I'm missing out on! — CodingIntrigue
– CodingIntrigue, Commented Dec 17, 2015 at 15:58
@RGraham it's called sassify, a browserify plugin. I'm inspiring myself from oncletom gist — Édouard Lopez
– Édouard Lopez, Commented Dec 17, 2015 at 15:59
@RGraham - the syntax looks odd, but using "require" for css / sass files is encouraged with build tools like webpack + babel. eg. require("../node_modules/bootstrap/dist/css/bootstrap.min.css"); — arcseldon
– arcseldon, Commented Dec 18, 2015 at 10:31
@arcseldon Agreed, that's an interesting approach to modularisation - glad I asked! — CodingIntrigue
– CodingIntrigue, Commented Dec 18, 2015 at 10:33

Édouard Lopez · Accepted Answer · 2017-03-22 09:57:48Z

167

index.js

import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;

First, as @nem suggested in comment, the import should be done from node_modules/:

Well, importing from dist/ doesn't make sense since that is your distribution folder with production ready app. Building your app should take what's inside node_modules/ and add it to the dist/ folder, jQuery included.

Next, the glob –* as– is wrong as I know what object I'm importing (e.g. jQuery and $), so a straigforward import statement will work.

Last you need to expose it to other scripts using the window.$ = $.

Then, I import as both $ and jQuery to cover all usages, browserify remove import duplication, so no overhead here! ^o^y

edited Mar 22, 2017 at 9:57

answered Dec 17, 2015 at 17:10

Édouard Lopez

43.7k30 gold badges134 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

qarthandso Over a year ago

Not sure if any y'all still around but could you explain the need for window.$ = $. I don't understand why that's needed. Won't other scripts be automatically bundled into a single js script when browserify does it's magic?

Jackie Over a year ago

Why not just have import {$,jQuery} from 'jquery';? Why so many imports?

Avinash Raj Over a year ago

How you find the name exact class name , ie jQuery ?

daslicht Over a year ago

I either get Module '"jquery"' has no exported member 'jQuery' or Module '"jquery"' has no default export what am I missing please?

pmont Over a year ago

Older versions of jQuery don't use named exports. Newer versions do. The method of import depends on which version of jQuery you're using.

|

ha7ilm · Accepted Answer · 2017-02-11 12:00:52Z

78

Based on the solution of Édouard Lopez, but in two lines:

import jQuery from "jquery";
window.$ = window.jQuery = jQuery;

answered Feb 11, 2017 at 12:00

ha7ilm

1,53313 silver badges11 bronze badges

5 Comments

arcseldon Over a year ago

This worked for me, whereas the accepted answer approach didn't... I used much the same: import $ from 'jquery'; window.jQuery = $;window.$ = $;

Nabil Baadillah Over a year ago

one line : window.$ = window.jQuery = require('jquery');

Nicolas Le Thierry d'Ennequin Over a year ago

@NabilBaadillah require (CommonJS) is not import (ES module) and the one-liner doesn't seem possible with import. (Someone cares?)

Benur21 Over a year ago

One-liner is definitely possible: import jQuery from "jquery"; window.$ = window.jQuery = jQuery;

albert Over a year ago

It works until I refresh a page! bellow error occur: ReferenceError: jQuery is not defined

Yukulélé · Accepted Answer · 2022-03-16 10:46:04Z

49

You can create a module converter like below:

// jquery.module.js
import 'https://code.jquery.com/jquery-3.6.0.min.js'
export default window.jQuery.noConflict(true)

This will remove global variables introduced by jQuery (jQuery & $) and export jQuery object as default.

Then use it in your script:

// script.js
import $ from "./jquery.module.js";
    
$(function(){
  $('body').text('youpi!');
});

Do not forget to load it as a module in your document:

<script type='module' src='./script.js'></script>

http://plnkr.co/edit/a59ETj3Yo2PJ0Aqkxbeu?p=preview

edited Mar 16, 2022 at 10:46

answered Oct 15, 2018 at 22:54

Yukulélé

17.4k12 gold badges78 silver badges105 bronze badges

4 Comments

sidnc86 Over a year ago

This one helped! I generally like to try out basics before using any IDE/DevEnv. Without using Node/NPM/Babble I wanted to understand ES6 import and export. I had managed to get basic import and export working but was struggling with jquery inclusion. I had my custom code written as module but kept referencing jquery in its traditional way using the script tag in html. So I ended up having 2 script tags one to include jquery and other to include app.js. With your answer, I could get rid of my first jquery script tag and used the intermediate jquery.module.js as you suggested.

8ctopus Over a year ago

This solution also allows to extend jquery with libraries that build on top of it.

import "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"; import "https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"; import "https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.js";  // export jquery with cookies and notify export default window.jQuery.noConflict(true);

Connor Kuo Over a year ago

This one works in TypeScript.

Drago Rosson Over a year ago

This allowed me to get type checking within nvim in pure JS! I used import $ from "jquery" for type checking (I guess the lsp looks at the jquery.js I have sitting next to main.js?) and an import map to point "jquery" to jquery.module.js. Many thanks.

ivan hertz · Accepted Answer · 2017-07-07 02:04:07Z

18

Import the entire JQuery's contents in the Global scope. This inserts $ into the current scope, containing all the exported bindings from the JQuery.

import * as $ from 'jquery';

Now the $ belongs to the window object.

answered Jul 7, 2017 at 2:04

ivan hertz

1851 silver badge6 bronze badges

3 Comments

SpaceMonkey Over a year ago

this worked for me. The top "import {jQuery as $} from 'jquery';" gives an error saying "jQuery" not found.

Armin Ghasemi Over a year ago

I tested all the above codes and just this worked for me. also, I added window.$ = window.jQuery = $; for those codes that are before load event

albert Over a year ago

ReferenceError: jQuery is not defined ! Why?

sandre89 · Accepted Answer · 2021-05-05 19:53:04Z

13

If it helps anyone, javascript import statements are hoisted. Thus, if a library has a dependency (eg bootstrap) on jquery in the global namespace (window), this will NOT work:

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
import 'bootstrap/dist/js/bootstrap.min';

This is because the import of bootstrap is hoisted and evaluated before jQuery is attached to window.

One way to get around this is to not import jQuery directly, but instead import a module which itself imports jQuery AND attaches it to the window.

import jQuery from './util/leaked-jquery';
import 'bootstrap/dist/js/bootstrap.min';

where leaked-jquery looks like

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;
export default $;
export { jQuery };

EG, https://github.com/craigmichaelmartin/weather-app--birch/blob/4d9f3b03719e0a2ea3fb5ddbbfc453a10e9843c6/javascript/util/leak_jquery.js

edited May 5, 2021 at 19:53

sandre89

6,0064 gold badges52 silver badges74 bronze badges

answered Jul 10, 2018 at 18:25

craigmichaelmartin

6,5771 gold badge24 silver badges27 bronze badges

2 Comments

Čamo Over a year ago

Why there is import jQuery from './util/leaked-jquery'; and not import $ from './util/leaked-jquery';

Čamo Over a year ago

If I call log( window.$ ) inside the leaked-jquery file it is undefined. Why?

Muhammad Reda · Accepted Answer · 2017-07-20 19:53:13Z

10

webpack users, add the below to your plugins array.

let plugins = [
  // expose $ and jQuery to global scope.
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
];

answered Jul 20, 2017 at 19:53

Muhammad Reda

27.1k14 gold badges100 silver badges107 bronze badges

3 Comments

Édouard Lopez Over a year ago

What's the pro of this approach ? Cause you're binding yourself to your building tool here.

Muhammad Reda Over a year ago

this is the only way I got it working. I tried import {$, jQuery} from 'jquery'; but id didn't work, I believe because it's not defined (imported) in other modules.

Amir Over a year ago

This is the best solution for webpack users because jQuery should available globally in all files, without the redundant import statements.

Ritin · Accepted Answer · 2017-04-21 15:43:18Z

The accepted answer did not work for me
note : using rollup js dont know if this answer belongs here
after
npm i --save jquery
in custom.js

import {$, jQuery} from 'jquery';

or

import {jQuery as $} from 'jquery';

i was getting error : Module ...node_modules/jquery/dist/jquery.js does not export jQuery
or
Module ...node_modules/jquery/dist/jquery.js does not export $
rollup.config.js

export default {
    entry: 'source/custom',
    dest: 'dist/custom.min.js',
    plugins: [
        inject({
            include: '**/*.js',
            exclude: 'node_modules/**',
            jQuery: 'jquery',
            // $: 'jquery'
        }),
        nodeResolve({
            jsnext: true,
        }),
        babel(),
        // uglify({}, minify),
    ],
    external: [],
    format: 'iife', //'cjs'
    moduleName: 'mycustom',
};

instead of rollup inject, tried

commonjs({
   namedExports: {
     // left-hand side can be an absolute path, a path
     // relative to the current directory, or the name
     // of a module in node_modules
     // 'node_modules/jquery/dist/jquery.js': [ '$' ]
     // 'node_modules/jquery/dist/jquery.js': [ 'jQuery' ]
        'jQuery': [ '$' ]
},
format: 'cjs' //'iife'
};

package.json

  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.10.4",
    "babel-eslint": "6.1.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-external-helpers": "6.18.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-register": "6.9.0",
    "eslint": "2.12.0",
    "eslint-config-airbnb-base": "3.0.1",
    "eslint-plugin-import": "1.8.1",
    "rollup": "0.33.0",
    "rollup-plugin-babel": "2.6.1",
    "rollup-plugin-commonjs": "3.1.0",
    "rollup-plugin-inject": "^2.0.0",
    "rollup-plugin-node-resolve": "2.0.0",
    "rollup-plugin-uglify": "1.0.1",
    "uglify-js": "2.7.0"
  },
  "scripts": {
    "build": "rollup -c",
  },

This worked :
removed the rollup inject and commonjs plugins

import * as jQuery from 'jquery';

then in custom.js

$(function () {
        console.log('Hello jQuery');
});

It looks like namedExports doesn't exist anymore in the commonjs plugin

Stephen Shank · Accepted Answer · 2020-03-12 15:58:06Z

8

I did not see this exact syntax posted yet, and it worked for me in an ES6/Webpack environment:

import $ from "jquery";

Taken directly from jQuery's NPM page. Hope this helps someone.

answered Mar 12, 2020 at 15:58

Stephen Shank

3823 silver badges8 bronze badges

Comments

SamGoody · Accepted Answer · 2020-07-19 12:26:30Z

4

Pika is a CDN that takes care of providing module versions of popular packages

<script type='module'>
    import * as $ from 'https://cdn.skypack.dev/jquery';

    // use it!
    $('#myDev').on('click', alert);
</script>

Skypack is Pika, so you could also use: import * as $ from 'https://cdn.pika.dev/jquery@^3.5.1';

answered Jul 19, 2020 at 12:26

SamGoody

14.7k10 gold badges84 silver badges93 bronze badges

Comments

VNN456 · Accepted Answer · 2020-05-04 18:32:38Z

3

If you are not using any JS build tools/NPM, then you can directly include Jquery as:

import  'https://code.jquery.com/jquery-1.12.4.min.js';
const $ = window.$;

You may skip import(Line 1) if you already included jquery using script tag under head.

answered May 4, 2020 at 18:32

VNN456

1478 bronze badges

2 Comments

Galactic Ketchup Over a year ago

I don't know why, but this one worked for me when no others did. Any import statement other than the bare import 'filepath/jquery.js' threw some error about the module not exporting the function I wanted or $ not being a function or just a SyntaxError at the sight of the word from.

Wahinya Brian Over a year ago

@GalacticKetchup I also agree, mine worked too while the rest didnt. @VNN456 kindly explain why use const $ = window.$ because in my code it doesnt affect the functionality whether I include that const or not. so probably there is something I'm missing out unknowingly by not reassigning the window object.

cwtuan · Accepted Answer · 2017-03-28 14:51:08Z

1

First of all, install and save them in package.json:

npm i --save jquery
npm i --save jquery-ui-dist

Secondly, add a alias in webpack configuration:

resolve: {
  root: [
    path.resolve(__dirname, '../node_modules'),
    path.resolve(__dirname, '../src'),
  ],
  alias: {
    'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
  },
  extensions: ['', '.js', '.json'],
}

It work for me with the last jquery(3.2.1) and jquery-ui(1.12.1).

See my blog for detail: http://code.tonytuan.org/2017/03/webpack-import-jquery-ui-in-es6-syntax.html

answered Mar 28, 2017 at 14:51

cwtuan

1,9171 gold badge19 silver badges23 bronze badges

Comments

Nisse Engström · Accepted Answer · 2017-09-17 22:56:26Z

1

import {jQuery as $} from 'jquery';

edited Sep 17, 2017 at 22:56

Nisse Engström

4,76323 gold badges29 silver badges44 bronze badges

answered Sep 17, 2017 at 22:23

Farshid Ashouri

18.1k7 gold badges58 silver badges68 bronze badges

1 Comment

SpaceMonkey Over a year ago

it says jQuery not found. The other answer worked "import * as $ from 'jquery';". Do you know why that happens? My JS file where I'm importing jquery is part of an Angular/Typescript file

north.inhale · Accepted Answer · 2019-11-14 12:02:14Z

My project stack is: ParcelJS + WordPress

WordPress got jQuery v1.12.4 itself and I have also import jQuery v3^ as module for other depending modules as well as bootstrap/js/dist/collapse, for example... Unfortunately, I can’t leave only one jQuery version due to other WordPress modular dependencies. And ofcourse there is conflict arises between two jquery version. Also keep in mind we got two modes for this project running Wordpress(Apache) / ParcelJS (NodeJS), witch make everything little bit difficulty. So at solution for this conflict was searching, sometimes the project broke on the left, sometimes on the right side. SO... My finall solution (I hope it so...) is:

    import $ from 'jquery'
    import 'popper.js'
    import 'bootstrap/js/dist/collapse'
    import 'bootstrap/js/dist/dropdown'
    import 'signalr'

    if (typeof window.$ === 'undefined') {
        window.$ = window.jQ = $.noConflict(true);
    }

    if (process) {
        if (typeof window.jQuery === 'undefined') {
            window.$ = window.jQuery = $.noConflict(true);
        }
    }

    jQ('#some-id').do('something...')    

    /* Other app code continuous below.......... */

I still didn’t understand how myself, but this method works. Errors and conflicts of two jQuery version no longer arise

Sky Yip · Accepted Answer · 2022-01-14 01:33:17Z

1

import $ from 'jquery'

// export for others scripts to use
window.$ = window.jQuery = $

answered Jan 14, 2022 at 1:33

Sky Yip

1,08912 silver badges10 bronze badges

Comments

Ananda Masri · Accepted Answer · 2023-11-15 22:11:52Z

1

The accepted answer shows how to import jQuery statically.

However, jQuery is a big package and we often want to load only if or when it's needed. So, for completeness, here's how to load jQuery dynamically e.g. within a function:

async function showStatus(statusMessage) {
    if (typeof window.jQuery === 'undefined') {
        window.jQuery = await import('jquery').default;
        window.$ = window.jQuery;
    } 

    jQuery('#status').html(statusMessage);
}

answered Nov 15, 2023 at 22:11

Ananda Masri

4033 silver badges9 bronze badges

Comments

Yoseph · Accepted Answer · 2017-07-18 19:01:03Z

0

Import jquery (I installed with 'npm install [email protected]')

import 'jquery/jquery.js';

Put all your code that depends on jquery inside this method

+function ($) { 
    // your code
}(window.jQuery);

or declare variable $ after import

var $ = window.$

answered Jul 18, 2017 at 19:01

Yoseph

2,4261 gold badge15 silver badges19 bronze badges

Comments

Ivan Castellanos · Accepted Answer · 2018-11-18 03:18:07Z

0

I wanted to use the alread-buildy jQuery (from jquery.org) and all the solutions mentioned here didn't work, how I fixed this issue was adding the following lines which should make it work on nearly every environment:

 export default  ( typeof module === 'object' && module.exports && typeof module.exports.noConflict === 'function' )
    ? module.exports.noConflict(true)
    : ( typeof window !== 'undefined' ? window : this ).jQuery.noConflict(true)

edited Nov 18, 2018 at 3:18

answered Nov 18, 2018 at 1:38

Ivan Castellanos

8,2521 gold badge51 silver badges44 bronze badges

1 Comment

north.inhale Over a year ago

Ivan Castellanos you should expand your example to better understand how to apply it

Cherrol · Accepted Answer · 2019-11-06 02:45:23Z

0

You can import like this

import("jquery").then((jQuery) => {
  window.$ = jQuery;
  window.jQuery = jQuery;
  import("bootstrap").then((_bs)=>{
    $(function() {});
  })
});

answered Nov 6, 2019 at 2:45

Cherrol

1

Comments

Martin Konecny · Accepted Answer · 2020-02-10 20:45:01Z

0

If you are using Webpack 4, the answer is to use the ProvidePlugin. Their documentation specifically covers angular.js with jquery use case:

new webpack.ProvidePlugin({
  'window.jQuery': 'jquery'
});

The issue is that when using import syntax angular.js and jquery will always be imported before you have a chance to assign jquery to window.jQuery (import statements will always run first no matter where they are in the code!). This means that angular will always see window.jQuery as undefined until you use ProvidePlugin.

answered Feb 10, 2020 at 20:45

Martin Konecny

59.9k20 gold badges144 silver badges159 bronze badges

Collectives™ on Stack Overflow

How to import jquery using ES6 syntax?

index.js

index.html

Project structure

package.json

Question

19 Answers 19

index.js

13 Comments

5 Comments

4 Comments

3 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

index.js

index.html

Project structure

package.json

Question

19 Answers 19

index.js

13 Comments

5 Comments

4 Comments

3 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related