类型错误：this.activateMode 不是一个函数（Gutenberg WordPress）

Question

我正在努力解决我的自定义古腾堡附加插件中的问题。有时，它会导致古腾堡编辑器崩溃并显示以下错误消息。

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时，该错误可以暂时消除。

任何帮助解决这个问题将不胜感激。

PS 问题出在这个插件上。 https://wordpress.org/plugins/editorplus/

穆尼尔·蒂亚

Answer 1

这是 underscore 和 lodash 库之间的冲突。Underscore 用于 WordPress 的媒体库，lodash 用于古腾堡。问题的关键在于，因为两个库都使用简写_，一个包含该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( _ ) && '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();
}