Webpack/encore compatibility - $(...).jstree is not a function

We tried to use jstree for a project, but we can't get it to work with encore/webpack.

Our webpack.config.js looks like this

const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or subdirectory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    [...]
    .addEntry('assetOverview', './assets/js/asset/overview.js')

    .copyFiles({
        from: './assets/img',
        to: 'img/[path][name].[hash:8].[ext]',
    })

  .copyFiles({
    from: './assets/fonts',
    to: 'fonts/[path][name].[hash:8].[ext]',
  })

    // 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()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // enables and configure @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = '3.23';
    })

    .enableSassLoader()

    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
    .enableVueLoader()
;

module.exports = Encore.getWebpackConfig();

We tried it with the following script:

require('jstree');

$(() => {
    $('#jstree_demo_div').jstree({ 'core' : {
            'data' : [
                'Simple root node',
                {
                    'text' : 'Root node 2',
                    'state' : {
                        'opened' : true,
                        'selected' : true
                    },
                    'children' : [
                        { 'text' : 'Child 1' },
                        'Child 2'
                    ]
                }
            ]
        } });
});

With that combination it we get the following error:

Uncaught TypeError: $(...).jstree is not a function

We also found a few issues in this repository e.g.

So we tried the fixes in that issues e.g.

Disable autoProvidejQuery() and import jQuery within the file where it is needed
We also followed the Symofny Encore Documentation for legacy/Jquery Plugins.

I hope somebody can help out, thanks in advance ! :)

vakata / jstree

Webpack/encore compatibility - $(...).jstree is not a function #2770