Encore webpack 问题，因为 datepicker() 不是一个函数

Question

jquery-ui Datepicker widget 不能与 Encore webpack 一起使用，因为不是函数：

TypeError: $(...).datepicker is not a function

这是我的应用程序.js：

global.$ = global.jQuery = $;
require('jquery-ui');
require('popper.js');
require('bootstrap');
require('bootstrap-table');
require('select2');
require('../lib/jquery-switchbutton/jquery.switchButton.js');
require('./bootstrap3-typeahead.min.js');

和 webpack 配置：

var Encore = require('@symfony/webpack-encore');
var path = require('path');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.autoProvideVariables({
$: "jquery",
jQuery: "jquery",
Popper: ['popper.js', 'default']
});
var config = Encore.getWebpackConfig();
config.resolve.alias = {
jquery: path.join(__dirname, 'node_modules/jquery/dist/jquery')
};
module.exports = config;

有什么解决办法吗？谢谢！

Answer 1

根据这篇文章 - https://medium.com/mitchtalmadge/datetimepicker-is-not-a-function-webpack-fix-551177a11035 - "问题是datetimepicker正在尝试使用自己的jquery版本，而Web应用程序上其他所有内容使用的jquery版本是不同的版本" 为了使用本文中的解决方案，您必须稍微编辑一下webpack.config.js最后，您应该替换module.exports = Encore.getWebpackConfig();通过以下：

let config = Encore.getWebpackConfig();
config.resolve.alias = {
// Force all modules to use the same jquery version.
'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
};
module.exports = config;

如果需要，请添加到顶部：

const path = require('path');

它帮助了我。