Imagine you are busy developing a Gutenberg block. You reload the page, and suddenly the editor will break, displaying an The editor has encountered an unexpected error. message. You look into the JavaScript console of your browser, and see a this.activateMode is not a function error.
What is the error cause?
On the screenshot above, you can see that the stack trace includes references to /wp-includes/js/media-views.min.js. Searching for the this.activeMode string inside of WordPress’ media code, we find this occurrence:
_createModes: function() {
// Store active "modes" that the frame is in. Unrelated to region modes.
this.activeModes = new Backbone.Collection();
this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) );
_.each( this.options.mode, function( mode ) {
this.activateMode( mode );
}, this );
},
The _ in this snippet is the entry point of Underscore.js, a helper library that ships with WordPress.
However looking further into the error message above, it contains two functions names: forEach and arrayEach.
Searching through the codebase, we find that these functions are part of Lodash, a helper library used by Gutenberg.
function forEach(collection, iteratee) {
var func = isArray(collection) ? arrayEach : baseEach;
return func(collection, getIteratee(iteratee, 3));
}
function arrayEach(array, iteratee) {
var index = -1,
length = array == null ? 0 : array.length;
while (++index < length) {
if (iteratee(array[index], index, array) === false) {
break;
}
}
return array;
}
Both Underscores and Lodash use _ to expose their API. When Gutenberg is loaded, Lodash overwrites the _ global variable used by Underscore.
The two libraries include a _.each() function. But the signature is different, as Lodash’s implementation does not support the content argument:
Underscore: _.each(obj, iteratee, context)
Lodash: _.each(collection, iteratee)
This means that in this snippet from WordPress media code, the this variable is not passed along, which leads to a fatal error:
When you are using Webpack and Babel to build the JavaScript in your Gutenberg blocks you need to add babel-plugin-lodash as an NPM dependency. Then add an entry to your project’s .babelrc as described in the plugin’s documentation.
This will modify the way that Lodash dependencies are included. _.each() would be transformed to _each(), therefore avoiding overwriting any of WordPress’ JavaScript globals.
If you are not using a build pipeline, and are writing your blocks in plain JavaScript, make sure to enable the no conflict mode of Lodash when enqueuing the script:
WordPress 5.0 contains a regression that does not allow React to be loaded in development mode, as described in this article, see Trac Ticket #45535. As a work around, you can download this code snippet, and enable it as a MU Plugin, or place it somewhere else in your custom code.
Enabling Script Debug
To use the React development mode in Gutenberg, you need to set the SCRIPT_DEBUG constant in your wp-config.php file to true.
To verify which version of React is running, you can use the React Developer Tools for Chrome. It adds an icon to the browser that changes depending on which React version is running.
If you are on a website using the React production build, the icon will have dark background:
However of the development build of React is loaded, the icon will have an orange background:
