Conflict with Ninja Forms

Hey,
Thanks for posting. I just installed ninja forms and couldn’t recreate. I tried to test with many different types of rows. Can you tell me what version of the plugins you are using along with what version of Gutenberg and any other plugins you have installed so I can go through and recreate?

Thanks!

Ben

Kadence Blocks 1.0.6
Ninja Forms 3.3.16. I have one Ninja Form on another page, not page being edited.
Gutenberg 3.9.0
WordPress 4.9.8
using a slightly modified version of Gutenberg Starter Theme.

When I add a new Kadence “Row Layout” block to a page, or try to enter and use an existing one:

I get error message that replaces gutenberg editor area:

The editor has encountered an unexpected error.

Attempt Recovery
Copy Post Text
Copy Error

copy error info:

TypeError: this.activateMode is not a function
at https://qqq2018-clone.local/wp-includes/js/media-views.min.js?ver=4.9.8:1:24303
at arrayEach (webpack-internal:///222:516:11)
at Function.forEach (webpack-internal:///222:9344:14)
at n._createModes (https://qqq2018-clone.local/wp-includes/js/media-views.min.js?ver=4.9.8:1:24263)
at n.initialize (https://qqq2018-clone.local/wp-includes/js/media-views.min.js?ver=4.9.8:1:23672)
at n.initialize (https://qqq2018-clone.local/wp-includes/js/media-views.min.js?ver=4.9.8:1:25310)
at n.initialize (https://qqq2018-clone.local/wp-includes/js/media-views.min.js?ver=4.9.8:1:28182)
at n.e.View (https://qqq2018-clone.local/wp-includes/js/backbone.min.js?ver=1.2.3:1:14744)
at n.constructor (https://qqq2018-clone.local/wp-includes/js/wp-backbone.min.js?ver=4.9.8:1:2616)
at n.constructor (https://qqq2018-clone.local/wp-includes/js/media-views.min.js?ver=4.9.8:1:23119)

No copy post text gets copied when I click that button.
Attempt Recovery does nothing.
Error goes away when I deactivate Ninja Forms.

Hmm can you outline what changes were made?

“using a slightly modified version of Gutenberg Starter Theme”

I can’t recreate at all. I see you are on a local are you editing any files in any of the plugins?

I know this error was referenced here: https://github.com/WordPress/gutenberg/issues/4043

but Kadence Blocks isn’t loading lodash like that and from as much as I can tell ninja forms isn’t either. And regardless that would make it a conflict with core not with another plugin which your description of the error doesn’t seem to be.

Yes, this seems to be related to how Kadence and/or Ninja Forms loads lodash, perhaps the lodash.undefined function.

The addition to Gutenberg starter theme that seems to trigger problem is a block that is a modified version of the standard gutenberg latest posts block. The modified block is a renamed copy of the standard latest posts block but adds the ability to select by custom post type, which is not included in the standard block.

In edit.js of the standard latest posts block (and the modified one):

import { isUndefined, pickBy } from ‘lodash’;

I see that Kadence blocks seems to load its own version of lodash (“__lodash_hash_undefined__”)

When all three are loaded (kadence, ninja forms, and the modified version of latest posts), the error occurs. But not if any two of them are loaded.

Hope this helps. An amateur guess would be that both Kadence, Ninja Forms, and gutenberg edit.js file of latest-posts blocks load lodash in a subtly conflicting way.

I don’t see lodash in any ninja forms files. I think the only reason it’s being relevant is that it loads underscore to create the conflict.

In your edited plugin try changing this:

import { isUndefined, pickBy } from 'lodash';

to this:

import pickBy from 'lodash/pickBy';
import isUndefined from 'lodash/isUndefined';

Like outlined in the link above. Then test.

Yes, changing edited plugin as you suggest makes error go away. Thanks.

Yes, it looks like Ninja Forms uses Underscore rather than Lodash, and the two are not quite the same. This triggers a lurking conflict between Kadence and Ninja Forms.

Don’t know what Kadence can do, maybe load lodash functions in a constrained similar way. The edited plugin was loading lodash function in the “official” Gutenberg way, so it seems this will continue to break whenever this kind of combination occurs.

I think the GitHub post above seems to state that your edited plugin is the issue with how it’s loading lodash, since it’s not in the Gutenberg plugin itself. I think an easy test would be to deactivate Kadence blocks. And try using your plugin while ninja forms is active.

Make sure you put your code back to import { isUndefined, pickBy } from 'lodash'; while you test.

Thanks for suggestion, I retested and there is still no apparent conflict between the edited plugin and Ninja Forms when Kadence is deactivated. Problem is only when all three are activated. Maybe some other lodash or underscore subtle incompatibility is lurking.

But your suggested workaround to import lodash differently from the “official” gutenberg way in the latest-posts blocks works for me, so I am good. Thanks.

I read the Github post slightly differently. Like most blocks now I assume, the edited block uses the standard gutenberg npm babelrc preset @wordpress/default. And the standard loading technique used by gutenberg itself. So seemingly, stuff should work.

I am guessing that most folks will do and think similar going forward, and will not try to come up with their own babel preset configuration to avoid one-off conflicts with other plugins. And they will assume that if something works in a standard Gutenberg block, it will also work in a custom block.

So whatever is the real issue, some folks will potentially find themselves in this same lurking conflict when some plugin uses underscore instead of lodash.

Anyway the original error I posted is pretty cryptic, like the Github post says.

Thanks for your workaround. Much appreciated.

It’s certainly strange. I’ve seen several more posts about this in differnet topics on github. For example: https://github.com/WebDevStudios/WDS-Blocks/issues/9#issuecomment-382760140

I’m not sure that there is “official” with all the references to people needing to define like that.

Glad you have it working.

Ben