I am struggling with an issue in my custom Gutenberg Add-on plugin. Occasionally, it is causing the Gutenberg editor to break with the following error message.

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)

I've also followed the following article: /articles/how-to-fix-activatemode-is-not-a-function-error-in-gutenberg/,

According to the article above the issue is somehow caused by the Lodash Dependency. Therefore I've removed Lodash. But nothing seems to fix the error.

Still, the issue remains there. it doesn't e all the time, but, occasionally.

Note: The error can be temporarily removed when the user clear localStorage.

Any help would be really appreciated in fixing this.

P.S. The issue is with this plugin. /

TIA, Munir

I am struggling with an issue in my custom Gutenberg Add-on plugin. Occasionally, it is causing the Gutenberg editor to break with the following error message.

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)

I've also followed the following article: https://wpdevelopment.courses/articles/how-to-fix-activatemode-is-not-a-function-error-in-gutenberg/,

According to the article above the issue is somehow caused by the Lodash Dependency. Therefore I've removed Lodash. But nothing seems to fix the error.

Still, the issue remains there. it doesn't e all the time, but, occasionally.

Note: The error can be temporarily removed when the user clear localStorage.

Any help would be really appreciated in fixing this.

P.S. The issue is with this plugin. https://wordpress/plugins/editorplus/

TIA, Munir

• javascript
• reactjs
• wordpress
• wordpress-gutenberg
• gutenberg-blocks

• Did the answer address your issue? If so, please accept it for others seeing this issue. – Welcher Commented Feb 1, 2021 at 15:42
• added lodash as externals in webpack config file, still won't worked. any idea? – Atul Sharma Commented Mar 4, 2021 at 8:50

3 Answers 3

This is a conflict between the underscore and lodash libraries. Underscore is used in WordPress in the media library and lodash in Gutenberg. The tl;dr of the issue is that because both libraries use the _ shorthand, one contains the activateMode function and the other does not so when _.activateMode is called, it doesn't exist and the error is fired. To further plicate this, it seems to really only be an issue when using ponents that utilize the media library.

I've seen two solutions to this:

1. Use the @wordpress/scripts package for your build process. It doesn't seem to be an issue here.
2. Use the following helper:

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

Call it like this:

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

I was facing a similar issue with Gutenberg as the _ shorthand of the loadash conflicts with the _ shorthand of the underscore library, the way I resolved this was only importing the specific functions and not the entire loadash library.

For example in my project below code was causing the issue:

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

To fix I called it like this:

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

Hope this helps!

I don't know if it help anyone but at this date (06.11.24) , the problem was from the plugin of Wooerce Payments , opening up the dev tools console , there was some privacy issues between chrome and the usage of third party cookies , ( the problem that i was having has when i was using classic widgets , i couldnt select an image .)