'Jquery in webpack encore not work on Windows OS

Have the following configuration webpack.config.js:

Encore
    .addEntries({
        base_app: './assets/js/entries/_base-app.js',
        menu_app: './assets/js/entries/_menu-app.js',
    })
    .addEntry('index', './assets/js/entries/index.js')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
    .autoProvideVariables({
        Popper: ['popper.js', 'default'],
    })

config webpack_encore.yaml:

webpack_encore:
    output_path: '%kernel.project_dir%/public/build'
    
    script_attributes:
        defer: false

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

in assets _base-app.js i'm also add jquery to global:

// create global $ and jQuery variables
global.$ = global.jQuery = require('jquery');

// core scripts
import 'bootstrap-material-design';
import 'material-dashboard/assets/js/material-dashboard';
import 'select2';
import 'bootstrap-select';

base.html.twig:

<!DOCTYPE html>
<html>
    <body>
        {% block body %}{% endblock %}

        {% block baseScript %}
            {{ encore_entry_script_tags('base_app') }}
        {% endblock %}

        {% block loadScript %}{% endblock %}
    </body>
</html>

and index.html.twig:

{% extends 'base.html.twig' %}

{% block loadScript %}
    {{ encore_entry_script_tags('index') }}
{% endblock %}

{% block body %}
    <select id="selectpicker" class="selectpicker" data-style="select-with-transition">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
{% endblock %}

During assembly on linux and iOS all work perfectly, but on windows os i'm get error in console:

Uncaught TypeError: n(...).selectpicker is not a function

and also I don't have access to jquery globally:

in linux

$.fn.jquery <- '3.6.0'

in windows:

$.fn.jquery <- Uncaught (in promise) TypeError: t(...).selectpicker is not a function

UPDATE:

package.json:

"dependencies": {
    "bootstrap-select": "^1.13.18",
    "jquery": "^3.6.0"
}

Why in windows os jquery doesn't work?

jquerysymfonywebpackwebpack-encore


Solution 1:[1]

The solution consists of several points:

  1. Only add jQuery plugins like 'select2' and 'bootstrap-select' to files where they will be used;

  2. In webpack.config.js use the following 'jquery' and 'popper' aliases:

.addAliases({
    jquery: 'jquery/src/jquery',
    popper: 'popper.js/src/index',
})
  1. Using material-dashboard important import perfect-scrollbar plugin before material-dashboard (_base-app.js):
// core scripts
import 'bootstrap-material-design';
import 'material-dashboard/assets/js/plugins/perfect-scrollbar.jquery.min';
import 'material-dashboard/assets/js/material-dashboard';

After these steps everything worked.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 qnixdev

Related Questions