Введение
Я занимаюсь разработкой частного проекта и использую:
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"
],
});
});
Заключение
Идеи и возможные решения приветствуются.
Спасибо!