jsTree v3.3.8 не работает с jQuery v3.4.1 в проекте symfony 4 с бисом и веб-пакетом - PullRequest
0 голосов
/ 12 июня 2019

Введение

Я занимаюсь разработкой частного проекта и использую:

  • Symfony v4.3.1
  • jsTree v3.3.8
  • jQuery v3.3.1
  • jQuery v3.4.1

Проблема

jsTree v3.3.8 не работает с jQuery v3.4.1 с encore и webpack!

Обратите внимание, что версия jsTree v3.3.8 работает с jQuery v3.3.1 с той же конфигурацией и encore и webpack!

Так что может быть какая-то ошибка в webpack.config.js или ошибка.

Я также тестировал статический пример без encore и webpack, и он работал с последними версиями eather libaries ...

Ошибка

jQuery.Deferred exception: $project_tree.jstree is not a function ./assets/js/project_tree_show.js/<@http://127.0.0.1:8000/build/tree_show.1a08e0ff.js:30:17
mightThrow@http://127.0.0.1:8000/build/vendors~app~tree_show.5d6f9358.js:3566:29
resolve/</process<@http://127.0.0.1:8000/build/vendors~app~tree_show.5d6f9358.js:3634:12
 undefined jquery.js:3841
TypeError: $project_tree.jstree is not a function

КОД

соответствующие части webpack.config.js

// webpack.config.js
const Encore = require('@symfony/webpack-encore');
const path = require('path');

Encore
    // directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/build')

    .copyFiles({
        from: './assets/static',

        // optional target path, relative to the output dir
        to: 'static/[path][name].[ext]'

        // only copy files matching this pattern
        //pattern: /\.(png|jpg|jpeg)$/
    })

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // will output as public/build/app.js
    .addEntry('app', './assets/js/app.js')
    .addEntry('tree_show', './assets/js/project_tree_show.js')

    .addStyleEntry('main', './assets/css/main.scss')

    // allow sass/scss files to be processed
    .enableSassLoader(function(sassOptions) {},
        {
            resolveUrlLoader: false
        }
    )

    .enablePostCssLoader()

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'ClipboardJS': 'clipboard'
    })

    .enableSourceMaps(!Encore.isProduction())

    // create hashed filenames (e.g. app.abc123.css)
    .enableVersioning()

    .splitEntryChunks()

    .enableSingleRuntimeChunk()
;

const config = Encore.getWebpackConfig();

config.externals = {
    'bazinga-translator': 'Translator'
};

config.resolve.alias = {
    'jquery-ui/ui/widget': path.resolve(__dirname, 'node_modules/jquery.ui.widget/jquery.ui.widget.js')
};

// export the final configuration
module.exports = config;

project_tree_show.js

'use strict';

// loads the jquery package from node_modules
import $ from 'jquery';

// add jstree
import jstree from 'jstree';
import 'jstree/dist/themes/default/style.min.css';

$(function()
{
    let $project_tree, $project_tree_loader;

    $project_tree = $('#file-tree');
    $project_tree_loader = $('#js-file-tree-loader');

    $project_tree.jstree({
        'types': {
            'root': {
                'icon': 'lnr lnr-briefcase'
            },
            'folder': {
                'icon': 'lnr lnr-cloud'
            },
            'file': {
                'icon': 'lnr lnr-file-empty'
            },
            'image': {
                'icon': 'lnr lnr-picture'
            },
            'home': {
                'icon': 'lnr lnr-home'
            }
        },
        'search': {
            show_only_matches: true,
            search_callback: function (str, node)
            {
                if (node.text.indexOf(str) >= 0)
                {
                    return true;
                }
            }
        },
        "plugins": [
            "types",
            "search"
        ],
    });
});

Заключение

Идеи и возможные решения приветствуются.

Спасибо!

...