Gutenberg: Lodash conflict with unbuilt JS in theme

Created on 17 Aug 2019  路  4Comments  路  Source: WordPress/gutenberg

In a custom theme, I am enqueuing a plain JS (no build step) file that both removed all the WP Core "Button" block style variations, and adds two new variations.

functions.php:

add_action('enqueue_block_editor_assets', 'my_block_enqueues');
function my_block_enqueues() {
    wp_enqueue_script('stmu-2017-block-editor', get_template_directory_uri() . '/editor.js', array('wp-blocks', 'wp-dom-ready', 'wp-edit-post'));
}

editor.js:

wp.blocks.registerBlockStyle('core/button', {
    name: 'secondary-cta',
    label: 'Secondary CTA'
});
wp.blocks.registerBlockStyle('core/button', {
    name: 'primary-cta',
    label: 'Primary CTA'
});
wp.domReady( () => {
    wp.blocks.unregisterBlockStyle('core/button', 'default');
    wp.blocks.unregisterBlockStyle('core/button', 'outline');
    wp.blocks.unregisterBlockStyle('core/button', 'squared');
});

If I change "functions.php" to remove the "wp-edit-post" script dependency, then my "editor.js" file adds the new style variations to the Button block, but it does not remove the Core style variations thanks to the race condition.

However when I use my code as-is above, including the "wp-edit-post" script dependency, the editor encounters an unexpected error. The console says TypeError: this.activateMode is not a function which seems to be the error in related ticket 4043.

I have tried enqueuing lodash as recommended in that ticket:

Updated "functions.php":

add_action('enqueue_block_editor_assets', 'my_block_enqueues');
function my_block_enqueues() {
    wp_enqueue_script('lodash');
    wp_add_inline_script( 'lodash', 'window.lodash = _.noConflict();', 'after' );
    wp_enqueue_script('stmu-2017-block-editor', get_template_directory_uri() . '/editor.js', array('wp-blocks', 'wp-dom-ready', 'wp-edit-post', 'lodash'));
}

but this gives a console error of Uncaught TypeError: Cannot read property 'noConflict' of undefined

Running Windows 10 with Chrome.

[Feature] Block API [Type] Help Request

Most helpful comment

@eshannon3 Could you tell us what you did to solve this problem? I'm getting the same issue over here with unbuilt JS. Thanks!

All 4 comments

You don't have to call wp_enqueue_script('lodash') or wp_add_inline_script() to enqueue lodash. Just adding it to your dependency list is enough. WordPress will handle the rest.

When I just include lodash as a dependency, I get the TypeError and cannot use the Block Editor.

Closing as I discovered the problem was in a custom plugin, not in this theme code at all.

@eshannon3 Could you tell us what you did to solve this problem? I'm getting the same issue over here with unbuilt JS. Thanks!

Was this page helpful?
0 / 5 - 0 ratings