Electron-React-Typescript-Webpack项目中TypeError: jj(...).dialog is not a function错误的解决方法

我来帮你搞定这个报错——本质原因是jQuery UI没有被正确加载并挂载到你的jQuery实例上，结合你的技术栈，咱们一步步修复：

1. 先补上缺失的jQuery UI依赖 #

你只安装了类型包@types/jqueryui，但没装实际运行的jquery-ui库，先执行安装命令：

npm install jquery-ui --save
# 用yarn的话：yarn add jquery-ui

2. 正确导入并初始化Dialog模块 #

不要直接导入整个jquery-ui（会冗余加载很多没用的组件），只导入Dialog相关的部分，并且要在jQuery之后导入，让它能挂载到你的jQuery实例上：

import jQuery from 'jquery';
// 导入Dialog核心功能和默认样式（样式可选，根据需求取舍）
import 'jquery-ui/ui/widgets/dialog';
import 'jquery-ui/themes/base/dialog.css';

let jj = jQuery.noConflict();
jj(document).ready(function () {
  // 关键：先初始化Dialog，再调用open方法！很多人漏掉这步
  jj('#contact_dialog').dialog({
    autoOpen: false, // 默认隐藏，点击按钮再触发打开
    title: '新建联系人', // 可选配置，自定义弹窗标题
    width: 400 // 可选配置，自定义弹窗宽度
  });

  jj('#new-contact').click(function (ev) {
    jj('#contact_dialog').dialog('open');
  });
});

3. 配置Webpack让jQuery全局可用（可选但推荐） #

在Webpack配置中使用ProvidePlugin，让jQuery全局暴露，确保jQuery UI能自动绑定到正确的jQuery对象上，避免手动处理noConflict的麻烦：
在webpack.config.js的plugins数组中添加：

const webpack = require('webpack');

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

配置后，你甚至可以不用每次手动导入jQuery，直接在代码中用$或jQuery即可。

4. 修复TypeScript类型识别问题 #

虽然你已经装了@types/jquery和@types/jqueryui，但要确保TS能正确识别jQuery UI对jQuery的扩展：

• 打开tsconfig.json，在compilerOptions里添加types：

{
  "compilerOptions": {
    // ...其他配置
    "types": ["jquery", "jqueryui"]
  }
}

• 或者在使用Dialog的文件顶部添加类型引用：

/// <reference types="jqueryui" />

5. Electron环境的特殊注意事项 #

如果你是在Electron渲染进程中使用，要确保Webpack没有把jQuery标记为外部依赖（默认情况下不会，但如果你的配置有特殊处理要检查）。如果用了electron-webpack，可以在配置中明确指定jQuery的解析规则，避免Electron的Node.js环境干扰。

完成以上步骤后，重启Webpack开发服务器，重新加载页面，点击#new-contact按钮，应该就能正常弹出Dialog了！

内容的提问来源于stack exchange，提问作者Raphael10