jQuery not exposed

I have problem with providing jQuery as var to global scope for legacy js code.

main.js

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

webpack-config.js

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

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

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

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

    // will output as web/build/app.js
    .addEntry('app', './assets/js/main.js')

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

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

// export the final configuration
module.exports = Encore.getWebpackConfig();

package.js

{
  "name": "schoolm",
  "version": "0.0.1",
  "license": "UNLICENSED",
  "private": true,
  "dependencies": {
    "jquery": "^2.1.4",
  },
  "devDependencies": {
    "@symfony/webpack-encore": "github:symfony/webpack-encore"
  }
}

html

<?php
$webpackConfig = json_decode(file_get_contents(__DIR__ . '/../mainsites/build/manifest.json'), true);
?>
<script src="<?php echo $webpackConfig['build/app.js']; ?>"></script>

chrome console

> jQuery
VM117:1 Uncaught ReferenceError: jQuery is not defined
    at <anonymous>:1:1
(anonymous) @ VM117:1
> $
function ( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		// Need init if jQuery is called (just allow error to be thrown if not included)
		return new jQuery.…

[alOneh]

@gimler you need to explicitly expose the jQuery variables. To do so:

1/ you need to install the expose-loader 2/ update you webpack config

// webpack.config.js
Encore
    // ...
    addLoader({
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: 'jQuery'
        },{
            loader: 'expose-loader',
            options: '$'
    }]);

@weaverryan what about having a exposeJquery() method ?

[gimler]

Ok got it to work. When using window.jQuery you must remove the .autoProvidejQuery() from webpack config.

main.js

// loads the jquery package from node_modules
var $ = require('jquery');
window.$ = $;
window.jQuery = $;

webpack.config.js

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

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

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

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

    // will output as web/build/app.js
    .addEntry('app', './assets/js/main.js')

    .enableSourceMaps(!Encore.isProduction())

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

// export the final configuration
module.exports = Encore.getWebpackConfig();