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
– Bergi, Commented Feb 7, 2018 at 8:02
why not use jquery npm package and then import $ from "jquery"; — Edu Lomeli
– Edu Lomeli, Commented Feb 7, 2018 at 8:04
@newman no it is not. That and other questions/answers points always to node_modules. — distante
– distante, Commented Feb 7, 2018 at 8:08

Farouk M · Accepted Answer · 2023-01-12 15:23:01Z

3

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, 2023 at 15:23

answered Oct 3, 2018 at 14:17

Farouk M

1,2951 gold badge9 silver badges18 bronze badges

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

4 Comments

Greg Pettit Over a year ago

I just get 'jQuery is not a function' when I try to use this syntax with jQuery 3.6.0

kargirwar Over a year ago

I got the same error as above. Not sure why this is an accepted answer

VAAA Over a year ago

I get the same 'jQuery is not a function' @GregPettit, did you find a solution?

Greg Pettit Over a year ago

@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.

David Harkness · Accepted Answer · 2022-08-31 23:55:58Z

-2

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))
});

answered Aug 31, 2022 at 23:55

David Harkness

3361 gold badge4 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to import jQuery from a file using es6

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related