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

Posted 2023-05-08

【中文标题】Encore webpack 问题，因为 datepicker() 不是函数

【英文标题】：Encore webpack problem because datepicker() is not a function

【发布时间】：2020-04-27 22:01:41

【问题描述】：

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;

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

【参考方案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');

它帮助了我。