Webpack Encore - jQuery plugins out of view

I'm trying to use SensioLab Webpack Encore in my Symfony 3.3 project, but after adding few scripts to webpack, my script doesn't see functions of other scripts.

package.json

{
  "name": "HIDDEN",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "description": "HIDDEN",
  "repository": {
    "url": "HIDDEN",
    "type": "git"
  },
  "author": "Alexey Samara <HIDDEN>",
  "dependencies": {
    "jquery": "3.1.1",
    "expose-loader": "0.7.3",
    "bootstrap": "3.3.7",
    "datatables.net": "1.10.15",
    "datatables.net-buttons": "1.4.0",
    "datatables.net-buttons-bs": "1.4.0",
    "html5shiv": "^3.7.3",
    "respond.js": "^1.4.2",
    "metismenu": "2.7.0",
    "slimscroll": "0.9.1",
    "pace-js": "1.0.2",
    "gritter": "1.7.4",
    "toastr": "2.1.2",
    "jquery.flot": "0.8.3",
    "jquery.flot.tooltip": "0.9.0",
    "ecore-template-skeleton-static": "git+ssh://HIDDEN"
  },
  "devDependencies": {
    "@symfony/webpack-encore": "^0.11.0",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6"
  }
}

webpack.config.json

var Encore = require('@symfony/webpack-encore'),
    eCoreTemplatePath = './node_modules/ecore-template-skeleton-static/';

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .enableSassLoader()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning()
    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery'
    })
    .addLoader({
        test: require.resolve('jquery'),
        use: [
            {loader: 'expose-loader', options: 'jQuery'},
            {loader: 'expose-loader', options: '$'}
        ]
    })
    .cleanupOutputBeforeBuild()
    .addEntry('jquery', './node_modules/jquery/dist/jquery.min.js')
    .addEntry('bootstrap', [
        './node_modules/bootstrap/dist/js/bootstrap.min.js',
        eCoreTemplatePath + 'css/bootstrap.min.css',
        eCoreTemplatePath + 'font-awesome/css/font-awesome.min.css'
    ])
    .addStyleEntry('animate', eCoreTemplatePath + 'css/animate.css')
    .addEntry('metismenu', [
        './node_modules/metismenu/dist/jquery.metisMenu.js',
        './node_modules/metismenu/dist/metisMenu.min.css'
    ])
    .addEntry('slimscroll', eCoreTemplatePath + 'js/plugins/slimscroll/jquery.slimscroll.min.js')
    .addEntry('pace', eCoreTemplatePath + 'js/plugins/pace/pace.min.js')
    .addEntry('gritter', [
        eCoreTemplatePath + 'js/plugins/gritter/jquery.gritter.min.js',
        eCoreTemplatePath + 'js/plugins/gritter/jquery.gritter.css'
    ])
    .addEntry('toastr', [
        eCoreTemplatePath + 'js/plugins/toastr/toastr.min.js',
        eCoreTemplatePath + 'css/plugins/toastr/toastr.min.css'
    ])
    .addEntry('flot', [
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.tooltip.min.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.spline.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.resize.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.pie.js'
    ])
    .addEntry('iCheck', [
        eCoreTemplatePath + 'js/plugins/iCheck/icheck.min.js',
        eCoreTemplatePath + 'css/plugins/iCheck/custom.css'
    ])
    .addEntry('datatables',[
        eCoreTemplatePath + 'js/plugins/dataTables/datatables.min.js',
        './node_modules/datatables.net-buttons/js/dataTables.buttons.js',
        './node_modules/datatables.net-buttons-bs/js/buttons.bootstrap.js',
        eCoreTemplatePath + 'css/plugins/dataTables/datatables.min.css',
        './node_modules/datatables.net-buttons-bs/css/buttons.bootstrap.css'
    ])
    .addEntry('fixIE', [
        './node_modules/html5shiv/dist/html5shiv.min.js',
        './node_modules/respond.js/dest/respond.min.js'
    ])
    .addEntry('ecore-template-skeleton-static',[
        eCoreTemplatePath + 'js/inspinia.js',
        eCoreTemplatePath + 'css/style.css'
    ])
;

module.exports = Encore.getWebpackConfig();

layout.html.twig

