BUG: CKEditor plugins which extend CK classes don't load anymore

[Sebobo]

Description

CKEditor plugins that use extend CKEditor classes provided by the Neos UI don't load anymore and show errors in the dev console.

Due to the update of our build environment, old Neos UI plugins that extend classes which are provided by the Neos core will throw errors due to an incompatibility. The extensibility package still converts JS classes to functions, and the browser throws an error if those try to extend an existing actual "class".

Upgrade Instructions

To fix this problem, check our upgrade instructions for Neos 8.2

https://docs.neos.io/api/upgrade-instructions/8/upgrade-instructions-8-1-8-2#rebuilding-neos-ui-ckeditor-plugins-to-make-them-compatible-with-neos-ui-hosts-gt-8-2

Steps to Reproduce

1. Install f.e. the https://github.com/Sebobo/Shel.Neos.Hyphens plugin
2. Open the Neos UI an check the dev console
3. The plugin for the editor will also not show up when configured for a property

Expected behavior

No error and the plugin loads

Actual behavior

The following error is thrown:

TypeError: Class constructor at cannot be invoked without 'new'
    at new Hyphens (hyphens.js:10:5)

Affected Versions

Neos: 8.2

UI: 8.2

[Sebobo]

Maybe this also affects other variants of CK plugins. We will have to check.

The problem seems to happen due to the different way of how we compile the classes with the ES2020 target and without Babel we provide to plugins. This causes problems when extending them.

Similar discussion here: https://stackoverflow.com/questions/36577683/babel-error-class-constructor-foo-cannot-be-invoked-without-new/36657312#36657312

[Sebobo]

So I got it working for my hyphens plugin by reworking all class extends for Plugin and Command into functions: Sebobo/Shel.Neos.Hyphens@78049b3

It has a nice side effect of reducing the plugin size by a few KB, but I don't think this is nice for our users...

The other way of resolving this is disabling the transformES2015Classes plugin from Babel, which means we have to provide our own preset in the build-essentials and make people update their dependency.

Don't know how else we want to fix this. Going back to transforming classes is also not something I would like to do.

[mhsdesign]

Another workaround is to use the https://github.com/mhsdesign/esbuild-neos-ui-extensibility (unofficial plugin, instead of the webpack extensibility plugin "neos-ui-extensibility")

an example config would look like:

(build.js)

require("esbuild").build({
    logLevel: "info",
    bundle: true,
    target: "es2020",
    entryPoints: {"Plugin": "src/index.js"},
    loader: {
        ".js": "tsx",
    },
    outdir: "../../Public/NeosUserInterface",
    plugins: [require("@mhsdesign/esbuild-neos-ui-extensibility").neosUiExtensibility()]
})

node build.js

yarn remove @neos-project/neos-ui-extensibility
yarn add -D @mhsdesign/esbuild-neos-ui-extensibility
yarn add -D esbuild

---

Tested it and now plugins work for old and new ui.
Note! This is not a generall workaround - as you might heavily depend on webpack internals (dynamic require etc ... and splitting)

[Sebobo]

Found some issues with the function based CK plugins. They don't seem to support all features that other plugins can. I can't get inline widget to work as I can't find out how to define the requires props for the function variant.

[mhsdesign]

makes sense that a function cannot require other plugins, as it doesnt even have a name...

i would try out: on the function set a key value:

const plug = () => {}

plug.require = ...

plug.pluginName = ....

or return the respective keys in the object:

const plug = () => ({
   require,
   pluginName
})

[Sebobo]

I tried a few variants and the following seems to work:

    Hyphens.requires = [Widget];

Setting the name this way throws and error as the named function already has a name.

But best would be to convert the CK classes like before. If we cannot achieve that with reasonable effort, I see the following options:

So we could either explain to devs with an example how to convert their CK Plugin to functions, which will still mean quite some effort for agencies.

Or which I think would be better is to provide a new version of the extensibility package and tell people just to recompile.
Ideally we could provide a few PRs for some famous plugins?

[grebaldi]

As I'm currently iterating through a bunch of plugins, I'll maintain a list here of those that have this issue:

• https://github.com/visol/Visol.Neos.LinkClass