Uncaught TypeError: Object(...) is not a function when importing function [duplicate]

Question

I've got the following script that works fine as is:

eventslist.bundle.js

// import {
//     equalheight,
// } from './functions';

window.addEventListener('DOMContentLoaded', (event) => {

    /**
     * Will ensure that all elements are of equal height 
     * @param {DOMElem} selector 
     */
    const equalheight = (selector) => {

        var currentTallest = 0,
            currentRowStart = 0,
            rowDivs = new Array(),
            $el,
            topPosition = 0;
        $(selector).each(function () {
            ...

However, when I move this function into the functions.js file, and uncomment the import statement:

functions.js

import {$} from 'jquery';

/**
 * Will ensure that all elements are of equal height 
 * @param {DOMElem} selector 
 */
export const equalheight = (selector) => {

    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array(),
        $el,
        topPosition = 0;
    $(selector).each(function () {

And then update my bundle script:

eventslist.bundle.js

import {
    equalheight,
} from './functions';

window.addEventListener('DOMContentLoaded', (event) => {

    // /**
    //  * Will ensure that all elements are of equal height 
    //  * @param {DOMElem} selector 
    //  */
    // const equalheight = (selector) => {

    //     var currentTallest = 0,
    //         currentRowStart = 0,
    //         rowDivs = new Array(),
    //         $el,
    //         topPosition = 0;
    //     $(selector).each(function () {

I get an error on the $(selector).each(function () { line telling me that

Uncaught TypeError: Object(...) is not a function

I'd like to remove this function from the script so it's re-usable. But what am I doing wrong? jQuery is a NPM dependency and from what I've read, this is how to import it.

Will ensure that all elements are of equal height you don't need JS for that. CSS Flexbox does it out of the box. display:flex; align-items:stretch; job done — Jeremy Thille
– Jeremy Thille, Commented May 19, 2020 at 10:21
Also, why not simply import jQuery in your index.html? <script src=".../jquery.js"> — Jeremy Thille
– Jeremy Thille, Commented May 19, 2020 at 10:23
Thanks. I've used a <script> tag as you suggest which kinda makes sense anyway as I can load it from CDN. Yeh works now. I'll explore the flex option too. I'm using isotope which does it's own positioning anyway, perhaps I can find a CSS solution to the height thing instead. Can't recall now why I opted for JS, it's been there a while. — Martyn
– Martyn, Commented May 19, 2020 at 10:39
Possibly because I'm using boostrap columns and it's those i need to resize, maybe I didn't see the option in bootstrap itself and defaulted to JS instead. I should have explored the CSS options first I guess :) — Martyn
– Martyn, Commented May 19, 2020 at 10:41
Implicit dependencies are a really bad idea in module development. I highly advise against including jQuery as a global, undocumented dependency. — connexo
– connexo, Commented May 19, 2020 at 10:58

John Lin · Accepted Answer · 2020-05-19 10:35:08Z

1

It seems the different version of jquery and npm has different import way.

Accroding to How to import jquery using ES6 syntax?

I think you can try ways as follows：

import * as $ from 'jquery';

or

import $ from "jquery";

And I suggest that you can use console.log to observe what you really imported.

answered May 19, 2020 at 10:35

John Lin

763 bronze badges

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

Comments

Swapnil Soni · Accepted Answer · 2020-05-19 10:37:31Z

0

Import your jQuery with

import * as $ from 'jquery'

answered May 19, 2020 at 10:37

Swapnil Soni

1,0791 gold badge13 silver badges31 bronze badges

Collectives™ on Stack Overflow

Uncaught TypeError: Object(...) is not a function when importing function [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related