How to import jQuery from a file using es6

Question

Due to this project idiosyncrasies I need to import jQuery into my main.js using a direct path that is not in the node_modules folder but I am not able to do it. All the questions I have found points to jquery that lives in node_modules

I have this

import {MyModule} from './components/myModule.js';
import jQuery from './jquery/jquery-3.3.1.js';

MyModule works as expected (on Chrome) but jQuery yields:

Uncaught SyntaxError: The requested module does not provide an export named 'default'

jquery-3.3.1.js is the uncompressed, development jQuery 3.3.1 version from jQuery.com, I have also tried with the production version.

How should I import it?

Edit:

This is NOT a duplicate of How to import jquery using ES6 syntax?. Because import {$,jQuery} from 'jquery'; searches on node_modules and when I import it from the given path I get the error quoted above.

Try `import './jquery/jquery-3.3.1.js';` only. To import something `from` it, jQuery would need to use ES6 module syntax — Bergi, Feb 07 '18 at 08:02
Duplicated: https://stackoverflow.com/questions/34338411/how-to-import-jquery-using-es6-syntax — newman, Feb 07 '18 at 08:03
why not use jquery npm package and then `import $ from "jquery";` — Edu Lomeli, Feb 07 '18 at 08:04
@newman no it is not. That and other questions/answers points always to `node_modules`. — distante, Feb 07 '18 at 08:08
@EduLomeli sadly this project should always be available over internet when on develop with a list of the files used. It is a really weird thing that I do not like but I HAVE to do. — distante, Feb 07 '18 at 08:10
Possible duplicate of [How to import jquery using ES6 syntax?](https://stackoverflow.com/questions/34338411/how-to-import-jquery-using-es6-syntax) — Daniel Netzer, Feb 07 '18 at 08:12
@amedina I am testing it first directly on Chrome (that allows imports) and then using [rollupJs](https://rollupjs.org/guide/en) for the production version. — distante, May 03 '18 at 06:42
@Bergi had the only answer that worked across so many SO topics, comments, and and other internet searches. As other people noted, most people want it to be in NPM, but when you have just the standalone file, Bergi's is the one that works. — Greg Pettit, May 19 '22 at 23:13

Farouk M · Accepted Answer · 2023-01-12T15:23:01.267

2

You can ES6 import like:

import * as jQuery from './jquery/jquery-3.3.1.js'

Documentation about the import statement: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/import

If you are not using ES6, you can use @Bergi solution given in the comments of the question :

import './jquery/jquery-3.3.1.js';

edited Jan 12 '23 at 15:23

answered Oct 03 '18 at 14:17

Farouk M

1,185
7
17

2

I just get 'jQuery is not a function' when I try to use this syntax with jQuery 3.6.0 – Greg Pettit May 19 '22 at 23:11
I got the same error as above. Not sure why this is an accepted answer – kargirwar Jun 27 '22 at 04:12
I get the same 'jQuery is not a function' @GregPettit, did you find a solution? – VAAA Dec 31 '22 at 14:18
@VAAA It's been a while, but I commented in the original question that another commenter, Bergi, had a working syntax. Sadly, his "answer" is only in the form of a comment! But May 19's version of Greg believed that it worked. – Greg Pettit Jan 04 '23 at 03:51

score -2 · Answer 2 · answered Aug 31 '22 at 23:55

This worked for me.

import "@hotwired/turbo-rails"
import "@popperjs/core"
import * as bootstrap from "bootstrap";
import jQuery from "jquery"
window.jQuery = jQuery
window.$ = jQuery

$(document).on("turbo:load", () => {
    console.log("turbo!");
});
$(document).ready(function() {
    const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
    const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
});

How to import jQuery from a file using es6

2 Answers2