Un plugin lance une erreur de type (TypeError) après la mise à jour de WordPress 4.5

Question

Je suis en train de déboguer un plugin Visual Composer qui s'est cassé après la mise à jour de WordPress en 4.5 et je n'arrive pas à comprendre pourquoi il envoie une TypeError.

Le message d'erreur dans la console :

JQMIGRATE: Migrate is installed, version 1.4.0              load-scripts.php?....
Uncaught TypeError:     $template.get is not a function     composer-view.js?ver=4.1.1.1:73

Les seules occurrences de $template se trouvent dans le code ci-dessous. Je comprends que ce n'est pas un contexte très important, mais comment puis-je résoudre cette erreur ?

/**
 * Convert html into correct element
 * @param html
 */
html2element: function(html) {
  var attributes = {},
    $template;
  if (_.isString(html)) {
    this.template = _.template(html);
    $template = $(this.template(this.model.toJSON()).trim());
  } else {
    this.template = html;
    $template = html;
  }
  _.each($template.get(0).attributes, function(attr) { // **errors on this line**
    attributes[attr.name] = attr.value;
  });
  this.$el.attr(attributes).html($template.html());
  this.setContent();
  this.renderContent();
},

Mise à jour :

Il semble que ce soit un problème avec jQuery. WordPress 4.5 inclut jQuery 1.12 qui a corrigé un bug permettant l'exécution de certains codes avec une syntaxe incorrecte. Je suppose que le code du plugin devait avoir une syntaxe incorrecte mais fonctionnait néanmoins jusqu'à présent.

https://wordpress.org/support/topic/read-this-first-wordpress-45-master-list#post-8271654

Answer 1

J'ai pu résoudre le problème. Il s'avère que j'utilisais une ancienne version de JS composer. La mise à jour vers la version la plus récente a cassé mon site, j'ai donc retrouvé l'erreur et mis à jour le fichier d'installation. html2element à la fonction

html2element: function(html) {
            var $template, attributes = {},
                template = html;
            $template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
                attributes[attr.name] = attr.value
            }), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
        },

Tout fonctionne bien pour moi à nouveau ! J'espère que cela aidera d'autres personnes.

Answer 2

J'obtenais toujours cette erreur après avoir essayé le patch dans la réponse de Ben : Erreur de Type Non Rattrapée : Impossible de lire la propriété 'custom' d'undefined.

J'ai donc modifié le html2element dans composer-view.js comme suit :

 html2element: function(html) {
        var $template, attributes = {},
            template = html;

        $template = $(template(this.model.toJSON()).trim());
        if($template.get(0))
        {
            _.each($template.get(0).attributes, function(attr) {
            attributes[attr.name] = attr.value
        })};

        this.$el.attr(attributes).html($template.html()),
        this.setContent(),
        this.renderContent()
    },

Answer 3

@Ben Cela fonctionne parfaitement !

Cause : L'administrateur ne chargeait pas le bon éditeur visuel pour le plugin js_composer après la mise à jour de ce plugin.

\=====================================================

Erreur :

Erreur : TypeError : $template.get n'est pas une fonction Fichier source : wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js?ver=4.10 Ligne : 4047

\=====================================================

Solution Aller au fichier /wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js autour de la ligne 4045 :

\======> Remplacer le code =====================================================

    html2element: function(html) {
        var $template, attributes = {};
        _.isString(html) ? (this.template = _.template(html), $template = $(this.template(this.model.toJSON(), vc.templateOptions["default"]).trim())) : (this.template = html, $template = html), _.each($template.get(0).attributes, function(attr) {
            attributes[attr.name] = attr.value
        }), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
    },

\======> Remplacer par ce code ========================================

    html2element: function(html) {
        var $template, attributes = {},
        template = html;
        $template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
                attributes[attr.name] = attr.value}), 
                this.$el.attr(attributes).html($template.html()), this.setContent(), 
                this.renderContent()
    },

Answer 4

J'ai remarqué que le code n'était pas transmis à la fonction html2element, mais qu'il existait dans la fonction qui l'appelle (render).

Le code suivant a complètement corrigé mes problèmes, je peux charger la page, ajouter, cloner, supprimer, etc.

render: function () {
            var $shortcode_template_el = $( '#vc_shortcode-template-' + this.model.get( 'shortcode' ) );
            if ( $shortcode_template_el.is( 'script' ) ) {
                var newHtmlCode =  _.template( $shortcode_template_el.html(),
                                                this.model.toJSON(),
                                                vc.templateOptions.default );
                if(!_.isString(newHtmlCode)){
                    newHtmlCode = $shortcode_template_el.html();
                }
                this.html2element( newHtmlCode );
            } else {
                var params = this.model.get( 'params' );
                $.ajax( {
                    type: 'POST',
                    url: window.ajaxurl,
                    data: {
                        action: 'wpb_get_element_backend_html',
                        data_element: this.model.get( 'shortcode' ),
                        data_width: _.isUndefined( params.width ) ? '1/1' : params.width,
                        _vcnonce: window.vcAdminNonce
                    },
                    dataType: 'html',
                    context: this
                } ).done( function ( html ) {
                    this.html2element( html );
                } );
            }
            this.model.view = this;
            this.$controls_buttons = this.$el.find( '.vc_controls > :first' );
            return this;
        },

Answer 5

J'utilise le thème Applay (2.1.3, un peu dépassé). Je viens de mettre à jour WP et tous les plugins à la version la plus récente (4.5.2) et j'ai rencontré le même problème. Je n'ai pas analysé le flux de ce composant (js_composer), juste cette fonction "cassée" (elle ne l'est pas vraiment). Je me suis rendu compte que this.template et $template reçoivent des types d'objets erronés (il faut une autre validation à côté). _.isString(html) ). Je l'ai résolu en ajoutant un bloc try & catch comme suit :

ORIGINAL

    html2element:function (html) {
        var attributes = {}, 
            $template;
        if (_.isString(html)) {
            this.template = _.template(html);
            $template = $(this.template(this.model.toJSON()).trim());
        } else {
            this.template = html;                                                                                                                                            
            $template = html;
        }
        _.each($template.get(0).attributes, function (attr) {
            attributes[attr.name] = attr.value;
        }); 
        this.$el.attr(attributes).html($template.html());
        this.setContent();
        this.renderContent();
    },

MODIFIÉ

    html2element:function (html) {
        var attributes = {}, 
            $template;
        if (_.isString(html)) {
            this.template = _.template(html);
        } else {
            try {
                this.template = _.template(html());                                                                                                                          
            } catch (err) {
                this.template = html;
            }   
        }   
        $template = $(this.template(this.model.toJSON()).trim());
        _.each($template.get(0).attributes, function (attr) {
            attributes[attr.name] = attr.value;
        }); 
        this.$el.attr(attributes).html($template.html());
        this.setContent();
        this.renderContent();
    },