javascript - lodash dependency in a Gutenberg plugin

I'm taking my first steps in Gutenberg block development and I'm already stuck. My block JS script makes use of a couple lodash functions (filter and pick). I'm registering my block using the following function:

function register_block() {
    wp_register_script(
        'block-script',
        plugins_url( 'block.build.js', __FILE__ ),
        array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-utils', 'lodash' )
    );

    register_block_type( 'my/block', array(
        'editor_script' => 'block-script',
    ) );
}

As you can see I'm adding the lodash lib as a dependency, and checking the page source code it's effectively loaded before my plugin's script. However, I'm getting a ReferenceError: pick is not defined console error.

This is the line that calls the pick function:

onSelectImages( images ) {
    this.props.setAttributes( {
        images: images.map( ( image ) => pick( image, [ 'alt', 'caption', 'id', 'url' ] ) ),
    } );
}

I don't know what I'm doing wrong. Any ideas?

Thanks in advance

I'm taking my first steps in Gutenberg block development and I'm already stuck. My block JS script makes use of a couple lodash functions (filter and pick). I'm registering my block using the following function:

function register_block() {
    wp_register_script(
        'block-script',
        plugins_url( 'block.build.js', __FILE__ ),
        array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-utils', 'lodash' )
    );

    register_block_type( 'my/block', array(
        'editor_script' => 'block-script',
    ) );
}

As you can see I'm adding the lodash lib as a dependency, and checking the page source code it's effectively loaded before my plugin's script. However, I'm getting a ReferenceError: pick is not defined console error.

This is the line that calls the pick function:

onSelectImages( images ) {
    this.props.setAttributes( {
        images: images.map( ( image ) => pick( image, [ 'alt', 'caption', 'id', 'url' ] ) ),
    } );
}

I don't know what I'm doing wrong. Any ideas?

Thanks in advance

• plugin-development
• javascript
• block-editor

Share Improve this question edited Apr 25, 2018 at 19:14 leemon asked Apr 25, 2018 at 15:42 leemonleemon 2,02844 gold badges2525 silver badges5151 bronze badges 2

• Related core ticket #43733 for replacing underscore with lodash. – birgire Commented Apr 25, 2018 at 18:16
• Are you just calling pick as is? Can you edit your question with the line of code in question? – Tom J Nowell ♦ Commented Apr 25, 2018 at 18:52

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 4

In the block script I had to replace:

import pick from 'lodash/pick';

with:

const { pick } = lodash;

And now it seems to work for me.

The problem is that lodash isn't a script dependency, it's an NPM dependency:

array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-utils', 'lodash' )

You can't enqueue it this way and expect your application to build. Lodash may be available in WP Admin, but webpack runs in a local Node CLI context, and it doesn't know what lodash is. So instead you need to use npm to acquire the library and include it in your final JS build via babel/webpack/etc. This way webpack/babel know about lodash and can do their job correctly.