Updated webpack-encore recipe.

assets/bootstrap.js

@@ -1,5 +1,11 @@
 import { startStimulusApp } from '@symfony/stimulus-bridge';
-import '@symfony/autoimport';
 
 // Registers Stimulus controllers from controllers.json and in the controllers/ directory
-export const app = startStimulusApp(require.context('./controllers', true, /\.(j|t)sx?$/));
+export const app = startStimulusApp(require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+    true,
+    /\.(j|t)sx?$/
+));
+
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

config/packages/framework.yaml

@@ -1,7 +1,7 @@
 # see https://symfony.com/doc/current/reference/configuration/framework.html
 framework:
     secret: '%env(APP_SECRET)%'
-    #csrf_protection: true
+    csrf_protection: true
     http_method_override: false
 
     # Enables session support. Note that the session will ONLY be started if you read or write from it.

config/packages/prod/webpack_encore.yaml

@@ -1,7 +1,4 @@
-webpack_encore:
+#webpack_encore:
     # Cache the entrypoints.json (rebuild Symfony's cache when entrypoints.json changes)
     # Available in version 1.2
     cache: true
-
-    # Preload in production
-    preload: true

config/packages/webpack_encore.yaml

@@ -4,16 +4,26 @@ webpack_encore:
     # If multiple builds are defined (as shown below), you can disable the default build:
     # output_path: false
 
-    # if using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
+    # Set attributes that will be rendered on all script and link tags
+    script_attributes:
+        defer: true
+        # Uncomment (also under link_attributes) if using Turbo Drive
+        # https://turbo.hotwired.dev/handbook/drive#reloading-when-assets-change
+        # 'data-turbo-track': reload
+    # link_attributes:
+        # Uncomment if using Turbo Drive
+        # 'data-turbo-track': reload
+
+    # If using Encore.enableIntegrityHashes() and need the crossorigin attribute (default: false, or use 'anonymous' or 'use-credentials')
     # crossorigin: 'anonymous'
 
-    # preload all rendered script and link tags automatically via the http2 Link header
-    preload: false
+    # Preload all rendered script and link tags automatically via the HTTP/2 Link header
+    preload: true
 
     # Throw an exception if the entrypoints.json file is missing or an entry is missing from the data
     # strict_mode: false
 
-    # if you have multiple builds:
+    # If you have multiple builds:
     # builds:
         # pass "frontend" as the 3rg arg to the Twig functions
         # {{ encore_entry_script_tags('entry1', null, 'frontend') }}

package.json

@@ -1,15 +1,15 @@
 {
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^5.7.2",
-        "@symfony/stimulus-bridge": "^2.1.0",
-        "@symfony/webpack-encore": "1.6.1",
+        "@symfony/stimulus-bridge": "^2.0.0",
+        "@symfony/webpack-encore": "^1.6.1",
         "bootstrap": "^4.4.1",
         "core-js": "^3.6.4",
         "jquery": "^3.5.1",
         "popper.js": "^1.14.7",
         "@popperjs/core": "^2.10.2",
         "regenerator-runtime": "^0.13.2",
-        "stimulus": "^3.0.0",
+        "stimulus": "^2.0.0",
         "webpack-bundle-analyzer": "^4.3.0",
         "webpack-notifier": "^1.6.0"
     },

symfony.lock

@@ -791,12 +791,12 @@
         ]
     },
     "symfony/webpack-encore-bundle": {
-        "version": "1.6",
+        "version": "1.9",
         "recipe": {
             "repo": "github.com/symfony/recipes",
             "branch": "master",
-            "version": "1.6",
-            "ref": "f362ed8e8aa99a8cb216e6bdb2ac833dfb7643dd"
+            "version": "1.9",
+            "ref": "0f274572ea315eb3b5884518a50ca43f211b4534"
         },
         "files": [
             "./assets/app.js",

webpack.config.js

@@ -57,9 +57,10 @@ Encore
      * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
      */
     .addEntry('app', './assets/js/app.js')
-
     .addEntry('ru2ftwofactor', './assets/js/u2f_auth.js')
-    //.addEntry('ajaxUI', './assets/ts_src/ajax_ui.ts')
+
+    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
+    .enableStimulusBridge('./assets/controllers.json')
     //.addEntry('page1', './assets/js/page1.js')
     //.addEntry('page2', './assets/js/page2.js')
 
@@ -83,6 +84,10 @@ Encore
     // enables hashed filenames (e.g. app.abc123.css)
     .enableVersioning(Encore.isProduction())
 
+    .configureBabel((config) => {
+        config.plugins.push('@babel/plugin-proposal-class-properties');
+    })
+
     // enables @babel/preset-env polyfills
     .configureBabelPresetEnv((config) => {
         config.useBuiltIns = 'usage';
@@ -94,9 +99,12 @@ Encore
     // uncomment if you use TypeScript
     .enableTypeScriptLoader()
 
-    // uncomment if you're having problems with a jQuery plugin
-    .autoProvidejQuery()
+    // uncomment if you use React
+    //.enableReactPreset()
 
+    // uncomment to get integrity="..." attributes on your script & link tags
+    // requires WebpackEncoreBundle 1.4 or higher
+    .enableIntegrityHashes(Encore.isProduction())
     .addPlugin(new CopyPlugin([
         {
             from: 'node_modules/bootswatch/dist/*/*.min.css',
@@ -109,9 +117,9 @@ Encore
         }
     ]))
 
-// uncomment if you use API Platform Admin (composer req api-admin)
-//.enableReactPreset()
-//.addEntry('admin', './assets/js/admin.js')
+    // uncomment if you're having problems with a jQuery plugin
+    .autoProvidejQuery()
+
 ;
 
 if (Encore.isProduction()) {