title: Symfony 4 / Webpack Encore : jQuery doesn't work
body: <p>jQuery doesn't work and I can't use my bootstrap dropdown, custom javascript...</p>
  
  <p>After a <code>npm run dev</code> (or <code>npm run build</code>), <code>app.js</code> file is well created and loads in the browser.</p>
  
  <p>Compilation is done without any error.</p>
  
  <p>I tried to enable <code>.autoProvidejQuery()</code> then <code>npm run dev</code> / <code>npm run build</code>, but nothing changes.</p>
  
  <p>I am using Symfony 4.1.6</p>
  
  <p><strong>Solution found</strong></p>
  
  <p>Change .enableSingleRuntimeChunk() to <strong>.disableSingleRuntimeChunk()</strong> in <strong>webpack.config.js</strong></p>
  
  <p>If you just comment on the line, it works but you have a warning message when you run a <code>npm run dev</code> or <code>npm run build</code>.</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>"devDependencies": {
      "@symfony/webpack-encore": "^0.22.0",
      "bootstrap": "^4.2.1",
      "jquery": "^3.3.1",
      "popper.js": "^1.14.6",
      "webpack-notifier": "^1.6.0"
  },
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
      "dev-server": "encore dev-server",
      "dev": "encore dev",
      "watch": "encore dev --watch",
      "build": "encore production --progress"
  },
  "dependencies": {
      "node-sass": "^4.11.0",
      "sass-loader": "^7.1.0"
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>var Encore = require('@symfony/webpack-encore');
  
  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 sub-directory deploy
      //.setManifestKeyPrefix('build/')
  
      /*
       * ENTRY CONFIG
       *
       * Add 1 entry for each "page" of your app
       * (including one that's included on every page - e.g. "app")
       *
       * Each entry will result in one JavaScript file (e.g. app.js)
       * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
       */
      .addEntry('js/app', './assets/js/app.js')
      .addEntry('js/ad', './assets/js/ad.js')
      .addStyleEntry('css/app', './assets/css/app.scss')
      //.addStyleEntry('css/bootstrap', './assets/css/bootstrap.min.css')
  
      // 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 &amp; 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 Sass/SCSS support
      .enableSassLoader()
  
      // uncomment if you use TypeScript
      //.enableTypeScriptLoader()
  
      // uncomment if you're having problems with a jQuery plugin
      //.autoProvidejQuery()
  
      // uncomment if you use API Platform Admin (composer req api-admin)
      //.enableReactPreset()
      //.addEntry('admin', './assets/js/admin.js')
  ;
  
  module.exports = Encore.getWebpackConfig();
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>const $ = require('jquery');
  
  global.$ = global.jQuery = $;
  
  require('bootstrap');
  </code></pre>
  
  <p><strong>base.html.twig</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;SymBNB - {% block title %}Bienvenue !{% endblock %}&lt;/title&gt;
  
          &lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;
  
          &lt;link rel="stylesheet" href="{{ asset('build/css/app.css') }}"&gt;
  
          &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous"&gt;
  
          {# &lt;link rel="stylesheet" href="/css/app.css"&gt; #}
          {% block stylesheets %}{% endblock %}
      &lt;/head&gt;
      &lt;body&gt;
          {% include 'partials/header.html.twig' %}
  
          {% block body %}{% endblock %}
  
          {% include 'partials/footer.html.twig' %}
  
          {#&lt;script src="/js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="/js/popper.min.js"&gt;&lt;/script&gt;
          &lt;script src="/js/bootstrap.min.js"&gt;&lt;/script&gt;#}
          &lt;script src="{{ asset('build/js/app.js') }}"&gt;&lt;/script&gt;
          {% block javascripts %}{% endblock %}
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Similar topics:</p>
  
  <p><a href="https://stackoverflow.com/questions/53359791/webpack-symfony-encore-jquery-third-party-plugins">webpack symfony encore jquery third party plugins</a></p>
  
  <p><a href="https://stackoverflow.com/questions/48971680/webpack-encore-is-not-defined">Webpack Encore - $ is not defined</a></p>