Add webpack theme for an existing Plone site

I am trying to enable the webpack theme package on an existing site. I've enabled the webpack theme per instructions for plonetheme.webpacktemplate. The webpack theme works when I create a new Plone site (from scratch), however when I copy the existing ZODB to the buildout and run make clean && make watch webpack returns an error (see https://gist.github.com/kcleong/059b3c975ac64c256c6481ec356f73b5). I did enable debug mode in webpack.config.js to provide more info.

It seems the webpack default and custom theme are not added to the existing site. In @@theming-controlpanel only the Barceloneta theme is active. I've also tried to reset the admin credentials to the default one. I did some digging and it seems the nodejs packages plonetheme-webpack-plugin and plonetheme-upload take care of adding the default and custom theme, but my webpack and nodejs knowledge is limited.

@kcleong What is the Plone version in question?

I looked into your gist. What plonetheme-webpack-plugin does simplified, is that it loads /Plone/config.js and /Plone/less-variables.js and with the help of those and some hardcoded magic it downloads all frontend resources form Plone into ./plone/-cache directory and maps them from there for Webpack.

According to your gist, your build is unable to find files for

'mockup-patterns-recurrence'
'tinymce-compat3x'

which should be mapped in /Plone/config.js, and

'mockup-patterns-recurrence'

which should be mapped in /Plone/less-variables.js.

If you can figure out, where those files are, they could be mapped also in webpack.config.js. See https://github.com/jyukopla/reclas/blob/master/resources/webpack.config.js for an example (it maps those alias to filesystem, but they can also be mapped to Plone with resources paths starting with ++).

There have been some Plone 5 releases where some mapping have been missing from resource registry.

@datakurre, I'm using Plone 5.1.2, this Plone site was migrated from Plone 4.3.

I've checked config.js and less-variables.js and noticed 'tinymce-compat3x'/'mockup-patterns-recurrence' are missing. I've added gists for the output on both files:

Do you have any idea how to add those files? I'm using Plone webpack for two other sites (which were set-up from scratch) and I noticed the files are indeed included in those sites.

The easiest option is to leave your site ”broken”, get those files from the other sites into your theme and link them in webpack.config.js similarly to my ”reclas” example.

@datakurre, thanks for your help, I managed to get the webpack theme working. For those interested (or stumbling upon the same error), here is the gist with my changes: https://gist.github.com/kcleong/1936157138890f91f510ee3ef5409e7e

1 Like

I like to mention that it is really ok also just get the missing files from working Plone instead using git checkout. With git checkout of mock-up there is danger of getting newer, incompatible, versions. On the other hand, it could also allow to use newer versions by purpose :slight_smile:

I pinned mockup in package.json on version/tag 2.7.2, which seems to be the correct version for Plone 5.1.2. Easier for future Plone upgrades to bump the mockup version.

1 Like