Блог

Я борюсь с проблемой в моем пользовательском дополнительном плагине Gutenberg. Иногда это приводит к прерыванию работы редактора Gutenberg со следующим сообщением об ошибке.

ypeError: this.activateMode не является функцией

 react-dom.min.js?ver=16.9.0:103 TypeError: this.activateMode is not a function
    at media-views.min.js?ver=5.5:2
    at st (build.js?ver=1.0.0:9)
    at Function.sa (build.js?ver=1.0.0:9)
    at i._createModes (media-views.min.js?ver=5.5:2)
    at initialize (media-views.min.js?ver=5.5:2)
    at initialize (media-views.min.js?ver=5.5:2)
    at initialize (media-views.min.js?ver=5.5:2)
    at i.h.View (backbone.min.js?ver=1.4.0:2)
    at i.constructor (wp-backbone.min.js?ver=5.5:2)
    at i.constructor (media-views.min.js?ver=5.5:2)
  

Я также ознакомился со следующей статьей:
https://wpdevelopment.courses/articles/how-to-fix-activatemode-is-not-a-function-error-in-gutenberg/,

Согласно статье выше, проблема каким-то образом вызвана зависимостью Lodash. Поэтому я удалил Lodash. Но, похоже, ничто не исправляет ошибку.

Тем не менее, проблема остается нерешенной. это происходит не все время, но изредка.

Примечание: Ошибка может быть временно удалена, когда пользователь очистит localStorage.

Любая помощь была бы очень признательна в исправлении этого.

P.S. Проблема в этом плагине. https://wordpress.org/plugins/editorplus /

ТИА, Мунир

Это конфликт между библиотеками подчеркивания и Lodash. Подчеркивание используется в WordPress в библиотеке мультимедиа и Lodash в Gutenberg. Основная проблема заключается в том, что, поскольку обе библиотеки используют _ сокращение, одна содержит activateMode функцию, а другая нет, поэтому при _.activateMode вызове она не существует и выдается ошибка. Чтобы еще больше усложнить это, кажется, что это действительно проблема только при использовании компонентов, которые используют библиотеку мультимедиа.

Я видел два решения для этого:

1. Используйте @wordpress/scripts пакет для процесса сборки. Похоже, здесь это не проблема.
2. Используйте следующий помощник:

 
/**
 * Determines if _ is lodash or not
 */
export const isLodash = () => {
    let isLodash = false;

    // If _ is defined and the function _.forEach exists then we know underscore OR lodash are in place
    if ( 'undefined' != typeof( _ ) amp;amp; 'function' == typeof( _.forEach ) ) {

        // A small sample of some of the functions that exist in lodash but not underscore
        const funcs = [ 'get', 'set', 'at', 'cloneDeep' ];

        // Simplest if assume exists to start
        isLodash  = true;

        funcs.forEach( function ( func ) {
            // If just one of the functions do not exist, then not lodash
            isLodash = ( 'function' != typeof( _[ func ] ) ) ? false : isLodash;
        } );
    }

    if ( isLodash ) {
        // We know that lodash is loaded in the _ variable
        return true;
    } else {
        // We know that lodash is NOT loaded
        return false;
    }
};
  

Назовите это так:

 /**
 * Address conflicts
 */
if ( isLodash() ) {
    _.noConflict();
}