Jetpack: Extensions: Jetpack blocks disappear when ActiveCampaign plugin is activated

[creativecoder]

Steps to reproduce the issue

1. On a connected Jetpack Site
2. Purchase a "Jetpack Complete" plan, if the site doesn't already have one
3. Enable experimental blocks -- define( 'JETPACK_EXPERIMENTAL_BLOCKS', true ); in wp-config.php
4. Enable SEO Tools module in Calypso -- https://wordpress.com/marketing/traffic/{site}
5. Verify that you can see the "SEO description" input in the editor sidebar
6. Then activate the ActiveCampaign plugin
7. Load a post in the editor

What I expected

1. All Jetpack blocks to be available

What happened instead

1. No Jetpack blocks are available
2. There's a js error in editor-experimental.js

Screenshots

[jeherve]

This seems to happen to me even when the SEO Tools module is disabled, and even with the Production blocks. The error points to the Social Previews extension, and not SEO tools:

https://github.com/Automattic/jetpack/blob/51c422eb82ee6fd16f4fb3a4b138ef3e80e2b1fb/extensions/shared/external-media/constants.js#L167-L170

On my end, the error actually is a few lines downer:

[creativecoder]

You're right about the source--my screenshot is in Firefox, looks like Chrome wins the prettifying minified js in this case.

To see what would happen, I removed lodash as a dependency from that file. It triggered the same error elsewhere.

I did a little digging, I still don't totally understand what's going on, but I can see that activating the ActiveCampaign plugin makes lodash disappear for editor-experimental.js (and maybe elsewhere?)

| ActiveCampaign active | ActiveCampaign inactive |
| - | - |
| | |

[jeherve]

I can see that activating the ActiveCampaign plugin makes lodash disappear for editor-experimental.js

I couldn't find the ActiveCampaign plugin on GitHub to check its source code. Maybe we could reach out to them, maybe they do something to dequeue or modify the copy of lodash that comes bundled with WordPress and is used here?

[creativecoder]

I think I found the issue, a conflict with window.webpackJsonp in the webpack builds of Jetpack blocks and the ActiveCampaign block. It looks like this has happened up with other plugins.

The webpack docs state

If multiple webpack runtimes (from different compilations) are used on the same webpage, there is a risk of conflicts of on-demand chunks in the global namespace.

If someone more versed in Jetpack webpack config can help me set the output.jsonpFunction setting to a custom value (at least for blocks, if not all transpiled Jetpack JS), I think that will resolve this.

[creativecoder]

Here's my first attempt, which didn't seem to work (the jsonp global name does not change)

https://github.com/Automattic/jetpack/pull/17312/commits/33815b44dd0d69f039aa543ef3dc71f37e338820

[jeherve]

Also reported here:
https://wordpress.org/support/topic/podcast-support-gone/

[jeherve]

Also reported here:
https://wordpress.org/support/topic/twitter-block-doesnt-show-unroll-option/

[creativecoder]

Now I see that the calypso-build package needs to be updated to support customizing the config for output.jsonpFunction in order to customize this.

PR: https://github.com/Automattic/wp-calypso/pull/46252