TypeError:this.activateMode不是一个函数( gutenberg WordPress)

mrzz3bfm  于 2023-08-03  发布在  WordPress
关注(0)|答案(2)|浏览(143)

我正在努力解决我的自定义 gutenberg 插件插件的问题。有时,它会导致 gutenberg 编辑器中断,并显示以下错误消息。
ypeError: this.activateMode is not a function

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依赖性引起的。所以我除掉了洛德什。但似乎没有什么能修复这个错误。
不过,问题依然存在。它不会一直出现,但偶尔会出现

**注意:**当用户清除localStorage时,可以暂时删除该错误。

任何帮助都将是非常感激在修复这个。
P.S.此插件存在问题。https://wordpress.org/plugins/editorplus/
穆尼尔·蒂亚

3bygqnnd

3bygqnnd1#

这是下划线和lodash库之间的冲突。Underscore用于媒体库中的WordPress和 gutenberg 中的lodash。问题的tl;dr是因为两个库都使用_简写,一个包含activateMode函数,另一个不包含,所以当调用_.activateMode时,它不存在,并引发错误。更复杂的是,这似乎真的只是一个问题时,使用组件,利用媒体库。
我看到了两种解决方案:
1.在构建过程中使用@wordpress/scripts包。在这里似乎不是问题。
1.使用以下辅助工具:

/**
 * 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();
}

wztqucjr

wztqucjr2#

我在使用 gutenberg 时也遇到了类似的问题,因为loadash的_ shorthand与下划线库的_ shorthand冲突,我解决这个问题的方法是只导入特定的函数,而不是整个loadash库。
例如,在我的项目中,下面的代码导致了这个问题:

import _ from "lodash";
_.isEqual(a[left], b[left]);

字符串
为了解决这个问题,我这样称呼它:

import isEqual from 'lodash/isEqual';
isEqual(a[left], b[left]);


希望这对你有帮助!

相关问题