导入jQuery的$并导出后调用报$不是函数的问题求解

数据老陈

2026-9-27

问题产生原因

jQuery官方的ESM模块包仅提供默认导出，不支持{ $ }形式的命名解构导入，你代码中的import {$} from "jquery"获取到的$实际为undefined，你将该值导出后，外部调用时把undefined作为函数执行，自然抛出「不是函数」的报错。
未在webpack中配置jQuery的全局注入规则时，也无法直接通过命名导入的方式获取jQuery实例。

解决方案

方案1：修改导入写法（最优先推荐）

直接将common.js中的命名导入改为默认导入即可，原有导出逻辑和外部引用逻辑不需要做任何调整：

// common.js 修正后代码
import $ from "jquery";
const mytoggler = element => $(element).toggle();
export {$, mytoggler}

方案2：webpack全局注入jQuery

如果项目内多处使用jQuery，不想重复导入，可以在webpack配置中新增ProvidePlugin配置实现全局注入：

// webpack.config.js 新增配置项
const webpack = require('webpack');

module.exports = {
  // 原有其他配置不变
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

配置生效后全局环境可直接调用$，不需要额外写import导入逻辑。