Webpack Encore Jquery Maximum call stack size

Question

Im facing an issue after upgrading to Symfony 4.1 and switching to Encore.

Uncaught RangeError: Maximum call stack size exceeded
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)
at _typeof (bundle.js?v=1.6565:3454)

I tried to search for a source of problem and only after removing everything with jquery include from compose.js (and includes) the Error disappeared. But of course I need jquery...

As soon as I 'import jQuery from 'jquery'' or 'Encore.autoProvidejQuery()' the error occurs

Webpack.config.js:

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

let publicPath = '/build/';
if (Encore.isProduction()) { // yarn run encore production
    publicPath = '/****_symfony/build/';
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath(publicPath)
    .setManifestKeyPrefix('build/')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .addEntry('bundle', './assets/compose.js')
    .enableStylusLoader()
    .enableLessLoader()
    .enableSassLoader()
;

const config = Encore.getWebpackConfig();
for (const rule of config.module.rules) {
    if (rule.hasOwnProperty('use')) {
        for (loader of rule.use) {
            if (loader.loader === 'babel-loader') {
                delete rule.exclude;
            }
        }
    }
}
module.exports = config;

Answer 1

Well, if you face the same issue, it's probably because you forgot to remove old packages from package.json.

Babel, Gulp etc. could be the problem. It's working as it should now.