CODEWITHSUNDEEP
jqueryjquery-uiwebpackdatepickerwebpack-encore
Ducho
Ducho

Reputation: 53

Encore webpack problem because datepicker() is not a function

jquery-ui Datepicker widget not working with Encore webpack because is not a function: 

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

Here is my 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');

and webpack config:

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;

Any solutions? Thanks!

Upvotes: 4

Views: 1545

Answers (1)

boehpyk
boehpyk

Reputation: 176

According to this article - https://medium.com/mitchtalmadge/datetimepicker-is-not-a-function-webpack-fix-551177a11035 - "The problem is that datetimepicker is trying to use its own version of jquery, while the version of jquery used by everything else on the web application was a different version" In order to use solution from this article, you have to edit a bit your webpack.config.js In the end of it, you should replace module.exports = Encore.getWebpackConfig(); by the following:

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;

And if it's needed add to the top:

const path = require('path');

It helped me.

Upvotes: 5

Related Questions