{% block javascripts %}
    <script src="{{ asset('build/jquery.js') }}"></script>
    <script src="{{ asset('build/bootstrap.js') }}"></script>
    <script src="{{ asset('build/metismenu.js') }}"></script>
    <script src="{{ asset('build/slimscroll.js') }}"></script>
    <script src="{{ asset('build/pace.js') }}"></script>
    <script src="{{ asset('build/toastr.js') }}"></script>
    <script src="{{ asset('build/iCheck.js') }}"></script>
    <script src="{{ asset('build/ecore-template-skeleton-static.js') }}"></script>
    {% endblock %}

As result, I've got:

Uncaught TypeError: $(...).metisMenu is not a function at HTMLDocument. (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:97) at mightThrow (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:3962) at process (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:4030)

ecore-template-skeleton-static.467b4f0501b93aee4b47.js:97

$('#side-menu').metisMenu();

Alexey Samara

Well, I've spend ~10 hours to find solution, and I hope it will be useful for someone...

How to provide jQuery in Symfony Webpack Encore

autoProvideVariables doesn't work such as autoProvideVariables, so do next steps:

in webpack.config.json remove all providers:
- autoProvidejQuery()
- autoProvideVariables()
- addLoader()
Create file in your bundle, for example jquery.init.js:

var $ = require('jquery');
window.$ = $;
window.jQuery = $;

Remove from webpack.config.js jquery entry and add your created js file

var Encore = require('@symfony/webpack-encore'),
    eCoreTemplatePath = './node_modules/ecore-template-skeleton-static/';

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning()
    .addEntry('jquery', './src/MyApp/AppBundle/Resources/assets/js/jquery.init.js')
    .addEntry('bootstrap', [
        './node_modules/bootstrap/dist/js/bootstrap.min.js',
        eCoreTemplatePath + 'css/bootstrap.min.css',
        eCoreTemplatePath + 'font-awesome/css/font-awesome.min.css'
    ])
    .addStyleEntry('animate', eCoreTemplatePath + 'css/animate.css')
    .addEntry('metismenu', [
        './node_modules/metismenu/dist/metisMenu.js',
        './node_modules/metismenu/dist/metisMenu.min.css'
    ])
    .addEntry('slimscroll', eCoreTemplatePath + 'js/plugins/slimscroll/jquery.slimscroll.min.js')
    .addEntry('pace', eCoreTemplatePath + 'js/plugins/pace/pace.min.js')
    .addEntry('gritter', [
        eCoreTemplatePath + 'js/plugins/gritter/jquery.gritter.min.js',
        eCoreTemplatePath + 'js/plugins/gritter/jquery.gritter.css'
    ])
    .addEntry('toastr', [
        eCoreTemplatePath + 'js/plugins/toastr/toastr.min.js',
        eCoreTemplatePath + 'css/plugins/toastr/toastr.min.css'
    ])
    .addEntry('flot', [
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.tooltip.min.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.spline.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.resize.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.pie.js'
    ])
    .addEntry('iCheck', [
        eCoreTemplatePath + 'js/plugins/iCheck/icheck.min.js',
        eCoreTemplatePath + 'css/plugins/iCheck/custom.css'
    ])
    .addEntry('datatables',[
        eCoreTemplatePath + 'js/plugins/dataTables/datatables.min.js',
        './node_modules/datatables.net-buttons/js/dataTables.buttons.js',
        './node_modules/datatables.net-buttons-bs/js/buttons.bootstrap.js',
        eCoreTemplatePath + 'css/plugins/dataTables/datatables.min.css',
        './node_modules/datatables.net-buttons-bs/css/buttons.bootstrap.css'
    ])
    .addEntry('fixIE', [
        './node_modules/html5shiv/dist/html5shiv.min.js',
        './node_modules/respond.js/dest/respond.min.js'
    ])
    .addEntry('ecore-template-skeleton-static',[
        eCoreTemplatePath + 'js/inspinia.js',
        eCoreTemplatePath + 'css/style.css'
    ])
;

module.exports = Encore.getWebpackConfig();

That's all .... Everything works!

来源：https://stackoverflow.com/questions/45698467/webpack-encore-jquery-plugins-out-of-view

标签

symfony

Webpack

webpack-encore