Symfony 3.3 Frontend Stack mit Zugabe - global jquery plugins

Question

Ich versuche Symfony App mit Materialize CSS Framework zu machen. Laut offizieller 3.3 Dokumentation benutze ich encore als Frontend.

Ich habe ein Problem mit Jquery-Plugins weltweit. Ich bin versucht, dies: Webpack Encore - jQuery plugins out of view und dies immer noch nicht funktioniert ...

So ... Meine webpack config:

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

Encore 
    .setOutputPath('web/build/') 
    .setPublicPath('/build') 
    .cleanupOutputBeforeBuild() 
    .autoProvidejQuery() 
    .createSharedEntry('vendor', [ 
     'materialize-css', 
     './assets/js/global.js', 
    ]) 

    .addStyleEntry('global', './assets/scss/global.scss') 
    .addEntry("createProfileModule", "./assets/js/modules/createProfile.js") 

    .enableSassLoader() 
    .enableSourceMaps(!Encore.isProduction()) 
    .enableVueLoader() 
    .addPlugin(new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     'window.jQuery': 'jquery', 
     Popper: ['popper.js', 'default'], 
     // In case you imported plugins individually, you must also require them here: 
     Util: "exports-loader?Util!bootstrap/js/dist/util", 
     Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", 
    })) 
    .enableVersioning() 
; 

module.exports = Encore.getWebpackConfig(); 

in vendor.js Ich bin auch global.js mit :

$(document).ready(() => { 
    $('.modal').modal(); 
    $(".modal .close-btn").on("click",() => { 
     $('.modal').modal('close'); 
    }); 

    $(".button-collapse").sideNav(); 

    $("#registerModal form").submit((e) => { 
     e.preventDefault(); 

     $(".modal .progress").fadeIn().promise().done(() => { 
      setTimeout(() => { 
       window.location = "/stworz-profil"; 
      }, 2500) 
     }) 
    }); 
}); 

in dieser Datei funktioniert jedes jquery plugins gut. In createProfile.js:

$('input.autocomplete').autocomplete({ 
    data: { 
     "Gdańsk": null, 
     "Gdynia": null, 
     "Sopot": null, 
     "Warszawa": null, 
    }, 
    limit: 20, 
    onAutocomplete: function(val) { 

    }, 
    minLength: 1, 
}); 

und wenn ich die Seite in der Konsole lade Ich sehe:

Uncaught TypeError: $(...).autocomplete is not a function 
    at Object../assets/js/modules/createProfile.js (createProfileModule.61543364cceab7b76d2b.js:13) 
    at __webpack_require__ (manifest.d41d8cd98f00b204e980.js:55) 
    at webpackJsonpCallback (manifest.d41d8cd98f00b204e980.js:26) 
    at createProfileModule.61543364cceab7b76d2b.js:1 

Wie global jquery mit Plug-in zur Verfügung zu stellen?

Answer 1

Okay, nach ein paar Versuchen habe ich es bekommen.

Die Lösung besteht darin, $ (Dokument) .ready vor der automatischen Vervollständigung

hinzuzufügen