未捕获的 TypeError：导入函数时 Object(...) 不是函数 [重复]答案

【问题标题】：Uncaught TypeError: Object(...) is not a function when importing function [duplicate]未捕获的 TypeError：导入函数时 Object(...) 不是函数 [重复]
【发布时间】：2020-09-05 08:46:04
【问题描述】：

我有以下脚本可以正常工作：

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 () {
            ...

但是，当我将此函数移动到 functions.js 文件中并取消注释导入语句时：

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 () {

然后更新我的捆绑脚本：

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 () {

我在$(selector).each(function () { 行收到一条错误消息，告诉我

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

我想从脚本中删除这个函数，以便它可以重复使用。但是我做错了什么？ jQuery 是一个 NPM 依赖项，从我读过的内容来看，这是导入它的方法。

【问题讨论】：

Will ensure that all elements are of equal height 你不需要 JS。 CSS Flexbox 开箱即用。 display:flex; align-items:stretch; 工作完成
另外，为什么不简单地在 index.html 中导入 jQuery？ <script src=".../jquery.js">
谢谢。正如您所建议的那样，我使用了一个
可能是因为我正在使用 boostrap 列并且我需要调整这些列的大小，也许我在 bootstrap 本身中没有看到该选项，而是默认为 JS。我想我应该首先探索 CSS 选项 :)
隐式依赖在模块开发中是一个非常糟糕的主意。我强烈建议不要将 jQuery 作为一个全局的、未记录的依赖项。

标签： javascript ecmascript-6

【解决方案1】：

jquery 和 npm 的不同版本似乎有不同的导入方式。

根据How to import jquery using ES6 syntax?

我觉得你可以尝试以下方法：

import * as $ from 'jquery';

或

import $ from "jquery";

而且我建议你可以使用console.log来观察你真正导入了什么。

【讨论】：

【解决方案2】：

使用

导入您的 jQuery

import * as $ from 'jquery'

【讨论】：