再次出现 webpack 问题，因为 datepicker() 不是函数

Question

jquery-ui Datepicker 小部件无法与 Encore webpack 一起使用，因为它不是一个函数：

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

这是我的 app.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');

它帮助了我。