Gutenberg: Unexpected editor error when importing lodash to block

[tinboyko]

Issue Overview

Steps to Reproduce (for bugs)

1. Create block
2. import { get } from 'lodash';
3. The editor has encountered an unexpected error.

react-dom.min.b75d8b30.js:62 TypeError: this.activateMode is not a function at load-scripts.php?c=1&load[]=hoverIntent,common,admin-bar,svg-painter,heartbeat,wp-auth-check,backbone,wp-util,wp-backbone,media-models,wp-plupload,jquery-ui&load[]=-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,wp-mediaelement,media-views,postbox&ver=4.9.5:298

Chrome

[roborourke]

@TinBoyko it's because lodash is already in a global context so you have to import the sub script directly eg:

import get from 'lodash/get';

Just needs documenting I think.

[keesiemeijer]

related #4043

[aduth]

1. Create block

Can you elaborate? Share some sample code?

[aduth]

In debugging this further, just as in #4043, this is nothing to do with Gutenberg itself, but rather the plugin's loading of Lodash causing Underscore to be overridden, therefore conflicting with usage in media scripts. You'll see similar breakage on the classic editor if you allow your scripts to be loaded there.

You should do one of the following:

• Depend on the lodash script handle introduced (to Gutenberg) in #5933 (preferred because it avoids multiple copies of Lodash being bundled)
• Use the lodash-es module to avoid having the _ global being set
• Assist with the effort to port Underscore to Lodash: https://core.trac.wordpress.org/ticket/43733#ticket

[robertsheacole]

Just for anyone getting an error related to _.pluck is not being defined in WordPress. I have a plugin using Vue.js and inside of one of my templates I am importing lodash. This caused a collision and the post editor in the admin broke. You could not see the content in the view tab, but you could in the text tab. In face, those buttons didn't work because that's what WP core is using the pluck function on in core. When I removed lodash it worked and also when I imported the specific name spaced version, like import get from "lodash/get" it worked.