PLIP: Reset define in RequireJS after bundles loaded

[vangheem]

Proposer : vangheem

Seconder : bloodbare

Abstract

Reset the requirejs define global variable in Plone so add-on developers do not have to learn how to use requirejs if they are including js that expect requirejs to be used.

Motivation

We have integrators that face Uncaught Error: Mismatched anonymous define errors and do not know how to deal with it. While this is documented in RequireJS and there are answers on stackoverflow, it is still annoying and difficult to deal with as an integrator.

Also see: https://community.plone.org/t/third-party-js-add-ons-inside-one-template/1950

Assumptions

• RequireJS still be used for js dependency resolution in plone

Proposal & Implementation

• Set define to undefined after the built resources are included
• Implementation would be in CMFPlone, simply something like this would be added after the resources:

<script>
plone_define = define;
define = undefined;
</script>

Deliverables

• a PR with this integrated into Products.CMFPlone

Risks

This breaks behavior with normal requirejs usage. Developers will need to change how they are using requirejs in their projects if they are using it without the built bundles as define will no longer be supported OOTB outside of plone's bundles.

[zopyx]

+1 for any solution that would allow us to use (in general arbitrary) JS add-ons in Plone.

[rnixx]

There has been a similar workaround in plone with jquery by providing "jq" pointing to "jQuery". People then just started to wrap their JS in anonymous functions.

It might be an option to apply this pattern with require as well

(function(define, require) {
  require([
    'mockup-pattern-autotoc'
  ], function(AutoTOC){
    // something
  });
})(plone_define, plone_require);

It would be an option to generate the wrapper around bundles if desired.

So there's no real code changes needed in recent bundles, no "require" and "define" by default and a clear way to write requirejs using code.

[ebrehault]

Does it really have to be a PLIP?
In my opinion, it does not highly impact how Plone works, a PR should be enough.

[pigeonflight]

+100

[tisto]

+1

[ebrehault]

@vangheem The PLIP has been approved by the Framework Team.

[jensens]

Is there any implementation/branch already around?

[rnixx]

If the title of this PLIP applies it's not what I was suggesting ;)

I was thinking about wrapping each bundle if desired but the "core" bundle, loading the JS basics and immediately undefining define and require.

[thet]

Recently I unset require and define for a JavaScript block in a theme, which is located at the very end of the HTML document. After the JS block I re-set it again.

I got a lot of "define is not a function" errors.

I thought it could have been due to the async behavior, that some JS was just loaded while the browser has unset define. But that's probably unlikely.
Probably it was due to some JS errors in the script (but the console didn't show any) and re-defining define and require couldn't happen anymore.

Whatever the case was, when AMD tried to load its resources, require and define weren't available. I removed the whole block and registered it as legacy JS resources, which worked fine.

Isn't it likely that the same happens when implementing this PLIP?

[jensens]

I think @thet adressed the issue long time ago and the plip can be closed. Reopen if your of a different opinion and start working on it...