React JS中formbuilder与jquery-ui-sortable相关错误解决求助

安全阿岳

2026-7-24

问题解决方法

1. 确保依赖引入顺序

formbuilder 依赖 jQuery 和 jquery-ui-sortable，必须严格按照先引入jQuery，再引入jquery-ui-sortable，最后引入formbuilder的顺序加载：

原生HTML场景：

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery-ui-sortable.min.js"></script>
<script src="path/to/formbuilder.min.js"></script>

模块化项目（Webpack/Vite等）：
在App.js中先全局挂载jQuery，再导入其他依赖：

import $ from 'jquery';
window.jQuery = window.$ = $;
import 'jquery-ui-sortable';
import formBuilder from 'formbuilder';

2. 检查版本兼容性

不同版本的依赖可能存在兼容问题：

查看formbuilder官方文档，确认其推荐的jQuery（通常为3.x系列）和jquery-ui版本

在package.json中锁定兼容版本后重新安装：

"dependencies": {
  "jquery": "^3.6.4",
  "jquery-ui-sortable": "^1.0.0",
  "formbuilder": "^3.10.0"
}

执行命令：npm install

3. 框架项目特殊配置（Vue/React等）

如果是在框架项目中，需要确保jQuery被注册为全局变量：

Vue项目：在main.js中添加

import $ from 'jquery';
window.$ = window.jQuery = $;

React项目：可使用expose-loader暴露全局变量
先安装依赖：npm install expose-loader --save-dev
再在Webpack配置中添加规则：

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: { exposes: ['$', 'jQuery'] }
      }
    ]
  }
};